单击将类添加到行中的第一个 <td> 和表中的相应 <th>答案

【问题标题】：On Click add Class to First <td> in Row and corresponding <th> in Table单击将类添加到行中的第一个 <td> 和表中的相应 <th>
【发布时间】：2013-07-29 20:24:07
【问题描述】：

我有一个可点击的表格<td>。

当我单击表格中的单元格时，我想向其中添加一个类

我点击的行中的第一个<td>
<th> 对应于该行所在的列

本质上，我试图显示哪个<td> 在视觉上被点击了。

我可以弄清楚如何将一个类添加到该行中的第一个 <td>，但它会将它们全部添加到其中，而不仅仅是我所在的那个。我不知道如何将它添加到 <th>

寻找一些关于如何在 Jquery 中执行此操作的建议。我不完整的代码是：

//Adding Class Needed
$('.table-bordered tr td').on('click',function(){
    //Add Class to First TD in ROW
        $("tr td:nth-child(1)").addClass('superStyle');
    //Add Class to Header <th> Cell above
    });

演示 http://jsfiddle.net/L8s5X/

【问题讨论】：

查看jsfiddle.net/cse_tushar/L8s5X/12

标签： javascript jquery html html-table

【解决方案1】：

试试

$(function(){
    //Hover and click colors
    var table = $('table').on('click', 'td', function(){
        $('.table-bordered tr td').removeClass('active');
        $(this).addClass('active');
    });

    //Adding Class Needed
    $(table).find('tr td').on('click',function(){
        //Add Class to First TD in ROW
        table.find('.superStyle').removeClass('superStyle');
        $(this).closest('tr').find("td:nth-child(1)").addClass('superStyle');
        //Add Class to Header <th> Cell above
        table.find('thead th').eq($(this).index()).addClass('superStyle')
    });
});

演示：Fiddle

【讨论】：

【解决方案2】：

当然可以，你的选择器被告知要这样做。

您需要在点击的上下文中创建选择器

    $(this).parent().find('td:nth-child(1)').addClass('superStyle');

演示： http://jsfiddle.net/L8s5X/7/

【讨论】：

【解决方案3】：

DEMO

$('.table-bordered tr td').on('click', function () {
        var $table = $(this).closest('table'),
              $tds = $(this).closest('tr').find('td');
        $table.find('.superStyle').removeClass('superStyle');
        //Add Class to First TD in ROW
        $tds.eq(0).addClass('superStyle');
        //Add Class to Header <th> Cell above
        var index = $tds.index(this);
        $table.find('th').eq(index).addClass('superStyle');
    });

【讨论】：

谢谢，但这并没有做两件事...1）它没有突出显示我单击的 td 上方的。 2）我的错，我应该写这个，但我希望它来切换课程。因此，如果我点击另一个 TD，它应该从我刚刚点击的那个中删除它

【解决方案4】：

此解决方案似乎可以按预期工作：

jsfiddle

// save elements before binding the event handler, to save processing time
var $table = $('table'),
    $headings = $table.find('thead th'),
    $fields = $table.find('td');

$table.on('click', 'td', function () {
    var $this = $(this),
        index = $this.index();

    $fields.removeClass('active');
    $this.parent().children(':first-child').addClass('active');

    $headings.removeClass('superStyle').eq(index).addClass('superStyle');
});

【讨论】：