0 
<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循环，以便您可以在没有数据库的情况下对其进行测试。我的问题是，当我选中一个复选框时，所有行都会展开，这是不对的。我需要的是当我选中一个复选框时，只有一行会扩展。

感谢您所有的帮助。

4

2 回答 2

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);
});
于 2012-09-04T08:50:01.990 回答
0

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

演示： 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

于 2012-09-04T12:47:56.453 回答