javascript - 如何为表格中的每一列设置背景颜色？

Question

我有一个四列两行的表格，第 4 列每行都有一个按钮，现在我想更改第二行第二列的背景颜色，同时单击每一行的按钮。请让我知道如何执行此操作。

我把我的代码放在这里供你引用。

$(function(){
    $('input').click(function(){
        $('table').find('tr td:eq(1)').css('background-color', 'red');
    });
});

HTML

<table border="1" style="border-collapse:collapse;">
    <tr>
        <td>1</td>
        <td>jai</td>
        <td>description</td>
        <td><input type="button" value="button"></input></td>
    </tr>
    <tr>
        <td>2</td>
        <td>sul</td>
        <td>description</td>
        <td><input type="button" value="button"></input></td>
    </tr>
</table>

Answer 1

使用 closest() 找到包含按钮的 tr ，然后使用它找到第二列

$(function() {
  $('input').click(function() {
    $(this).closest('tr').find('td:eq(1)').css('background-color', 'red');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" style="border-collapse:collapse;">
  <tr>
    <td>1</td>
    <td>jai</td>
    <td>description</td>
    <td>
      <input type="button" value="button"></input>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>sul</td>
    <td>description</td>
    <td>
      <input type="button" value="button"></input>
    </td>
  </tr>
</table>