在 Vanilla JavaScript 的 Table 的每一 <tr> 行中使用 AJAX `onKeyUp` 提交表单

Question

我有一个 table 行，里面有 <form> 标签，单元格内有 <input> 标签，如下面的标记所示。

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th> 
  </tr>
  <tr>
   <form>
    <td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="text" name="Firstname"/></td>
    <td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="text" name="Lastname"/></td>
    <td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="number" name="Age"/></td>
   </form>      
  </tr>
  <tr>
   <form>
    <td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="text" name="Firstname"/></td>
    <td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="text" name="Lastname"/></td>
    <td><input onkeyup="return searchGet(this.parentNode.parentNode)" type="number" name="Age"/></td>
   </form>      
  </tr>
........
</table>

现在我想使用纯 Vanilla JavaScript Ajax 函数提交每行表单，只要有人在输入标签中键入他们各自的表单。我的 Ajax 功能很简单，就是让表单对象在我们输入任何元素时选择所有表单元素值。

function searchGet(incomingForm) {
    var FD = new FormData(incomingForm);    
    var ajx = new XMLHttpRequest();
    ajx.onreadystatechange = function () {
        if (ajx.readyState == 4 && ajx.status == 200) {
            console.log(ajx.responseText);
        }
    };
    ajx.open("POST", "submit.php", true);
    ajx.send(FD);
    return false;
}

现在的问题是 this.parentNode.parentNode 没有选择 <FORM> 元素，而是直接选择 <TR> 元素。那么我怎样才能让它完美地工作呢？

注意：我尝试了很多其他方法，但无法做到...

this.parentElement.parentElement
this.parentNode.parentNode
this.closest(form)

Answer 1

如您所见 here，您不能在 tr 元素之间放置表单。解决方案是重新设置样式以类似于 table。另外，使用 addEventListener 以获得更优雅的代码。

document.body.addEventListener("keyup", function(ev) {
  if (ev.target.tagName == "INPUT") {
    console.log(ev.target.closest("form").id);
  }
});

div { display: inline-block; width: 100px; }
input {width: 95px; }

<div>Firstname</div>
<div>Lastname</div>
<div>Age</div>
<form id="first">
  <div><input type="text" name="Firstname" /></div>
  <div><input type="text" name="Lastname" /></div>
  <div><input type="number" name="Age" /></div>
</form>
<form id="second">
  <div><input type="text" name="Firstname" /></div>
  <div><input type="text" name="Lastname" /></div>
  <div><input type="number" name="Age" /></div>
</form>

在 Vanilla JavaScript 的 Table 的每一 <tr> 行中使用 AJAX `onKeyUp` 提交表单

Submit Form Using AJAX `onKeyUp` In Each <tr> Row Of A Table In Vanilla JavaScript

html

javascript

forms

ajax

this