jQuery事件处理：在表格下拉菜单选择时获取同行的其他单元格数据-js教程-PHP中文网

jquery事件处理：在表格下拉菜单选择时获取同行的其他单元格数据

当在HTML表格中处理事件，例如），当用户选择下拉菜单中的某个选项时，我们需要获取该选项的值，同时还需要获取该行中其他单元格（例如，同一行中的主机名）的信息，以便将这些数据一并发送到后端进行处理。

考虑以下HTML表格结构：




  
    
      Hostname
      User
      Vulnerabilities
    
  
  
    
      Host001
      User001
      
        
      
    
    
      Host002
      User002

Hostname	User	Vulnerabilities
Host001	User001
Host002	User002

在这个结构中，每个表格行（

）代表一个客户端，其中包含主机名（.Rechnernummer）和与该主机相关的漏洞列表（ .Vulnerabilites中的元素，跨越到同一行中另一个元素，并获取其中的文本内容（主机名），是实现这一功能的关键挑战。这需要一种在DOM树中向上和向下导航的机制。

解决方案：jQuery DOM遍历

jQuery提供了一系列强大的DOM遍历方法，可以帮助我们高效地在DOM树中移动。对于本场景，我们将结合使用.closest()和.find()方法来解决问题。

Giiso写作机器人

Giiso写作机器人，让写作更简单

下载

.closest(selector): 这个方法从当前元素开始，向上遍历其祖先元素，并返回第一个匹配selector的祖先元素。在本例中，我们可以从元素开始，向上找到最近的祖先元素 var $currentRow = $(this).closest('tr'); // 3. 在找到的内部，向下查找class为'Rechnernummer'的中的
元素的文本内容 var hostname = $currentRow.find('td.Rechnernummer a').text(); console.log("对应的主机名:", hostname); // 至此，您已成功获取到选中的漏洞ID和对应的主机名。 // 您可以根据业务需求，将这两个值发送到Django后端或其他服务。 // 例如： // sendDataToBackend(selectedOptionValue, hostname); // 注意：原问题中的循环取消选中逻辑通常不适用于change事件， // 因为change事件触发后，下拉菜单通常会保持选中状态。 // 如果有特殊需求，请根据实际情况调整。 }); });
方法详解
- $(this): 在事件处理函数内部，this关键字指向触发事件的DOM元素。在这里，它代表用户刚刚操作的
- .closest('tr'): 从当前的

jQuery事件处理：在表格下拉菜单选择时获取同行的其他单元格数据

解决方案：jQuery DOM遍历

方法详解