Question

我有一张可点击<td>的桌子。

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

我点击

<td>

<th>对应于行所在的列

基本上我正在尝试直观地显示哪个<td>被点击。

我可以弄清楚如何将一个类添加到行中的第一个<td>，但是它将它们添加到所有而不仅仅是我所在的那个。我无法弄清楚如何将它添加到{ {1}}

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

<th>

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

演示：Fiddle

Answer 2

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

Answer 3

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

您需要在点击

的上下文中创建选择器

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

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

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

单击“将行添加到行中的第一个”并在表中对应

4 个答案: