0

このように名前が付けられたテーブルセルがたくさんあります。

for($x=0;$x<20;$x++){
            echo "<td id='td"; echo $x; echo "'>";
                        //put some text in the cell...
                    echo "</td>";

}

つまり、各セルのIDはtd0、td1、td2...です。テーブルは問題ないように見えます。ここで、jQueryを使用してクリック可能（セル単位）にします。

私はテストケースとして試しました：

$("#td0").click(function(){        
  $(this).css("background-color","yellow");
  //do some other stuff...

});

これはうまくいきました。最初のセルはクリック可能です。次に、forループを使用して、各セルをクリック可能にします。

for(i=0;i<20;i++){
    cell = "#td"+i;
    $(cell).click(function(){
                 //stuff...
        });
}

これはどのセルでも機能しません。理由や修正方法がわかりません。助けていただければ幸いです。

編集

申し訳ありませんが、機能はセルによって異なります（たとえば、クリックtd0はクリックtd8とは非常に異なるアクションになります）。したがって、一般的な「td」だけを使用することはできないと思います。

4

3 に答える 3

1 
$('td[id^="td"]').click(function() { ... })

編集：フィドル。

編集（質問が少し変更されました）：新しいフィドル。

$('td[id^="td"]').click(function() {
    var tdVal = $(this).attr('id').replace('td', '');
    switch (tdVal) { ... }
})

ただし、値を表すためにdata-*属性を使用する方がよいと思います。

<td class="myTableCell" data-value="0"></td>
<td class="myTableCell" data-value="1"></td>

$('td.myTableCell').click(function() {
    var tdVal = $(this).attr('data-value');
    ...
})

編集：ファイナルフィドル。

...そしてPHPを使用する場合（echoを何度も使用する必要はありません）：

for($x=0;$x<20;$x++){
        echo "<td id='td' data-value='" . $x . "'>";
                    //put some text in the cell...
                echo "</td>";
}
于 2013-02-12T11:06:58.417 に答える
0 
$('td[id^="td"]').click(function(){        
  $(this).css("background-color","yellow");
  //do some other stuff...

});
于 2013-02-12T11:08:19.673 に答える
0

これを回避する最も安価な方法は、クラスを追加し、1つのバインディング関数のみを使用することです。

for($x=0;$x<20;$x++){
        echo "<td class='table-cell' id='td" . $x . "'>";

        //put some text in the cell...
        echo "</td>";

}

次に、それをクリックにバインドし、クリックされたIDを確認します

$(".table-cell").click(function(e){        
    $(e.target.id).css("background-color","yellow");
    //do some other stuff...

});

または、バインドでスイッチを使用できます

$(".table-cell").click(function(e){        

    switch(e.target.id)
    {
    case 1:
      //execute code block 1
      break;
    case 2:
      //execute code block 2
      break;
    default:
      //code to be executed for default
    }

});
于 2013-02-12T11:17:33.087 に答える