在每个 中使用 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 函数很简单，每当我们键入任何元素时，都会让表单对象选择所有表单元素值。

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

正如您在此处看到的，您无法将表单放置在 元素之间。解决方案是重新设计样式以使其类似于表格。另外，使用 可以获得更优雅的代码。traddEventListenerdocument.body.addEventListener("keyup", function(ev) {&nbsp; if (ev.target.tagName == "INPUT") {&nbsp; &nbsp; console.log(ev.target.closest("form").id);&nbsp; }});div { display: inline-block; width: 100px; }input {width: 95px; }<div>Firstname</div><div>Lastname</div><div>Age</div><form id="first">&nbsp; <div><input type="text" name="Firstname" /></div>&nbsp; <div><input type="text" name="Lastname" /></div>&nbsp; <div><input type="number" name="Age" /></div></form><form id="second">&nbsp; <div><input type="text" name="Firstname" /></div>&nbsp; <div><input type="text" name="Lastname" /></div>&nbsp; <div><input type="number" name="Age" /></div></form>