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

JavaScript动态表格行中获取选中下拉框ID及对应行ID的教程

本教程详细阐述了如何在JavaScript中高效获取动态添加的表格行中，下拉选择框（select）的选中值及其所属行（tr）的唯一ID。通过使用onchange事件监听、this关键字引用当前元素，并结合closest()方法向上查找父级行ID，本文提供了一套清晰且可复用的解决方案，确保在复杂动态表格场景下数据交互的准确性与便捷性。

在现代web应用开发中，动态生成表格行并对其内部的交互元素（如下拉选择框）进行数据监听和处理是一个常见的需求。例如，在一个采购订单界面中，用户可能需要动态添加多行商品，并在每一行中选择商品。当某个商品的下拉选择框值发生变化时，我们通常需要获取该选择框的选中值以及它所属的表格行的唯一标识，以便将这些信息发送到后端控制器进行进一步处理。

动态表格行的构建与下拉框初始化

首先，我们需要一个机制来动态地向HTML表格中添加新的行。为了确保每行及其内部元素的唯一性，通常会使用一个计数器来生成动态ID。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

登录后复制

在JavaScript中，我们可以定义一个函数来生成包含所有列内容的HTML字符串，这样可以提高代码的可读性和维护性。同时，为了填充下拉选择框，可以预先定义一个选项数据源，并编写一个辅助函数来生成这些选项的HTML。

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

var counter = 1; // 行计数器，用于生成唯一ID

// 辅助函数：生成下拉框选项的HTML
function populateDropdownOptions() {
  var optionsHtml = "";
  dropdownOptions.forEach(function(option) {
    optionsHtml += '<option value="' + option.Value + '">' + option.Text + '</option>';
  });
  return optionsHtml;
}

// 每行内容的模板字符串，包含动态ID和事件监听
var rowContentTemplate = function(currentCounter) {
  return "<td>" +
    '<label id="CountItems_' + currentCounter + '"><strong>' +
    currentCounter +
    "</strong></label>" +
    "</td>" +
    '<td width="40%">' +
    '<select onchange="sendInfo(this)" class="form-select js-dropdown" name="Item_Id[' +
    currentCounter +
    ']" id="ItemId_' + currentCounter + '" required="required"> ' + populateDropdownOptions() +
    "</select>" +
    "</td>" +
    '<td width="10%">' +
    '<input type="text" class="form-control" name="Qty[' +
    currentCounter +
    ']" value="1" id="Qty_' + currentCounter + '" required="required" />' +
    "</td>" +
    '<td width="10%">' +
    '<input type="text" class="form-control" name="AcidStables[' +
    currentCounter +
    ']" value="" required="required" />' +
    "</td>" +
    '<td width="20%">' +
    '<input type="text" class="form-control" name="Unit_Price[' +
    currentCounter +
    ']" value="0.00" id="UnitPrice_' + currentCounter + '"  required="required" />' +
    "</td>" +
    '<td width="20%">' +
    '<input type="text" class="form-control" name="Line_Total[' +
    currentCounter +
    ']" value="0.00" id="LineTotal_' + currentCounter + '" required="required" />' +
    "</td>" +
    "<td>" +
    '<button type="button" class="btn btn-danger" onclick="removeTr(' +
    currentCounter +
    ');">x</button>' +
    "</td>";
};

$(function() {
  $("#add").click(function() {
    // 使用模板生成当前行的内容
    var currentRowHtml = rowContentTemplate(counter);
    // 创建新行，赋予唯一ID，并追加到表格
    $('<tr id="tableRow_' + counter + '">' + currentRowHtml + "</tr>").appendTo("#submissionTable tbody");

    counter++; // 递增计数器
    return false; // 阻止默认行为
  });
});

// 模拟删除行的函数
function removeTr(rowId) {
    console.log("移除行ID:", rowId);
    $("#tableRow_" + rowId).remove();
}

登录后复制

在上述代码中，我们做了以下改进：

将下拉框的选项数据独立出来，并创建了 populateDropdownOptions() 函数来生成选项HTML，提高了复用性。
将每行的HTML内容定义为一个函数 rowContentTemplate(currentCounter)，它接受当前的计数器作为参数，以便正确地生成包含唯一ID的元素。
在 <select> 元素中直接添加了 onchange="sendInfo(this)" 事件监听器。

获取选中值及对应行ID

核心问题是如何在 select 元素的值发生变化时，获取其选中值以及它所属的 <tr> 元素的ID。这可以通过 onchange 事件和JavaScript的DOM操作方法实现。

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

行者AI

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

100

查看详情

当 select 元素的 onchange 事件被触发时，我们调用 sendInfo(this) 函数。这里的 this 关键字非常关键，它指向了触发事件的那个 select 元素本身。

在 sendInfo 函数中，我们可以利用 this（在函数参数中通常命名为 e 或 element）：

获取选中值： e.value 直接获取 select 元素的当前选中值。
获取 select 元素的 name 属性： e.name 可以获取 select 元素的 name 属性，这在提交表单数据时非常有用。
获取所属行ID： e.closest("tr").id 是获取父级行ID的关键。closest("tr") 方法会向上遍历DOM树，查找最近的 <tr> 祖先元素，然后我们就可以通过 .id 属性获取其ID。

// 当下拉框值改变时触发的函数
function sendInfo(e) {
  // e 指代触发事件的 <select> 元素
  var selectedValue = e.value; // 获取选中值
  var selectName = e.name; // 获取 <select> 元素的name属性

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

  console.log("选中值 (Value):", selectedValue);
  console.log("下拉框名称 (Name):", selectName);
  console.log("所属行ID (Row ID):", rowId);

  // todo: 在此处将数据发送到后端控制器
  // 例如，使用 jQuery.ajax 或 fetch API
  // $.ajax({
  //     url: '/your-controller/action',
  //     type: 'POST',
  //     data: {
  //         rowId: rowId,
  //         itemId: selectedValue
  //     },
  //     success: function(response) {
  //         console.log('数据发送成功', response);
  //     },
  //     error: function(error) {
  //         console.error('数据发送失败', error);
  //     }
  // });
}

登录后复制

完整示例代码

以下是整合了所有功能的完整代码示例，包括HTML结构和JavaScript逻辑：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态表格行选中值获取</title>
    <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-select, .form-control {
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
        }
        .btn-danger {
            background-color: #dc3545;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <button type="button" id="add">添加行</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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        // 模拟下拉框选项数据
        var dropdownOptions = [{
            Text: "商品A",
            Value: "101"
          },
          {
            Text: "b",
            Value: "102"
          },
          {
            Text: "c",
            Value: "103"
          }
        ];

        var counter = 1; // 行计数器，用于生成唯一ID

        // 辅助函数：生成下拉框选项的HTML
        function populateDropdownOptions() {
          var optionsHtml = "";
          dropdownOptions.forEach(function(option) {
            optionsHtml += '<option value="' + option.Value + '">' + option.Text + '</option>';
          });
          return optionsHtml;
        }

        // 每行内容的模板字符串，包含动态ID和事件监听
        var rowContentTemplate = function(currentCounter) {
          return "<td>" +
            '<label id="CountItems_' + currentCounter + '"><strong>' +
            currentCounter +
            "</strong></label>" +
            "</td>" +
            '<td width="40%">' +
            '<select onchange="sendInfo(this)" class="form-select js-dropdown" name="Item_Id[' +
            currentCounter +
            ']" id="ItemId_' + currentCounter + '" required="required"> ' + populateDropdownOptions() +
            "</select>" +
            "</td>" +
            '<td width="10%">' +
            '<input type="text" class="form-control" name="Qty[' +
            currentCounter +
            ']" value="1" id="Qty_' + currentCounter + '" required="required" />' +
            "</td>" +
            '<td width="10%">' +
            '<input type="text" class="form-control" name="AcidStables[' +
            currentCounter +
            ']" value="" required="required" />' +
            "</td>" +
            '<td width="20%">' +
            '<input type="text" class="form-control" name="Unit_Price[' +
            currentCounter +
            ']" value="0.00" id="UnitPrice_' + currentCounter + '"  required="required" />' +
            "</td>" +
            '<td width="20%">' +
            '<input type="text" class="form-control" name="Line_Total[' +
            currentCounter +
            ']" value="0.00" id="LineTotal_' + currentCounter + '" required="required" />' +
            "</td>" +
            "<td>" +
            '<button type="button" class="btn btn-danger" onclick="removeTr(' +
            currentCounter +
            ');">x</button>' +
            "</td>";
        };

        $(function() {
          $("#add").click(function() {
            // 使用模板生成当前行的内容
            var currentRowHtml = rowContentTemplate(counter);
            // 创建新行，赋予唯一ID，并追加到表格
            $('<tr id="tableRow_' + counter + '">' + currentRowHtml + "</tr>").appendTo("#submissionTable tbody");

            counter++; // 递增计数器
            return false; // 阻止默认行为
          });
        });

        // 模拟删除行的函数
        function removeTr(rowId) {
            console.log("移除行ID:", rowId);
            $("#tableRow_" + rowId).remove();
        }

        // 当下拉框值改变时触发的函数
        function sendInfo(e) {
          // e 指代触发事件的 <select> 元素
          var selectedValue = e.value; // 获取选中值
          var selectName = e.name; // 获取 <select> 元素的name属性

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

          console.log("选中值 (Value):", selectedValue);
          console.log("下拉框名称 (Name):", selectName);
          console.log("所属行ID (Row ID):", rowId);

          // todo: 在此处将数据发送到后端控制器
          // 例如，使用 jQuery.ajax 或 fetch API
        }
    </script>
</body>
</html>

登录后复制

注意事项与总结

唯一ID的重要性： 在动态生成HTML元素时，为每个可交互的元素（如 <tr>, <select>, <input>) 分配唯一的ID至关重要。这不仅有助于JavaScript精确地定位和操作元素，也避免了ID冲突导致的意外行为。本教程通过 counter 变量和字符串拼接实现了这一点。
onchange 事件： 对于 select 元素，onchange 事件是监听其值变化的最佳方式。直接在HTML中绑定 onchange="functionName(this)" 是一种简洁有效的方法，尤其适用于动态生成的元素。
this 关键字： 在事件处理函数中，this 关键字指向触发该事件的DOM元素。利用这一点，我们可以直接访问该元素的属性（如 value, name）。
closest() 方法： Element.closest() 方法是一个非常实用的DOM遍历方法。它从当前元素开始，沿着DOM树向上查找，返回与指定选择器匹配的最近的祖先元素。这比使用 parentNode 多次查找更加高效和健壮。
代码可读性与维护： 将重复的HTML结构（如行内容）封装成变量或函数，可以显著提高代码的可读性和未来的维护性。

通过遵循本教程中介绍的方法，您将能够高效且准确地在动态生成的表格行中获取下拉选择框的选中值及其所属行的唯一ID，从而为您的Web应用程序实现更强大的交互功能。

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