动态生成表格行中下拉菜单选中值及对应行ID的JavaScript获取教程-js教程-PHP中文网

动态生成表格行中下拉菜单选中值及对应行ID的JavaScript获取教程

本教程详细讲解如何在Web应用中动态添加表格行，并为每行中的下拉菜单（<select>）绑定事件。当下拉菜单值发生变化时，通过JavaScript高效地获取当前选中值及其所属表格行的唯一ID，以便于将数据发送至后端控制器进行处理。教程将涵盖HTML结构、JavaScript动态生成元素、事件处理及关键数据获取方法，旨在提供一个清晰、专业的实现指南。

在现代web应用开发中，动态地向表格添加数据行是常见的需求，尤其是在创建订单、清单等场景。随之而来的挑战是如何在这些动态生成的行中，准确地捕获用户交互（例如下拉菜单的选择变更），并获取到关联的数据，如选中的值以及该行本身的唯一标识符，以便将这些信息传递给后端服务进行进一步处理。本文将提供一个基于jquery和原生javascript的解决方案，详细阐述如何实现这一功能。

核心问题与解决方案概述

我们的核心目标是：

动态地向HTML表格添加新的数据行。
每行包含一个下拉菜单（<select>），其选项也是动态填充的。
当用户更改任何一个动态生成的下拉菜单的选项时，能够获取到：
- 该下拉菜单当前选中的值。
- 该下拉菜单所属表格行的唯一ID。

解决方案的关键在于：为每个动态生成的下拉菜单分配一个onchange事件处理器，并在该处理器中利用this关键字和DOM遍历方法（如closest()）来获取所需信息。

基础HTML结构

首先，我们需要一个包含一个按钮和一个空表格的HTML骨架。按钮用于触发添加新行的操作，表格则是动态内容的容器。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态表格行与下拉菜单事件处理</title>
    <!-- 引入 jQuery 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .form-control, .form-select {
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
        }
        .btn {
            padding: 5px 10px;
            cursor: pointer;
        }
        .btn-danger {
            background-color: #dc3545;
            color: white;
            border: none;
        }
    </style>
</head>
<body>

    <button type="button" id="add" class="btn">添加新行</button>

    <table id="submissionTable">
        <thead>
            <tr>
                <th>序号</th>
                <th>项目</th>
                <th>数量</th>
                <th>库存</th>
                <th>单价</th>
                <th>总计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 动态添加的行将在此处 -->
        </tbody>
    </table>

</body>
</html>

登录后复制

JavaScript 实现逻辑

接下来，我们将编写JavaScript代码来实现动态行的添加和事件处理。

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

1. 数据准备

首先，定义一些模拟数据，用于填充下拉菜单选项。

// 模拟下拉菜单选项数据
var dropdownOptions = [{
    Text: "商品 A",
    Value: "101"
  },
  {
    Text: "商品 B",
    Value: "102"
  },
  {
    Text: "商品 C",
    Value: "103"
  }
];

登录后复制

2. 动态生成下拉菜单选项

为了方便在生成行时填充下拉菜单，我们创建一个函数来将dropdownOptions转换为HTML <option> 标签字符串。

Boomy

AI音乐生成工具，创建生成音乐,与世界分享.

272

查看详情

/**
 * 生成下拉菜单的HTML选项字符串
 * @returns {string} 包含所有选项的HTML字符串
 */
function populateDropdownOptions() {
  var optionsHtml = "";
  dropdownOptions.forEach(function(option) {
    // 使用 jQuery 创建 option 元素并获取其 outerHTML
    optionsHtml += $("<option>").val(option.Value).text(option.Text).get(0).outerHTML;
  });
  return optionsHtml;
}

登录后复制

3. 动态添加表格行

使用jQuery的$(document).ready()或$(function(){...})确保DOM加载完成后执行代码。当“添加新行”按钮被点击时，我们将构建一个新的表格行HTML字符串，并将其追加到表格中。关键在于确保每行及其内部元素的ID和name属性都是唯一的，并且为下拉菜单绑定onchange事件。

var counter = 1; // 用于生成唯一ID和名称的计数器

$(function() {
  $("#add").click(function() {
    // 构建当前行的HTML字符串
    // 注意：这里的 counter 必须在每次点击时动态使用，以确保唯一性
    var currentRowHtml = '<tr id="tableRow' + counter + '">' +
      "<td>" +
      '<label id="CountItems' + counter + '"><strong>' +
      counter +
      "</strong></label>" +
      "</td>" +
      '<td width="40%">' +
      // 为 select 元素添加 onchange 事件处理器，并传入 this
      '<select onchange="handleSelectChange(this)" class="form-select js-dropdown" name="Item_Id[' +
      counter +
      ']" id="ItemId' + counter + '" required="required"> ' + populateDropdownOptions() +
      "</select>" +
      "</td>" +
      '<td width="10%">' +
      '<input type="text" class="form-control" name="Qty[' +
      counter +
      ']" value="1" id="Qty' + counter + '" required="required" />' +
      "</td>" +
      '<td width="10%">' +
      '<input type="text" class="form-control" name="AcidStables[' +
      counter +
      ']" value="" required="required" />' +
      "</td>" +
      '<td width="20%">' +
      '<input type="text" class="form-control" name="Unit_Price[' +
      counter +
      ']" value="0.00" id="UnitPrice' + counter + '"  required="required" />' +
      "</td>" +
      '<td width="20%">' +
      '<input type="text" class="form-control" name="Line_Total[' +
      counter +
      ']" value="0.00" id="LineTotal' + counter + '" required="required" />' +
      "</td>" +
      "<td>" +
      '<button type="button" class="btn btn-danger" onclick="removeTr(' +
      counter +
      ');">x</button>' +
      "</td>" +
      "</tr>";

    // 将新行追加到表格的 tbody 中
    $("#submissionTable tbody").append(currentRowHtml);
    counter++; // 计数器递增
    return false; // 阻止默认事件（如果按钮在表单内）
  });
});

登录后复制

注意： 在原始问题中，rowContent被定义为全局变量，其内部的counter值在脚本加载时即被固定，导致所有动态添加的行都使用相同的counter值。正确的做法是，在每次添加新行时，根据当前的counter值动态构建行内容的HTML字符串，如上述代码所示。

4. 处理下拉菜单变更事件

当下拉菜单的值发生变化时，handleSelectChange函数会被调用。该函数接收触发事件的<select>元素作为参数（即this）。

/**
 * 处理下拉菜单值变更事件
 * @param {HTMLSelectElement} selectElement 触发事件的 <select> 元素
 */
function handleSelectChange(selectElement) {
  // 获取选中值
  var selectedValue = selectElement.value;
  // 获取 <select> 元素的 name 属性
  var selectName = selectElement.name;

  // 使用 closest() 方法向上查找最近的 <tr> 祖先元素，并获取其 ID
  var rowId = selectElement.closest("tr").id;

  console.log("下拉菜单名称:", selectName);
  console.log("选中值:", selectedValue);
  console.log("所属行ID:", rowId);

  // TODO: 在这里可以将 selectedValue 和 rowId 发送到后端控制器
  // 例如，使用 jQuery.ajax() 或 fetch API
  /*
  $.ajax({
      url: '/your-controller-endpoint',
      method: 'POST',
      data: {
          rowId: rowId,
          itemId: selectedValue
      },
      success: function(response) {
          console.log('数据发送成功', response);
      },
      error: function(error) {
          console.error('数据发送失败', error);
      }
  });
  */
}

/**
 * 移除表格行
 * @param {number} rowCounter 要移除的行的计数器值
 */
function removeTr(rowCounter) {
    // 移除具有特定 ID 的行
    $("#tableRow" + rowCounter).remove();
    console.log("移除行: tableRow" + rowCounter);
    // 注意：如果移除行后需要重新排序序号，需要额外的逻辑
}

登录后复制

完整示例代码

将上述所有JavaScript代码整合到HTML文件中，即可形成一个完整的、可运行的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态表格行与下拉菜单事件处理</title>
    <!-- 引入 jQuery 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .form-control, .form-select {
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
        }
        .btn {
            padding: 5px 10px;
            cursor: pointer;
        }
        .btn-danger {
            background-color: #dc3545;
            color: white;
            border: none;
        }
    </style>
</head>
<body>

    <button type="button" id="add" class="btn">添加新行</button>

    <table id="submissionTable">
        <thead>
            <tr>
                <th>序号</th>
                <th>项目</th>
                <th>数量</th>
                <th>库存</th>
                <th>单价</th>
                <th>总计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 动态添加的行将在此处 -->
        </tbody>
    </table>

    <script>
        // 模拟下拉菜单选项数据
        var dropdownOptions = [{
            Text: "商品 A",
            Value: "101"
          },
          {
            Text: "商品 B",
            Value: "102"
          },
          {
            Text: "商品 C",
            Value: "103"
          }
        ];

        var counter = 1; // 用于生成唯一ID和名称的计数器

        $(function() {
          $("#add").click(function() {
            // 构建当前行的HTML字符串
            var currentRowHtml = '<tr id="tableRow' + counter + '">' +
              "<td>" +
              '<label id="CountItems' + counter + '"><strong>' +
              counter +
              "</strong></label>" +
              "</td>" +
              '<td width="40%">' +
              // 为 select 元素添加 onchange 事件处理器，并传入 this
              '<select onchange="handleSelectChange(this)" class="form-select js-dropdown" name="Item_Id[' +
              counter +
              ']" id="ItemId' + counter + '" required="required"> ' + populateDropdownOptions() +
              "</select>" +
              "</td>" +
              '<td width="10%">' +
              '<input type="text" class="form-control" name="Qty[' +
              counter +
              ']" value="1" id="Qty' + counter + '" required="required" />' +
              "</td>" +
              '<td width="10%">' +
              '<input type="text" class="form-control" name="AcidStables[' +
              counter +
              ']" value="" required="required" />' +
              "</td>" +
              '<td width="20%">' +
              '<input type="text" class="form-control" name="Unit_Price[' +
              counter +
              ']" value="0.00" id="UnitPrice' + counter + '"  required="required" />' +
              "</td>" +
              '<td width="20%">' +
              '<input type="text" class="form-control" name="Line_Total[' +
              counter +
              ']" value="0.00" id="LineTotal' + counter + '" required="required" />' +
              "</td>" +
              "<td>" +
              '<button type="button" class="btn btn-danger" onclick="removeTr(' +
              counter +
              ');">x</button>' +
              "</td>" +
              "</tr>";

            // 将新行追加到表格的 tbody 中
            $("#submissionTable tbody").append(currentRowHtml);
            counter++; // 计数器递增
            return false; // 阻止默认事件（如果按钮在表单内）
          });
        });

        /**
         * 生成下拉菜单的HTML选项字符串
         * @returns {string} 包含所有选项的HTML字符串
         */
        function populateDropdownOptions() {
          var optionsHtml = "";
          dropdownOptions.forEach(function(option) {
            // 使用 jQuery 创建 option 元素并获取其 outerHTML
            optionsHtml += $("<option>").val(option.Value).text(option.Text).get(0).outerHTML;
          });
          return optionsHtml;
        }

        /**
         * 处理下拉菜单值变更事件
         * @param {HTMLSelectElement} selectElement 触发事件的 <select> 元素
         */
        function handleSelectChange(selectElement) {
          // 获取选中值
          var selectedValue = selectElement.value;
          // 获取 <select> 元素的 name 属性
          var selectName = selectElement.name;

          // 使用 closest() 方法向上查找最近的 <tr> 祖先元素，并获取其 ID
          var rowId = selectElement.closest("tr").id;

          console.log("下拉菜单名称:", selectName);
          console.log("选中值:", selectedValue);
          console.log("所属行ID:", rowId);

          // TODO: 在这里可以将 selectedValue 和 rowId 发送到后端控制器
          // 例如，使用 jQuery.ajax() 或 fetch API
          /*
          $.ajax({
              url: '/your-controller-endpoint',
              method: 'POST',
              data: {
                  rowId: rowId,
                  itemId: selectedValue
              },
              success: function(response) {
                  console.log('数据发送成功', response);
              },
              error: function(error) {
                  console.error('数据发送失败', error);
              }
          });
          */
        }

        /**
         * 移除表格行
         * @param {number} rowCounter 要移除的行的计数器值
         */
        function removeTr(rowCounter) {
            // 移除具有特定 ID 的行
            $("#tableRow" + rowCounter).remove();
            console.log("移除行: tableRow" + rowCounter);
            // 注意：如果移除行后需要重新排序序号，需要额外的逻辑
        }
    </script>

</body>
</html>

登录后复制

注意事项与最佳实践

唯一ID和Name： 确保动态生成的HTML元素的id和name属性是唯一的。这对于JavaScript操作DOM和后端接收表单数据至关重要。本教程使用counter变量来保证唯一性。

onchange与事件委托： 本教程采用了直接在HTML元素上使用onchange属性的方式来绑定事件。对于动态生成的元素，这种方式简单直接且有效。然而，在大型应用中，更推荐使用事件委托（Event Delegation）。例如，可以这样实现：

// 在文档加载完成后，为 #submissionTable 元素绑定一个事件监听器
// 监听所有 .js-dropdown 类的 select 元素的 change 事件
$(document).on('change', '.js-dropdown', function() {
    var selectedValue = $(this).val(); // 获取选中值
    var selectName = $(this).attr('name'); // 获取 name 属性
    var rowId = $(this).closest('tr').attr('id'); // 获取行ID
    console.log("事件委托 - 下拉菜单名称:", selectName);
    console.log("事件委托 - 选中值:", selectedValue);
    console.log("事件委托 - 所属行ID:", rowId);
    // ... 发送数据
});

登录后复制

事件委托的优点是只需要绑定一个事件监听器到父元素（如document或表格本身），就能处理所有子元素的事件，即使这些子元素是后来动态添加的。这减少了内存占用，并且无需在每次添加新行时重新绑定事件。

代码可读性： 将行内容的HTML字符串分割成更小的部分，或者使用模板字面量（Template Literals）可以提高代码的可读性和维护性。
数据发送： handleSelectChange函数中的TODO部分是发送数据到后端控制器的地方。通常会使用AJAX（Asynchronous JavaScript and XML）技术，如jQuery的$.ajax()或原生的fetch API，将rowId和selectedValue作为请求体发送。
移除行后的计数器问题： removeTr函数只移除了对应的行。如果业务需求是移除行后，后续行的序号需要重新排序，那么在removeTr函数中需要额外添加遍历并更新序号的逻辑。

总结

通过本教程，您应该已经掌握了如何在动态生成的表格行中，为下拉菜单绑定事件，并在事件触发时准确获取到选中值及其所属行的唯一ID。无论是采用直接的onchange属性还是更高级的事件委托模式，理解this关键字、DOM遍历方法（如closest()）以及如何管理动态元素的唯一标识符是实现这一功能的关键。这些技术在构建交互式和数据驱动的Web界面时非常实用。

以上就是动态生成表格行中下拉菜单选中值及对应行ID的JavaScript获取教程的详细内容，更多请关注php中文网其它相关文章！