jquery - 如何获取最后一行表的ID以将事件绑定(bind)到它?

标签 jquery events datatable

我想要做的是在我的表验证函数中提供每个新行,检查几天的所有事件并检查下拉列表的时间 (每小时),所以要做到这一点,我需要新行的 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);
                    }
                }
            });
        });
    });

这个方法失败了!

我尝试使用另一种方式“最后一个 child ”,但它也失败了,因为检查所有都绑定(bind)到两个检查所有事件,一个用于自身,一个用于最后一个 child !

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

也失败了

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

最佳答案

您可以使用: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>

关于jquery - 如何获取最后一行表的ID以将事件绑定(bind)到它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14454394/

相关文章:

c - 使用daemon和inotify在C中制作一个文件监视器

c# - 将 NULL 插入 DataTable

java - 在数据表中使用 List<CustomObject> 时出现 NumberFormatException

javascript - 使用jquery隐藏/显示图像上的div?

javascript - jQuery $(this) 选择器不适用于条件语句

c++ - 在事件驱动/异步框架中使用第 3 方库的回调(无文件描述符)

javascript - 使用事件监听器添加多个元素的最快方法?监听点击窗口不好吗?

c# - 如何将数据表表达式列中的值转换为2位小数

jquery:当div达到一定高度时改变背景颜色

javascript - 带有未选择正确值的选择单元格的 Angularjs ng-grid