[在每个表单中使用AJAX onKeyUp`提交表单 Vanilla JavaScript中的表的行

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函数很简单，只要键入任何元素，就可以让Form Object选择所有表单元素的值。

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获得更优雅的代码。