在點擊添加行到第一​​類和相應的<th>在表

Question

我有一個表可點擊<td>的。

當我點擊表格的單元格我想添加一個類

• 我對
• 相當於該行是
列的 <th>單擊的行中的第一個 <td>

本質上，我試圖顯示哪個<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 
    }); 

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