Question

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type='text/javascript'>
    $(window).load(function () {
        $('.varx').click(function () {
            $(".text").toggle(this.checked);
            $(".text1").toggle(this.checked);
            $(".text2").toggle(this.checked);
            $(".text3").toggle(this.checked);
        });
    });
</script>
<table border='1'>
    <?php for ($i=1; $i<=5; $i++){ ?>
        <tr>
            <td>
                <input type='checkbox' class='varx' />
            </td>
            <td>aaa</td>
            <td>bbb</td>
            <td>ccc</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>ddd</td>
            <td>eee</td>
            <td>fff</td>
        </tr>
        <tr>
            <td class='text3' colspan='4' style='display:none'></td>
            <td class='text3' style='display:none'>aaa</td>
            <td class='text2' style='display:none'>bbb</td>
            <td class='text1' style='display:none'>ccc</td>
            <td class='text' style='display:none'>ddd</td>
            <td class='text3' colspan='3' style='display:none'></td>
        </tr>
        <?php } ?>
</table>

这是运行代码，实际上它不是for ($i=1; $i<=5; $i++)它是foreach($items as $i)。我决定将其设为for循环，以便您可以使用数据库进行测试。我的问题是，当我选中一个复选框时，所有行都将展开，这是不正确的。我需要的是当我选中一个复选框时，只会扩展一行。

感谢您的所有帮助。

Answer 1

您只为切换命令指定了一个类选择器。所以当然它会切换这个类的所有元素。

试试这个

$('.varx').click(function () {
    var $theNextRow = $(this).parents('tr').eq(0).next();
    $theNextRow.find(".text").toggle(this.checked);
    $theNextRow.find(".text1").toggle(this.checked);
    $theNextRow.find(".text2").toggle(this.checked);
    $theNextRow.find(".text3").toggle(this.checked);
});

Answer 2

我已针对上述问题完成了完整的解决方案箱。请查看以下演示链接：

演示： http://codebins.com/bin/4ldqp7q

<强> HTML

<table class="table" cellspacing="0" cellpadding="0">
  <tr>
    <th>
      Choice
    </th>
    <th>
      Col-1
    </th>
    <th>
      Col-2
    </th>
    <th>
      Col-3
    </th>
    <th>
      Col-4
    </th>
    <th>
      Col-5
    </th>
    <th>
      Remove
    </th>
  </tr>

  <tr>
    <td>
      <input type="checkbox" class="varx"/>
    </td>
    <td>
      data-1
     </td>
     <td>
       data-2
     </td>
     <td>
       data-3
     </td>
     <td>
       data-4
     </td>
     <td>
       data-5
     </td>
     <td>
       &nbsp;
     </td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" class="varx"/>
    </td>
    <td>
      data-21
     </td>
     <td>
       data-22
     </td>
     <td>
       data-23
     </td>
     <td>
       data-24
     </td>
     <td>
       data-25
     </td>
     <td>
       &nbsp;
     </td>
  </tr>

  <tr>
    <td>
      <input type="checkbox" class="varx"/>
    </td>
    <td>
      data-31
    </td>
    <td>
      data-32
    </td>
    <td>
      data-33
    </td>
    <td>
      data-34
    </td>
    <td>
      data-35
    </td>
    <td>
      &nbsp;
    </td>
  </tr>
</table>

<强>的jQuery

$(function() {
    $(".varx").change(expandRow);
});

function expandRow() {
    if ($(this).is(":checked")) {
        var TrClone = $(this).closest("tr").clone();
        $(TrClone).find("td:last").html("<input type='checkbox' class='remove'/>");
        $(TrClone).insertAfter($(this).closest("tr"));
        $(TrClone).find(".varx").removeAttr("checked");
        $(TrClone).find(".varx").bind('change', expandRow);
        $(TrClone).find(".remove").bind('change', removeRow);
    }
}

function removeRow() {
    if ($(this).is(":checked")) {
        $(this).closest("tr").remove();
        if ($(".table").find(".remove").length <= 0) {
            $(".varx").removeAttr("checked");
        }
    }
}

<强> CSS

.table{
  width:70%;
  border:1px solid #555;
}
.table th{
  background:#dcacaa;
  border-bottom:1px solid #555;
}
.table td{
  text-align:center;
  background:#c3cafd;
}

演示： http://codebins.com/bin/4ldqp7q

使用复选框扩展表

2 个答案: