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

Question

我有一个 html table:

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

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

单击复选框时获取对 table 单元格的引用的正确方法是什么？

Answer 1

使用方法 .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 2

I want to change the backcolor of the table cell when i click on the checkbox.

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

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

DEMO

Answer 3

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

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

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

Answer 4

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

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

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

Using jQuery, how can I reference a html table cell td from a checkbox inside the cell?

checkbox

jquery

html-table