在每个 中使用 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.parentElementthis.parentNode.parentNodethis.closest(form)

Answer 1

正如您在此处看到的，您无法将表单放置在 元素之间。解决方案是重新设计样式以使其类似于表格。另外，使用 可以获得更优雅的代码。traddEventListener

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>