Question

我想要做的是在表格验证功能中给出每一个新行，检查所有事件的天数并检查下拉列表的时间（从小时到小时），所以要做到这一点，我需要新行的ID，就像我对旧的行所做的那样！我在这里堆积，我尝试了很多方法但总是在我的代码中有一个错误：该表是我公司拥有的黑盒子组件，我可以读取它的脚本但我无法编辑它们。它有一个bug，我必须处理它。通过递增计数器给出细胞的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

通知编号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);
                        }
                  }
          });
        });
    });

也失败了

你可以建议另一种方式吗？希望我已经宣布了我的问题!!

Answer 1

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

查看代码段以获取更多详细信息。

$(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>

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

})

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

2 个答案: