javascript - 单击将类添加到行中的第一个并在表中对应

Question

我有一个可点击的表格<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/

Answer 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')
    });
});

演示：小提琴

Answer 2

当然是，你的选择器被告知这样做。

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

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

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

Answer 3

该解决方案似乎可以按需要工作：

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');
});

Answer 4

演示

$('.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');
    });