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

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

在动态生成的表格中，如果每个

1. 使用 class 代替重复的 id

首先，将

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

✎
?

2. 精确定位目标元素

在 JavaScript 中，我们需要修改事件处理函数，以便能够找到与触发事件的按钮相关联的

以下是修改后的 JavaScript 代码：

椒图AI

中文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') 方法从触发事件的元素开始，向上查找最近的 父元素。
• .find('.recid'): find('.recid') 方法在找到的 元素内部查找 class 为 recid 的元素。
• .text(): text() 方法获取找到的 元素的文本内容，即 recid 的值。

  3. 完整示例

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

  
  
  
      
      
      
  
  
      
  
          
  
              
  
                  
  123
                  
  
                      
  
                          
  ✎
                          
  ?
                      
                  
              
              
  
                  
  456
                  
  
                      
  
                          
  ✎
                          
  ?
                      
                  
              
          
      
  
      
  
  

  注意事项：

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

  总结：

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