Question

假设每个 td 都有个人 id 的表格，我想在任何人点击任何 td 元素时添加一些效果或其他内容这个特别的 td 使用 jquery 。

例如：

<table>
<tr>    
    <td id="11"> some text 1 </td>  
    <td id="12"> some text 2 </td>
    <td id="13"> some text 3 </td>
</tr>
<tr>    
    <td id="21"> some text 4 </td>  
    <td id="22"> some text 5 </td>
    <td id="23"> some text 6 </td>
</tr>
</table>

现在当任何人点击任何 td ，例如td which id equal to 22时，我想添加一些效果，例如( add background-color/color etc )

我该怎么做？提前致谢

Answer 1

$('#22').on('click', function(){
    $(this).css('background-color', '#f6ff00');
});

或作为对象（如果您想要更改多个属性）：

$('#22').on('click', function(){
    $(this).css({
        'background-color': '#f6ff00'
    });
});

Answer 2

You can start learning jQuery here

$('#22').on('click',function(){
  $(this).css({backgroundColor:'red'});
});

推荐：请勿使用数字开始您的ID。

Answer 3

对于每个id的不同效果，您可以执行以下操作：

<强> JQuery的

$("td").on('click', function(){
    var tdid = $(this).attr('id'); //get the id of the td
    switch (tdid){
    case "11":
        $(this).css("background-color", "Red");
        break;
    case "12":
        $(this).css("background-color", "Green");
        break;
    case "13":
        $(this).css("background-color", "blue");
        break;
        //... add the others here
    case "22":
        $(this).css("background-color", "orange");
        break;
    default:
        $(this).css("background-color", "yellow");
        break;

    }
});

<强> HTML

<table>
 <tr>    
  <td id="11"> some text 1 </td>  
  <td id="12"> some text 2 </td>
  <td id="13"> some text 3 </td>
 </tr>
 <tr>    
  <td id="21"> some text 4 </td>  
  <td id="22"> some text 5 </td>
  <td id="23"> some text 6 </td>
 </tr>
</table>

FIDDLE here

Answer 4

$("td").click(function(){
    $(this).css("background-color", "Red");
});

或仅定位特定的td

$("#22").click(function(){
    $(this).css("background-color", "Red");
});

FIDDLE

更新：我猜是value您的意思是td内的文字？如果是这样，那么你可以使用这个

$(this).text();

OR

$("#id").text();

FIDDLE

如何使用jquery更改onclick事件中的特定元素

4 个答案: