Question

我有一个可行的解决方案，但我想改进它。单击tr行时，将切换相邻的复选框。不过，在此表中，如果用户单击带有“子数据”的下方的行，则它还会切换其上方的复选框。

$(document).ready(function() {
  $('.record_table tr').click(function(event) {
    //alert('function runs twice');
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');

    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="record_table">
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Sub data</p>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Sub data</p>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Sub data</p>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
</table>

http://jsfiddle.net/8vb374az/

Answer 1

要实现此目的，您可以将一个类放在子级tr元素上，从而在前一个tr上引发点击事件，如下所示：

$(document).ready(function() {
  $('.record_table tr').click(function(e) {
    if (e.target.type !== 'checkbox') {
      $(':checkbox', this).prop('checked', function(i, c) { return !c; });
    }
  });
  
  $('.record_table tr.sub').click(function(e) {
    $(this).prev('tr').click();
  });  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="record_table">
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr class="sub">
    <td colspan="3">
      <p>Sub data</p>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr class="sub">
    <td colspan="3">
      <p>Sub data</p>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr class="sub">
    <td colspan="3">
      <p>Sub data</p>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
</table>

Answer 2

$(this).prev().find('input').click();

$(document).ready(function() {
  $('.record_table tr').click(function(event) {
    //alert('function runs twice');
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
      $(this).prev().find('input').click();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="record_table">
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Sub data</p>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Sub data</p>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
  <tr>
    <td colspan="3">
      <p>Sub data</p>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td>Hello</td>
    <td>Hello</td>
  </tr>
</table>

点击表格行触发复选框事件，并在其下方显示tr行

2 个答案: