HTML表格行中第二列的jQuery选择器

Question

我的代码的目的是将选定的HTML表格行中的数据添加到JavaScript数组中，如果取消选择该行，则删除它。

https://jsfiddle.net/nicktry/h1636ram/

目前我有两个问题：

1. 第一次点击时未应用CSS样式

2. 我无法正确地将jQuery选择器添加/删除表数据。

   $('table tbody tr').click(function(event) {
               if (event.target.type !== 'checkbox') {
                   $(':checkbox', this).trigger('click');
               }
               $("input[type='checkbox']").change(function(e) {
                   if($(this).is(":checked")){
                       $(this).closest('tr').addClass("selected_row");
                       addJob(document.getElementById('jobs'), $(this).closest('tr td:nth-child(2)').text());  
                   }else{
                       $(this).closest('tr').removeClass("selected_row");
                       removeJob(document.getElementById('jobs'), $(this).closest('tr td:nth-child(2)').text());
                   }
               });
           });
   

感谢stackoverflow社区的智慧！

Answer 1

你不应该在彼此内部有两个事件。

移动此

 $("input[type='checkbox']").not('#check_all').change(function (e) {

 });

以外的

 $('table tbody tr').click(function(event) { 

 });

更改此

$(this).closest('tr td:nth-child(2)').text()

到这个

 $(this).parent().next().text()

DEMO：https://jsfiddle.net/h1636ram/9/