本文档旨在解决在使用 JavaScript 动态创建 HTML 表格行后，如何使用 jQuery 自动填充这些行中的输入字段的问题。我们将探讨如何修改现有的 JavaScript 代码，以便正确地将当前行作为参数传递给填充函数，并使用类选择器来定位动态创建的输入字段，确保代码的健壮性和可维护性。
动态 HTML 行的自动填充
在使用 JavaScript 动态生成 HTML 表格行时，经常需要根据用户的输入或其他事件自动填充行中的其他输入字段。直接使用 ID 选择器可能会导致问题，因为 ID 在 HTML 文档中必须是唯一的。因此，使用类选择器和将当前行作为参数传递给处理函数是一种更有效的方法。
1. 修改 JavaScript 函数
首先，需要修改 GetDetail() 函数，使其能够接收当前行作为参数。这样，函数就可以在该行的上下文中查找输入字段，并更新它们的值。
function GetDetail(row) {
let str = row.querySelector(".scode").value;
if (str.length == 0) {
row.querySelector(".servproname").value = "";
row.querySelector(".qty").value = "";
return;
} else {
// Creates a new XMLHttpRequest object
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
// Defines a function to be called when
// the readyState property changes
if (this.readyState == 4 &&
this.status == 200) {
// Typical action to be performed
// when the document is ready
var myObj = JSON.parse(this.responseText);
// Returns the response data as a
// string and store this array in
// a variable assign the value
// received to first name input field
row.querySelector(".servproname").value = myObj[0];
row.querySelector(".qty").value = myObj[1];
}
};
// xhttp.open("GET", "filename", true);
xmlhttp.open("GET", "gfg.php?user_id=" + str, true);
// Sends the request to the server
xmlhttp.send();
}
}在这个修改后的函数中，row 参数代表当前 HTML 行。我们使用 row.querySelector() 方法来查找该行中的具有特定类的输入字段，例如 .scode、.servproname 和 .qty。
立即学习“前端免费学习笔记（深入）”；
2. 修改 HTML 代码
接下来，需要修改 HTML 代码，以便将当前行作为参数传递给 GetDetail() 函数。此外，还需要将 ID 选择器替换为类选择器。
<table>
<tr>
<td><input type="text" class="scode form-control text-end" name="scode[]" onkeyup="GetDetail(this.closest('tr'))" value=""></td>
<td><input type="text" class="servproname form-control text-end" name="servproname[]"></td>
<td><input type="text" class="qty form-control text-end" name="qty[]" onchange="Calc(this);"></td>
</tr>
</table>在这个修改后的 HTML 代码中，我们：
- 使用 this.closest('tr') 来获取当前输入字段所在的最近的
元素，并将其作为参数传递给 GetDetail() 函数。 - 使用类选择器（例如 class="scode"）代替 ID 选择器（例如 id="aaa"）。
3. 总结和注意事项
- ID 唯一性： 确保在 HTML 文档中使用唯一的 ID。对于动态创建的元素，应优先使用类选择器。
- 参数传递： 将当前行作为参数传递给处理函数，可以确保函数在正确的上下文中操作。
- 错误处理： 在实际应用中，应添加适当的错误处理机制，例如检查 xmlhttp.readyState 和 xmlhttp.status 的值，以及处理 JSON 解析错误。
- 安全性： 注意对用户输入进行适当的验证和转义，以防止跨站脚本攻击 (XSS)。
通过以上步骤，可以有效地解决在使用 jQuery 动态创建 HTML 行时自动填充输入字段的问题。这种方法不仅适用于简单的表格，还可以扩展到更复杂的动态表单和用户界面。
