我有一個(gè)充滿行的表格，其中包含 <form> 標(biāo)簽，并且單元格內(nèi)包含 <input> 標(biāo)簽，如下面的標(biāo)記所示。<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>現(xiàn)在，每當(dāng)有人在各自的表單中輸入輸入標(biāo)簽時(shí)，我想使用純 Vanilla JavaScript Ajax 函數(shù)提交每行表單。我的 Ajax 函數(shù)很簡(jiǎn)單，每當(dāng)我們鍵入任何元素時(shí)，都會(huì)讓表單對(duì)象選擇所有表單元素值。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;}現(xiàn)在的問(wèn)題是 this.parentNode.parentNode 沒(méi)有選取 <FORM> 元素，而是直接選取 <TR> 元素。那么我怎樣才能讓它完美地工作呢？注意：我嘗試了很多其他方法，但無(wú)法使其像...this.parentElement.parentElementthis.parentNode.parentNodethis.closest(form)
1 回答
蝴蝶不菲
TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊
正如您在此處看到的，您無(wú)法將表單放置在 元素之間。解決方案是重新設(shè)計(jì)樣式以使其類似于表格。另外，使用 可以獲得更優(yōu)雅的代碼。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 關(guān)注
- 134 瀏覽
添加回答
舉報(bào)
0/150
提交
取消