jQuery表格操作：获取Select值与同行数据

HTML 结构

    
    
    
    




  

    

      
Hostname
      
User
      
Vulnerabilities
    
  
  

    

      
Host001
      
User001
      

        
          Security Vulnerability CVE-2018-1285 for log4net
          Security Vulnerability CVE-2022-39427 in VirtualBox
        
      
    
    

      
Host002
      
User002
      

        
          Security Vulnerability CVE-2021-34803 for TeamViewer
          Security Vulnerability CVE-2023-21899 in VirtualBox
        
      
    
  

JavaScript 逻辑

$(function () {
  // 监听所有具有 'form-select' 类的  元素的 'change' 事件
  $(".form-select").change(function (event) {
    // 1. 获取当前选中的  的值
    const selectedOptionValue = this.value;
    console.log("选中的漏洞ID:", selectedOptionValue); // 示例输出

    // 2. 向上遍历DOM，找到最近的  父元素
    // $(this) 将当前触发事件的 DOM 元素封装成 jQuery 对象
    const $currentRow = $(this).closest('tr');

    // 3. 在当前行内向下遍历DOM，找到包含主机名的  元素
    // 这里我们查找类名为 'Rechnernummer' 的  内部的  标签
    const hostname = $currentRow.find('td.Rechnernummer a').text();
    console.log("对应的主机名:", hostname); // 示例输出

    // 至此，我们已经成功获取了 selectedOptionValue 和 hostname。
    // 接下来可以根据业务需求，将这些数据发送到后端（例如通过 AJAX 请求）。
    // 示例 AJAX 请求（请根据实际后端接口调整）：
    /*
    $.ajax({
      url: '/api/update-vulnerability/', // Django 后端接口地址
      method: 'POST',
      data: {
        vulnerability_id: selectedOptionValue,
        hostname: hostname,
        // 其他可能需要的数据
      },
      success: function(response) {
        console.log('数据发送成功:', response);
        // 可以在这里更新UI或显示成功消息
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.error('数据发送失败:', textStatus, errorThrown);
        // 可以在这里显示错误消息
      }
    });
    */

    // 注意：原问题中包含一个循环来取消所有选项的选中状态。
    // 在大多数 'change' 事件处理场景中，这并不是标准行为，
    // 因为 'change' 事件本身就意味着用户已完成选择。
    // 如果有特殊UI需求，可以保留此逻辑：
    // for(var i = 0; i < this.options.length; i++){
    //   this.options[i].selected = false;
    // }
  });
});
注意事项
选择器精确性：closest()和find()方法中的选择器（如'tr'、'td.Rechnernummer a'）必须准确匹配你的HTML结构。如果HTML结构发生变化，需要相应地更新选择器。
DOM结构稳定性：此方法依赖于相对稳定的DOM结构。如果表格内容是动态加载的，并且其结构可能发生变化，请确保你的选择器仍然有效。
性能考量：对于包含大量行和复杂DOM结构的超大型表格，频繁的DOM遍历可能会有轻微的性能开销。然而，对于大多数常见的Web应用场景，jQuery的DOM遍历性能已经足够优化。
事件委托：如果表格内容是动态生成的（例如通过AJAX加载），推荐使用事件委托来绑定事件，以确保事件处理程序能够作用于新添加的元素。例如：
$(document).on('change', '.form-select', function(event) {
    // ... 相同的逻辑 ...
});
这将把事件监听器绑定到文档根部，利用事件冒泡机制来处理.form-select元素的change事件，无论它们何时被添加到DOM中。
错误处理：在实际应用中，应考虑添加错误处理机制，例如检查hostname是否成功获取，或者在AJAX请求失败时提供用户反馈。
总结
通过巧妙地结合使用jQuery的closest()和find()方法，我们可以高效、简洁地解决在HTML表格中关联不同单元格数据的问题。这种“向上再向下”的DOM遍历模式是处理复杂表格交互的强大工具，它使得从事件触发元素出发，获取同行列甚至同级其他元素的数据变得轻而易举，从而能够构建出更加动态和响应式的Web应用程序。理解并熟练运用这些DOM遍历技巧，将极大地提升前端开发的效率和代码质量。
今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~