从列中切换单个“td”元素

Question

我想从四列表的第四列切换单个元素。例如，如果单击第五行第三列中的元素，则只应切换第五行第四列中的元素。

我的当前代码仅切换第四行第四列元素，而不管第三列元素是否被点击。

$('td:nth-child(4),th:nth-child(4)').hide(); 

$('td:nth-child(3)').click(function() { 
    $('td:nth-child(4),th:nth-child(4)').eq(4).toggle(); 
}); 

第四列'th'元素也不会跳转。

Answer 1

你必须以某种方式引用点击td。这是一个办法：

$('table').on('click', 'td:nth-child(3)', function() { 

    $(this).next().toggle(); 
    // |  | 
    // |  ^-- this selects the next sibling 
    // | 
    // ^-- `this` is a reference to the clicked td 
}); 

Answer 2

查找最接近tr，选择第4列，然后toggle：

$('td:nth-child(4),th:nth-child(4)').hide(); 

$('td:nth-child(3)').click(function() { 
    var currentTdCol4 = 
    $(this).closest('tr').children('td:nth-child(4)'); 
    $(currentTdCol4).toggle(); 
    $('th:nth-child(4)').toggle(); 
}); 

这里是我的示例：Link