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

Question

我有一个表格，里面有<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 元素之间放置表单。解决方案是重新设计以类似于表格。另外，使用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>