Question

我有一堆以这样命名的表格单元格：

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”，我不知道我想。

Answer 1

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

修改：Fiddle。

修改（问题稍有改动）：New Fiddle。

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

修改：Final Fiddle。

...和PHP（不需要多次使用echo）：

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

Answer 2

$('td[id^="td"]').click(function(){        
  $(this).css("background-color","yellow");
  //do some other stuff...

});

Answer 3

最简单的方法是添加一个类，只使用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...

});

或者您可以在bind

中使用开关

$(".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
    }

});

jQuery在id选择器中连接int和string

3 个答案: