Question

我有一个包含四列和两行的表，第四列每行都有一个按钮，现在我想更改第二行第二列的背景颜色，同时单击每行的按钮。请让我知道如何做到这一点。

我在此处放置了我的代码供您参考。

$(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>

Answer 2

在这种情况下，您不需要使用繁重的JavaScript / jQuery。相反，您可以使用<col>：

<table border="1" style="border-collapse:collapse;">
  <col style="background-color: #f00;" />
  <col style="background-color: #0f0;" />
  <col style="background-color: #00f;" />
  <col style="" />
  <tr>
    <td>1</td>
    <td>jai</td>
    <td>description</td>
    <td><input type="button" value="button" /></td>
  </tr>
  <tr>
    <td>2</td>
    <td>sul</td>
    <td>description</td>
    <td><input type="button" value="button" /></td>
  </tr>
</table>

另请注意，您没有可能会失败某些代码的</input>（例如语法高亮显示器）。

Answer 3

试试这个，

如果您知道jquery中的parent（），那么您也可以尝试这个，

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

“$（this）.parent（）。parent（）。find（'td：eq（1）'）”在这行js中，它将移动到其父标签两次，意味着$（this）是单击输入控件，然后它将移动到其父标签两次以到达其标签，从该位置它将在位置1找到td。从此处开始，您可以执行颜色更改操作，如上面的js代码所示。 / p>

如何为表中的每列设置背景颜色？

3 个答案: