3

我想要做的是在我的表验证函数中给出每一个新行，检查几天的所有事件并检查下拉列表的时间（从小时到小时），所以我需要新行的 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

注意编号 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);
                        }
                  }
          });
        });
    });

它也失败了

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

4

2 回答 2

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>

于 2013-01-22T09:24:23.570 回答
0

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

$("#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");
   }

})
于 2013-01-22T10:18:28.880 回答