使用 jQuery 动态创建 HTML 行时实现自动填充

本文旨在解决在使用 JavaScript 动态创建 HTML 表格行后，如何利用 jQuery 实现输入框自动填充的问题。文章将详细介绍如何修改现有的 JavaScript 代码，使其能够正确地定位到动态创建的行中的输入字段，并使用类选择器代替 ID 选择器，避免 ID 重复问题。同时，提供修改后的代码示例，以帮助读者更好地理解和应用。

动态创建 HTML 元素是 Web 开发中常见的需求，尤其是在处理表格数据时。然而，在动态创建的元素上应用 jQuery 功能时，可能会遇到一些问题，例如无法正确地选择到目标元素。本教程将针对动态创建的表格行，讲解如何使用 jQuery 实现输入框的自动填充功能。

关键问题：ID 的唯一性与动态元素的选择

在使用 jQuery 操作 HTML 元素时，经常会使用 ID 选择器。但是，ID 在 HTML 文档中必须是唯一的。如果在动态创建的行中使用相同的 ID，会导致 ID 冲突，使得 jQuery 无法正确地选择到目标元素。

解决方案：使用类选择器和传递上下文

为了解决 ID 冲突的问题，应该使用类选择器（class selector）代替 ID 选择器。同时，需要将当前行（row）作为参数传递给 GetDetail() 函数，以便在该函数内部能够正确地定位到当前行中的输入字段。

立即学习“前端免费学习笔记（深入）”；

代码示例

以下是修改后的 JavaScript 代码：

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();
}
}

在 HTML 中，将 ID 替换为 class，并将当前行传递给 GetDetail() 函数：

<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>

代码解释：

• GetDetail(row) 函数： 该函数接收一个 row 参数，代表当前表格行。
• row.querySelector(“.className”)： 使用 querySelector() 方法在当前行中查找具有指定 class 的元素。
• this.closest(‘tr’)： 在 onkeyup 事件中，this 指向触发事件的输入框。closest(‘tr’) 方法用于查找最近的父级 zuojiankuohaophpcntr> 元素，即当前表格行。

注意事项

• 确保在动态创建 HTML 元素后，再绑定事件处理程序。
• 使用类选择器代替 ID 选择器，避免 ID 冲突。
• 仔细检查代码中的选择器，确保它们能够正确地定位到目标元素。
• 在进行 AJAX 请求时，注意处理错误情况，例如网络连接错误或服务器返回错误。

总结

通过使用类选择器和传递上下文，可以有效地解决在使用 jQuery 操作动态创建的 HTML 元素时遇到的问题。本教程提供了一个具体的示例，展示了如何使用 jQuery 实现动态创建的表格行中输入框的自动填充功能。希望本教程能够帮助读者更好地理解和应用 jQuery。