使用 jQuery 动态创建 HTML 行时实现自动填充-js教程-PHP中文网

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

心靈之曲

发布： 2025-08-31 21:32:01

原创

872人浏览过

使用 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() 函数，以便在该函数内部能够正确地定位到当前行中的输入字段。

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

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

代码示例

以下是修改后的 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> 元素，即当前表格行。