Question

我想使用点击功能为表格中的td着色。

但是如图所示，它只是为第二个td着色。

我尝试使用代码：

jquery的

$(document).on('click', "#table_user tr:not(:first) td:first-child", function() {
$("#edit").addClass('selected');
});

的CSS：

.selected {
 background-color: #ffd659;
}


<table id="table_user" class="table table-striped table-bordered table-checkable order-column">
                <thead>
                  <tr>
                    <th width="67%"> User </th>
                    <th>Action</th>
                  </tr>
                </thead>
                  <tr id="edit">
                    <td>test test</td>
                    <td>
                      <a  title="Edit" class="btn btn-icon-only btn-outline blue"><i class="glyphicon glyphicon-edit"> </i></a>
                      <a  title="Delete" class="btn btn-icon-only btn-outline red" ><i class="glyphicon glyphicon-trash"> </i></a>

                    </td>
                  </tr>
                </tbody>
              </table>

Answer 1

由于目标td是table中的最后一个孩子，因此您可以使用#table_user td:last-of-type作为选择器：

$(document).on('click', "#table_user td:last-of-type", function() {
    $(this).addClass('selected');
});

演示here ..！

Answer 2

只需使用它来更改所有td颜色：

dashTpl: function(){
        var tpl= new Ext.XTemplate(
            '<tpl for=".">' +
                '<div class="dashTpl">'+
                    '<table style="width:100%;height:80px;text-align:center" >'+
                        '<tr style="width:100%;">'+
                            '<td style="box-shadow: 10px 5px 5px #BDBDBD;background-color:#EEEEEE;width:20%">'+
                                '<a>'+
                                    '<span style="font-size:24px;"><b style="color: #8000FF;">5,875.00</b></span><br/>'+
                                    '<div>'+
                                        '<b style="color: #6E6E6E;font-size:14px;">€</b>' +

Answer 3

如果你希望每个td在点击时都有背景颜色，你可以这样：

argv[counter]

如何使用jquery为表中的td着色

3 个答案: