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 が減少せず、ID を一意に保つ必要がないという問題が発生します。

だから、これが私の問題です。新しい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);
                    }
                }
            });
        });
    });

この方法は失敗しました!

別の方法「最後の子」を使用してみましたが、すべてのチェックが2つのチェックすべてのイベントにバインドされていたため、失敗しました。1つはそれ自体、もう1つは最後の子です。

 $(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 に答える