获取动态生成字符串：JavaScript 中获取特定行数据的正确方法-js教程-PHP中文网

获取动态生成字符串：JavaScript 中获取特定行数据的正确方法

聖光之護

发布： 2025-08-14 17:46:28

原创

610人浏览过

获取动态生成字符串：javascript 中获取特定行数据的正确方法

本文旨在帮助开发者解决在动态生成的表格行中，通过点击按钮获取特定行数据时遇到的 recid 获取错误问题。我们将深入探讨如何利用 JavaScript 和 jQuery 准确地定位并提取所需数据，并强调使用 class 代替重复 id 的重要性，以确保代码的健壮性和可维护性。

在动态生成的表格中，如果每个 <tr> 元素内部都有一个 <td> 元素使用相同的 id（例如 recid），那么使用 $('#recid').text() 获取到的永远是第一个匹配的元素的值。这是因为 id 在 HTML 文档中必须是唯一的。为了解决这个问题，我们需要使用更精确的方法来定位目标 <td> 元素。

1. 使用 class 代替重复的 id

首先，将 <td> 元素的 id="recid" 更改为 class="recid"。这样可以避免 id 重复的问题，并允许我们使用 jQuery 选择器更准确地定位元素。

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

<tr class="ordertr table-bordered">
<td class="recid d-none"><?=$row['RecId']?></td>
<td class="ps-lg-3">
<ul>
<li><button id="editingST">&#9998;</button></li>
<li><button class="towork">?</button></li>
</ul>
</td>
</tr>

登录后复制

2. 精确定位目标元素

在 JavaScript 中，我们需要修改事件处理函数，以便能够找到与触发事件的按钮相关联的 <tr> 元素，并从中提取 recid 的值。

以下是修改后的 JavaScript 代码：

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

$("#position-order tbody").on('click', '.towork', function gotowork(e){
    const recid = $(e.target).closest('tr').find('.recid').text();
    $.ajax({
        type: "POST",
        url: '/towork.php',
        data: {recid: recid}
    });
    return false;
});

登录后复制

代码解释：

e.target: e.target 指的是触发事件的 DOM 元素，这里是点击的按钮。
$(e.target).closest('tr'): closest('tr') 方法从触发事件的元素开始，向上查找最近的 <tr> 父元素。
.find('.recid'): find('.recid') 方法在找到的 <tr> 元素内部查找 class 为 recid 的元素。
.text(): text() 方法获取找到的 <td> 元素的文本内容，即 recid 的值。

3. 完整示例

将以上 HTML 和 JavaScript 代码整合在一起，形成一个完整的示例：

<!DOCTYPE html>
<html>
<head>
    <title>动态表格数据获取</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .d-none {
            display: none;
        }
    </style>
</head>
<body>
    <table id="position-order">
        <tbody>
            <tr class="ordertr table-bordered">
                <td class="recid d-none">123</td>
                <td class="ps-lg-3">
                    <ul>
                        <li><button id="editingST">&#9998;</button></li>
                        <li><button class="towork">?</button></li>
                    </ul>
                </td>
            </tr>
            <tr class="ordertr table-bordered">
                <td class="recid d-none">456</td>
                <td class="ps-lg-3">
                    <ul>
                        <li><button id="editingST">&#9998;</button></li>
                        <li><button class="towork">?</button></li>
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>

    <script>
        $("#position-order tbody").on('click', '.towork', function gotowork(e){
            const recid = $(e.target).closest('tr').find('.recid').text();
            console.log("recid: " + recid); // 调试输出
            // $.ajax({
            //     type: "POST",
            //     url: '/towork.php',
            //     data: {recid: recid}
            // });
            return false;
        });
    </script>
</body>
</html>

登录后复制

注意事项：

确保 jQuery 库已正确引入。
使用 console.log() 调试输出 recid 的值，以验证代码是否正常工作。
在实际应用中，请替换示例中的 console.log() 为实际的 AJAX 请求。
如果表格是动态生成的，确保事件绑定在表格生成之后进行。

总结：

通过使用 class 代替重复的 id，并结合 jQuery 的 closest() 和 find() 方法，我们可以准确地获取动态生成的表格行中的特定数据。这种方法不仅解决了 id 重复的问题，还提高了代码的可维护性和可读性。在处理动态生成的 HTML 元素时，始终要记住避免使用重复的 id，并选择最合适的选择器来定位目标元素。

以上就是获取动态生成字符串：JavaScript 中获取特定行数据的正确方法的详细内容，更多请关注php中文网其它相关文章！