这是我的示例https://jsfiddle.net/aj8asqz6/的演示

    <tr data-num="2">
        <td colspan="1">nrdsdrr</td>
        <td colspan="4">eedasdee</td>
    </tr>
    <tr data-num="2">
        <td>dadsad</td>
        <td>adsadad</td>
        <td>ffdasdf</td>
        <td>#dsadg</td>
        <td>fdsad</td>
    </tr>


如您所见,每2行属于我数据库中的1个数据集。当我单击tr时,我会使用JS进行某种操作。

问题在于,由于表格未更改,用户可以忘记单击了哪个。我不想只突出显示他单击的行,因为在每种情况下都有2个相关。

因此,例如,如果他单击了最后一行,或者我的表格之前的行看起来像这样。

https://jsfiddle.net/aj8asqz6/1/

最佳答案

$('tr').click(function(){
    var parent = $(this).parent();
    var dataNum = $(this).attr('data-num');
   	$(parent).find('[data-num="' + dataNum + '"]').addClass('active');
});

table { border-collapse: collapse;}
td {border : 1px solid black;}
.active {background-color: yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr data-num="1">
            <td colspan="1">Wup</td>
            <td colspan="4">Wep</td>
        </tr>
        <tr data-num="1">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </thead>
    <tbody>
        <tr data-num="1">
            <td colspan="1">nrrr</td>
            <td colspan="4">eeee</td>
        </tr>
        <tr data-num="1">
            <td>da</td>
            <td>aad</td>
            <td>fff</td>
            <td>#g</td>
            <td>fd</td>
        </tr>
        <tr data-num="2">
            <td colspan="1">nrdsdrr</td>
            <td colspan="4">eedasdee</td>
        </tr>
        <tr data-num="2">
            <td>dadsad</td>
            <td>adsadad</td>
            <td>ffdasdf</td>
            <td>#dsadg</td>
            <td>fdsad</td>
        </tr>
    </tbody>
</table>

关于javascript - 关注表中的“行”,其中2行代表1个数据集,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33517338/

10-09 23:55
查看更多