用JS获取某个元素同一个div或tr下的其它元素方法

最新推荐文章于 2024-07-26 03:32:15 发布

Java小白-枫

最新推荐文章于 2024-07-26 03:32:15 发布

阅读量3.9k

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/qq_40936181/article/details/115330808

版权

本文讨论了在前端开发中如何实现级联操作，即根据某个元素的值来改变其他元素的值。当页面上存在多个相关元素时，可以使用DOM遍历方法，如`parent()`和`find()`，来定位并修改目标元素。在表格布局中，可以通过获取当前单元格的父级`tr`元素来找到相关联的其他单元格。这些技巧对于处理多行数据和表格中的元素交互至关重要。

摘要由CSDN通过智能技术生成

有时候我们需要根据某个元素值获取或改变其它元素值，也就是级联操作。

如果同个页面两者相关的元素都只有一个，那就比较容易处理，可以通过给每个元素设置唯一ID的方式在JS获取到元素对象，然后进行想要的修改，这种没什么好说的。但如果同个页面两者相关的元素都不止一个，比如现在有多行数据，每一行都有一个叫姓名和性别的两个元素。

// 要求填写姓名后自动给性别赋值
<div>
    <div>
        <label>姓名</label>
        <label>性别</label>
    </div>
    <div>
        <input name="n1" onKeyUp="getSex(this)" />
        <input name="s1" />
    </div>
    <div>
        <input name="n1" onKeyUp="getSex(this)" />
        <input name="s1" />
    </div>
</div>

// 思路分析
// 我们可以把姓名这个对象当成方法的参数，在写getSex这个方法的时候，根据传的参数，获取到参数对象的父级，根据这个父级对象就可以获取到同级下面的其它元素对象
function getSex(currentName) {
    var currentDiv = currentName.parent();  // 有时候页面设计的时候可能会有多级div，可以通过多次调用parent()获取外层的div        
    var currentSex = currentDiv.find("input[name='s1']");  // 根据名称找到同级div下面的元素对象
    ...
}

如果页面是用表格设计，在同一个tr下面可以直接通过tr标签元素获取到父级对象，再获取到其他td对象

// 表格设计部分
<table>
    <tbody>
    <tr>
        <td>姓名</td>
        <td>性别</td>
    </tr>
    <tr>
        <td><input name="n1" onKeyUp="getSex(this)" /></td>
        <td><input name="s1" /></td>
    </tr>
    </tbody>
</table>

// JS部分
function getSex(currentName) {
    var currentTr = $(currentName).parents("tr");  // 当前行对象
    var currentSex = currentTr.find("input[name='revenue_rate']");
    ...
}