如何获取最后一行表的 ID 以将事件绑定到它？答案

【问题标题】：How to get ID of last row table to bind events to it?如何获取最后一行表的 ID 以将事件绑定到它？
【发布时间】：2018-12-05 14:07:55
【问题描述】：

我想要做的是在我的表验证函数中给出每个新行，检查所有事件的天数并检查下拉列表的时间（从一个小时到另一个小时），所以我需要新行的 ID，就像我对旧存在的行所做的那样！我在这里堆积，我尝试了很多方法，但我的代码中总是有一个错误：该表是我公司拥有的黑匣子组件，我可以阅读其脚本但无法编辑它们。它有一个错误，我必须处理它。单元格的 id 是通过增加一个计数器来给出的。所以如果我们有 3 行，单元格的 id 是：

 id    | task name    |  day    | from hour      | to hour
==============================================================
 id0   | task_name0   |  day0   | from_hour0     | to_hour0
----------------------------------------------------------
 id1   | task_name1   |  day1   | from_hour1     | to_hour1
----------------------------------------------------------
 id2   | task_name2   |  day2   | from_hour2     | to_hour2

当您添加新行时，新行的 ID 为：

id4   | task_name4   |  day4   | from_hour4     | to_hour4

notice number 4 ，它需要行数并将其分配为 id 。

从表格中间删除行时出现问题隐藏的输入 max_rows 不会减少，也不能保持 ids 唯一！

所以，这是我的问题，我想为新 ID 提供事件，但我不知道它是什么！（这种情况出现在从表格中间删除行之后），我这样做的旧方法是获取行数并将其分配给这样的字符串：（这用于检查所有天并取消选中所有）

$(document).ready(function() 
    {
        $('#table_1_addRow').click(function()
        {

            var row=$('#table_1').find('tbody > tr').size();

            $('#col_task_days'+row+'_0').click(function(){
                for (var i=1;i<8;i++)
                {
                    //check all & make them readonly
                    if($('#col_task_days'+row+'_0').attr('checked')=='checked')
                    {
                        $('#col_task_days'+row+'_'+i).attr('checked','checked');
                        $('#col_task_days'+row+'_'+i).attr('disabled','disabled');
                    }
                    else
                    {
                        $('#col_task_days'+row+'_'+i).attr('disabled',false);
                    }
                }
            });
        });
    });

这种方式失败了！

我尝试使用另一种方式“最后一个孩子”，但它也失败了，因为检查所有被绑定到两个检查所有事件，一个为自身，一个为最后一个孩子！

 $(document).ready(function() 
    {
        $('#table_1_addRow').click(function()
        {
             //days columns in the nine column in  table
            var id=$('#table_1').find('tbody > tr:last-child').children()[4].children[0].id;

            $('#'+id).click(function(){
                for (var i=1;i<8;i++)
                {

                        var id_son=$('#table_1').find('tbody > tr:last-child').children()[4].children[i].id;

                        //check all & make them readonly
                        if($('#'+id).attr('checked')=='checked')
                        {
                            $('#'+id_son).attr('checked','checked');
                            $('#'+id_son).attr('disabled','disabled');
                        }
                        else
                        {
                            $('#'+id_son).attr('disabled',false);
                        }
                  }
          });
        });
    });

也失败了

你能建议其他方法吗？希望我已经宣布了我的问题！

【问题讨论】：

标签： jquery events datatable

【解决方案1】：

您可以使用:last-child CSS 选择器来解决这个问题。

查看代码 sn-p 了解更多详情。

$(function(){
  $('table#grid').on('click', 'tr:last-child', function () {
    alert($(this).attr('id'));
  });
});

// for binding to every row, you can just simply bind to 'tr' instead of 'tr:last-child' i.e.
//$(function(){
//  $('table#grid').on('click', 'tr', function () {
//    alert($(this).attr('id'));
//  });
//});

table
{
  border-collapse: collapse;
}

td
{
  padding: 10px;
  border: 1px solid #ccc;
}

tr:last-child
{
  cursor: pointer;
  color: green;
}

</script>
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <table id="grid">    
    <tr id='first'>
      <td>
        first
      </td>
    </tr>
    
    <tr id='second'>
      <td>
        second
      </td>
    </tr>
    
    <tr id='third'>
      <td>
        third
      </td>
    </tr>
    
    <tr id='fourth'>
      <td>
        Click on me - I should alert: 'fourth'
      </td>
    </tr>
  </table>
</body>
</html>

【讨论】：

你为什么用这个：find('td:last-child').parent()。我认为这没有必要。 $(this).attr('id') 似乎足够了。
是的，这样，在保存行后，您必须将事件绑定到相同的 id，当点击 ID 检查（最后一行) td .
是的，是的，我 100% 同意 $(this).attr('id'); 就足够了，事实上我在我的工作示例中也提到了这一点，但我在提到这一点时遇到了一点延迟:)

【解决方案2】：

事件委托是新旧行的终极解决方案！

$("#table_1").on("click","tbody > tr > td[column=col_task_days] > input[type=checkbox]",function(event){
   console.log(event.target);
   var target = event.target;
   var currentCheckboxID = $(target).attr('id');
   if (!currentCheckboxID){
     return;
   }
   var isCheckAll = currentCheckboxID[currentCheckboxID.length-1] === '0';
   if (isCheckAll && $(target).is(":checked")){
        $(target).siblings("[type=checkbox]").attr("checked","checked");
        $(target).siblings("[type=checkbox]").attr("disabled","disabled");
   }else if (isCheckAll && !$(target).is(":checked")){
           $(target).siblings("[type=checkbox]").removeAttr("disabled");
   }

})

【讨论】：