JavaScript动态表格行中下拉框选定值与行ID的获取教程-js教程-PHP中文网

JavaScript动态表格行中下拉框选定值与行ID的获取教程

本教程详细介绍了如何在JavaScript中处理动态生成的HTML表格行，特别是如何获取下拉菜单（<select>）的选中值及其所在行的唯一ID，以便于将数据发送至后端控制器。内容涵盖了动态元素创建、事件绑定以及DOM遍历技巧。

引言：动态表格行中的数据交互挑战

在web开发中，我们经常需要创建可以动态添加或删除行的表格。当这些动态行中包含交互式元素，例如下拉菜单（<select>）时，如何准确地捕获用户在这些元素上的操作，并获取相关的数据（如选中值和所在行的唯一标识符），是前端开发中的一个常见挑战。本教程将提供一个简洁高效的解决方案，帮助开发者在动态表格环境中实现这一功能。

核心问题：获取动态下拉框的选中值与行ID

假设我们正在构建一个采购订单界面，用户可以动态添加多行商品。每一行都包含一个商品选择下拉框。当用户更改某个下拉框的选项时，我们需要立即获取：

用户选择的商品ID（即下拉框的选中值）。
该下拉框所在的表格行的唯一ID。

这些信息通常需要通过AJAX发送到后端控制器进行进一步处理，例如计算行总价或更新订单详情。

解决方案概述

为了解决上述问题，我们将采用以下策略：

结构化行内容： 将动态添加的表格行内容定义为一个JavaScript变量，提高代码的可读性和可维护性。
动态填充下拉菜单： 创建一个函数来生成下拉菜单的所有选项，并在行内容模板中调用。
直接事件绑定： 在动态生成的<select>元素上直接绑定onchange事件，指向一个处理函数。
DOM遍历获取数据： 在事件处理函数中，利用事件对象（this）和DOM API（如closest()）来获取选中值和父级行ID。

实现步骤与代码示例

以下是实现此功能的详细步骤和相应的代码示例。

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

1. 准备下拉菜单数据

首先，我们需要一些示例数据来填充下拉菜单。在实际应用中，这些数据通常来自后端API。

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

登录后复制

2. 定义行内容模板

我们将整个表格行的HTML结构定义在一个JavaScript变量rowContent中。注意，counter变量将用于为每个元素生成唯一的ID和name属性，而populate()函数则负责生成<select>标签内的选项。

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

// 定义每一行内容的HTML模板
var rowContent = "<td>" +
  '<label id="CountItems"><strong>' +
  // counter 将在每次添加行时更新，但在这里定义时，它会引用当前的全局 counter 值
  // 实际使用时，此处的 counter 应该在生成行时动态传入或在 appendTo 之前构建
  // 为简化，我们将在 appendTo 阶段处理
  "</strong></label>" +
  "</td>" +
  '<td width="40%">' +
  '<select onchange="sendInfo(this)" class="form-select js-dropdown" name="Item_Id[' +
  counter + // 初始值，实际生成时会被更新
  ']" id="ItemId' + counter + '" required="required"> ' +
  populate() + // 调用函数填充选项
  "</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>";

登录后复制

注意： 在上述rowContent的定义中，counter的值是定义时的全局counter值。为了确保每次添加行时counter都能正确更新到行内的元素ID和name中，我们需要在生成行时动态地构建或替换这些值。一个更健壮的方法是定义一个函数，该函数接受counter作为参数并返回完整的行HTML字符串。

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

3. 实现下拉菜单选项填充函数

这个函数负责遍历dropdownOptions数组，并生成<option>标签的HTML字符串。

// 填充 <select> 元素的选项
function populate() {
  var options = "";
  dropdownOptions.forEach(function(option) {
    options += $("<option>").val(option.Value).text(option.Text).get(0).outerHTML;
  });
  return options;
}

登录后复制

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

sendInfo函数是<select>元素的onchange事件处理器。它接收事件触发的元素作为参数e。

// 下拉菜单变更事件处理函数
function sendInfo(e) {
  // 获取选中项的name属性（如 Item_Id[1]）和value属性
  console.log("下拉菜单名称:", e.name, "选中值:", e.value);
  // 获取当前下拉菜单所在的表格行ID
  console.log("所在行ID:", e.closest("tr").id);

  // TODO: 在这里将数据 (e.value 和 e.closest("tr").id) 发送到后端控制器
  // 可以使用 fetch API 或 jQuery.ajax()
  // 例如：
  /*
  fetch('/api/updateItem', {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json',
      },
      body: JSON.stringify({
          rowId: e.closest("tr").id,
          itemId: e.value
      }),
  })
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch((error) => console.error('Error:', error));
  */
}

登录后复制

5. 动态添加表格行

使用jQuery的$(document).ready()来确保DOM加载完毕后执行代码。当点击“Add”按钮时，我们将动态生成一行并追加到表格中。

$(function() {
  $("#add").click(function() {
    // 动态构建包含当前 counter 值的行内容
    var currentRowContent = "<td>" +
      '<label id="CountItems"><strong>' + counter + "</strong></label>" +
      "</td>" +
      '<td width="40%">' +
      '<select onchange="sendInfo(this)" class="form-select js-dropdown" name="Item_Id[' + counter + ']" id="ItemId' + counter + '" required="required"> ' + populate() + "</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>";

    // 创建一行，为其分配唯一ID，并添加到表格中
    $('<tr id="tableRow' + counter + '">' + currentRowContent + "</tr>").appendTo("#submissionTable");

    counter++; // 增加计数器
    return false; // 阻止默认事件
  });
});

// 移除行的示例函数 (如果需要)
function removeTr(rowCounter) {
    $("#tableRow" + rowCounter).remove();
}

登录后复制

6. 完整的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>
    <!-- 引入Bootstrap或其他CSS框架 (如果需要样式) -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> -->
</head>
<body>

    <button type="button" id="add">添加新行</button>
    <table id="submissionTable" border="1" style="width:100%; border-collapse: collapse;">
        <thead>
            <tr>
                <th>序号</th>
                <th>商品</th>
                <th>数量</th>
                <th>备注</th>
                <th>单价</th>
                <th>总价</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 动态添加的行将在此处显示 -->
        </tbody>
    </table>

    <script>
        // ... (将上面所有的JavaScript代码放在这里) ...
        // fake values for dropdown only for testing
        var dropdownOptions = [{
            Text: "商品A",
            Value: "101"
          },
          {
            Text: "b",
            Value: "102"
          },
          {
            Text: "c",
            Value: "103"
          }
        ];

        var counter = 1;

        $(function() {
          $("#add").click(function() {
            // 动态构建包含当前 counter 值的行内容
            var currentRowContent = "<td>" +
              '<label id="CountItems"><strong>' + counter + "</strong></label>" +
              "</td>" +
              '<td width="40%">' +
              '<select onchange="sendInfo(this)" class="form-select js-dropdown" name="Item_Id[' + counter + ']" id="ItemId' + counter + '" required="required"> ' + populate() + "</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>";

            // 创建一行，为其分配唯一ID，并添加到表格中
            $('<tr id="tableRow' + counter + '">' + currentRowContent + "</tr>").appendTo("#submissionTable tbody"); // 注意这里改为 tbody

            counter++; // 增加计数器
            return false; // 阻止默认事件
          });
        });

        // 填充 <select> 元素的选项
        function populate() {
          var options = "";
          dropdownOptions.forEach(function(option) {
            options += $("<option>").val(option.Value).text(option.Text).get(0).outerHTML;
          });
          return options;
        }

        // 下拉菜单变更事件处理函数
        function sendInfo(e) {
          console.log("下拉菜单名称:", e.name, "选中值:", e.value);
          console.log("所在行ID:", e.closest("tr").id);
          // todo: send data to wherever is needed
        }

        // 移除行的示例函数 (如果需要)
        function removeTr(rowCounter) {
            $("#tableRow" + rowCounter).remove();
        }
    </script>
</body>
</html>

登录后复制

关键代码解析

counter 变量： 确保每个动态生成的HTML元素（如<tr>、<select>、<input>）都拥有唯一的id属性和name属性。这对于DOM操作和表单数据提交至关重要。
populate() 函数： 这是一个辅助函数，用于将预定义的数据转换为HTML <option> 标签字符串。这种方式使得下拉菜单的填充逻辑与行内容的构建分离，提高了代码的模块化。
sendInfo(e) 函数：
- e.name 和 e.value：当onchange事件触发时，this（即参数e）指向触发事件的<select>元素。我们可以直接访问其name和value属性来获取下拉菜单的名称和当前选中的值。
- e.closest("tr").id：closest()方法是DOM元素的一个强大功能，它从当前元素开始，向上遍历其祖先元素，直到找到与指定选择器匹配的第一个元素。在这里，它用于查找最近的<tr>祖先元素，并获取其id属性，从而确定是哪一行的数据发生了变化。

注意事项与最佳实践

ID唯一性： 始终确保动态生成的元素的id属性是唯一的。本教程通过counter变量实现了这一点。
事件委托（Event Delegation）： 尽管本教程采用了在动态元素上直接绑定onchange事件的方式，但对于大量动态元素，事件委托通常是更优的选择。通过将事件监听器绑定到表格父元素（例如#submissionTable），然后利用事件冒泡机制，可以减少内存消耗并简化事件管理。例如：
```
$("#submissionTable").on("change", "select.js-dropdown", function() {
    var selectedValue = $(this).val();
    var rowId = $(this).closest("tr").attr("id");
    console.log("通过事件委托 - 选中值:", selectedValue, "所在行ID:", rowId);
    // ... 发送数据 ...
});
```
登录后复制
这种方式的好处是，无论何时添加新的下拉菜单，它们都会自动继承父元素的事件监听器，无需在每次添加新行时重新绑定。
数据发送到后端： sendInfo函数中的console.log只是演示了如何获取数据。在实际应用中，您需要使用AJAX（如fetch API或jQuery.ajax）将rowId和selectedValue发送到后端控制器。
HTML结构语义化： 建议将动态行添加到<tbody>标签内，而不是直接添加到<table>标签下，以保持HTML的语义化和更好的结构。

总结

通过本教程，您学会了如何在JavaScript中高效地处理动态生成的表格行，特别是如何捕获下拉菜单的变更事件，并准确获取选中值及其所在行的唯一ID。我们通过结构化的代码、直接事件绑定和closest()等DOM API，提供了一个清晰且可扩展的解决方案。掌握这些技巧将有助于您构建更具交互性和响应性的Web应用程序。

以上就是JavaScript动态表格行中下拉框选定值与行ID的获取教程的详细内容，更多请关注php中文网其它相关文章！