Question

我有一个html表：

  <table>
         <tr>
              <td>
                  <input type="checkbox" name="myCheck">
              </td>
         </tr>
  </table>

当我点击复选框时，我想更改表格单元格的背景颜色。表格单元格似乎不是复选框的父级。

在复选框点击上获取对表格单元格的引用的正确方法是什么？

Answer 1

当我点击复选框时，我想更改表格单元格的背景颜色。

您可以在更改事件中使用当前单击的复选框上下文this和.parent()来定位td元素：

$('input[name="myCheck"]').change(function(){
  $(this).parent().css('background',this.checked?"red":"");
});

<强> DEMO

Answer 2

要获取父表格单元格（例如td元素），您可以像这样使用.closest("td")：

$("input").change(function() {
    var td = $(this).closest("td");
});

在这种特殊情况下，您也可以使用$(this).parent()，但使用$(this).closest("td")更加简单，因为它找到最近的父级是td，如果{{{} input为了格式化原因，1}}元素被放在div或其他HTML元素中 - 所以使用.closest("td")它不那么脆弱，因此建议使用。

Answer 3

使用方法.closest('td')获取最接近的td父元素。

$('input[name="myCheck"]').on('change', function () {
    $(this).closest('td');
});

Example Here

只需听取所需元素的change事件，然后从那里调用.closest()方法。

$('input[name="myCheck"]').on('change', function () {
    $(this).closest('td').toggleClass('active');
});

.active {
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>
            <input type="checkbox" name="myCheck"/>
        </td>
    </tr>
</table>

Answer 4

＆＃13;

$('input').on('change', function () {
  if(this.checked){
     $(this).parent().css("background","blue"); 
  }
  else{
     $(this).parent().css("background","");
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
         <tr>
              <td>
                  <input type="checkbox" name="myCheck">
              </td>
         </tr>
  </table>

＆＃13;

使用jQuery，如何从单元格内的复选框引用html表格单元格？

4 个答案: