我有一個充滿行的表格，其中包含 <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)
1 回答
蝴蝶不菲
TA貢獻1810條經驗 獲得超4個贊
正如您在此處看到的，您無法將表單放置在 元素之間。解決方案是重新設計樣式以使其類似于表格。另外，使用 可以獲得更優雅的代碼。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>
- 1 回答
- 0 關注
- 139 瀏覽
添加回答
舉報
0/150
提交
取消