Question

我想在点击其子td时更改tr的背景颜色。我无法将onclick添加到tr，因为它是在渲染后从asp.net的gridview控件动态生成的。

我的标记是

<tbody>
  <tr>
    <td style="width:27%;"><span onclick="SelectAddressRow(this)">Ajish</span></td>
    <td style="width:40%;"><span onclick="SelectAddressRow(this)">22</span></td>
    <td style="width:33%;"><span onclick="SelectAddressRow(this)">Male</span></td>
 </tr>
</tbody>

我的代码是

function SelectAddressRow(column) {
  var tableRow=$(column).parent();
  $(tableRow).parent().css({ "background-color": "#B3B3B3" });
}

但它不起作用，但如果语句被

替换，它会影响td

$(tableRow).css({ "background-color": "#B3B3B3" });

Answer 1

这种方法怎么样？由于您使用的是jQuery，因此使用内联javascript没有意义：

$('table').on('click', 'span', function() {
    $(this).closest('tr').addClass('selected');
});

CSS：

.selected {
    background: #B3B3B3;
}

http://jsfiddle.net/m5D85/

Answer 2

你非常接近。您已将参数定义为column并使用Column

function SelectAddressRow(column) {
  var tableRow=$(column).parent();
  $(tableRow).parent().css({ "background-color": "#B3B3B3" });
}

DEMO

或者，您可以使用.closest()

function SelectAddressRow(column) {
  $(column).closest('tr').css({ "background-color": "#B3B3B3" });
}

DEMO

Answer 3

试试这个：

<tbody>
  <tr>
    <td style="width:27%;"><span onclick="SelectAddressRow($(this).closest('tr'))">Ajish</span></td>
    <td style="width:40%;"><span onclick="SelectAddressRow($(this).closest('tr'))">22</span></td>
    <td style="width:33%;"><span onclick="SelectAddressRow($(this).closest('tr'))">Male</span></td>
 </tr>
</tbody>

并将功能更改为：

function SelectAddressRow(row) {
  var tableRow=row;
  tableRow.css({ "background-color": "#B3B3B3" });
}

tr的背景颜色没有使用jquery改变

3 个答案: