Question

这似乎是一个足够简单的功能，但出于某种原因，我正在努力使其发挥作用。我有一个带有jquery tablesorter插件的HTML表。每行都有一个复选框作为第一列。默认情况下，隐藏所有子行。当我选择父行上的复选框时，我希望它还将该父项下的子行上的复选框标记为已选中。这是我的HTML表格：

<table>
  <thead>
    <tr>
      <th>Select</th>
      <th>Column2</th>
    </tr>
  </thead>
  <tbody>
     <tr class="tablesorter-hasChildRow">
       <td><input type="checkbox" class="rowSelector"></td>
       <td>Column 2 Data</td>
     <tr>
     <tr class="tablesorter-childRow">
       <td><input type="checkbox" class="rowSelector"></td>
       <td>Column 2 Data</td>
     <tr>
     <tr class="tablesorter-childRow">
       <td><input type="checkbox" class="rowSelector"></td>
       <td>Column 2 Data</td>
     <tr>
     <tr class="tablesorter-hasChildRow">
       <td><input type="checkbox" class="rowSelector"></td>
       <td>Column 2 Data</td>
     <tr>
     <tr class="tablesorter-childRow">
       <td><input type="checkbox" class="rowSelector"></td>
       <td>Column 2 Data</td>
     <tr>
     <tr class="tablesorter-childRow">
       <td><input type="checkbox" class="rowSelector"></td>
       <td>Column 2 Data</td>
     <tr>
  </tbody>
 </table>

这是我的javascript。我到了警报工作的地步，我正在努力的部分现在正在选择这个父母下面的所有子行（子行的数量将从父母到父母不等）＆amp;然后选择复选框。在其他方面，我使用道具（'已检查'），但我需要它进行切换，以便如果父母进行联合国检查，孩子也将取消选中。

$(.rowSelector').change(function() {
    if ($(this).closest('tr').hasClass('tablesorter-hasChildRow')) {
        alert('Yay!');  //this part works
        $(this).nextAll('tr').each(function () {
            if ($(this).has('.tablesorter-childRow')) {
              $(this).find(input.rowSelector).toggleClass('selected');
             }
        });
   };
});

谁能告诉我这里哪里出错了？

Answer 1

这是工作代码：

$('.rowSelector').change(function() {
  $(this).closest('tr.tablesorter-hasChildRow').nextUntil('tr.tablesorter-hasChildRow').find('input.rowSelector').prop('checked', $(this).prop('checked'));
});

嗯，有点工作。理想情况下，当手动选择所有较低级别的刻度时，您仍然希望切换更高级别的刻度。

Answer 2

HTML存在一些问题...请确保在关闭行时使用</tr>。这个HTML将创建两行，第一行是空的。

<tr>
<tr class="tablesorter-hasChildRow">

无论如何，我创建了this demo，它完成了@rtytgat提到的所有必要的复选框确定：

设置父级将使所有子级具有相同的检查状态
带有已检查＆amp;组合的子行未经检查会使父母不确定。
如果所有子行具有相同的状态，则将父级设置为该状态。

$(function() {

  var parentClass = '.tablesorter-hasChildRow',
    rowSelector = '.rowSelector';

  // return parent + all children
  function getGroupRows($row) {
    var isParent = $row.hasClass(parentClass.slice(1)),
      $rows = $row.nextUntil(parentClass).add($row),
      $prev = $row.prevUntil(parentClass).add($row);
    return isParent ? $rows : $rows.add($prev).add($prev.prev());
  }

  $('table')
    .tablesorter({
      theme: 'blue'
    })
    .on('change', rowSelector, function() {
      var $rows, checked, len,
        isChecked = this.checked,
        $row = $(this).closest('tr'),
        $group = getGroupRows($row);
      if ($row.hasClass(parentClass.slice(1))) {
        // parent checked, now (un)check all children
        $group.find('.rowSelector').prop('checked', isChecked);
      } else {
        // child row (un)checked, now figure out what to do with the parent
        $rows = $group.filter('.tablesorter-childRow');
        checked = $rows.find(rowSelector + ':checked').length;
        len = isChecked ? checked : $rows.length - checked;
        if (len === $rows.length) {
          // all child rows are the same, set the parent to match
          $group.filter(parentClass).find(rowSelector).prop({
            indeterminate: false,
            checked: isChecked
          });
        } else {
          // combo of checked & unchecked, make parent indeterminate
          $group.filter(parentClass).find(rowSelector).prop({
            indeterminate: true,
            checked: false
          });
        }
      }
    });
});

Jquery tablesorter - 选择父行时包括所有子行

2 个答案: