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>

This is running code, actually it is not a for ($i=1; $i<=5; $i++) it is foreach($items as $i). I decided to make it a for loop so that you can test it w/o database. My problem is, when I check one checkbox, all of the rows will expand and that is not right. What I need is when I check one checkbox, only one row only will expand.

Thanks for all of your help.

4

2 に答える 2

1

You only specified a class selector for the toggle commands. So of course it will toggle all the elements of this class.

Try this instead

$('.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

I have done complete solution bin for above issue. please check demo link as below:

Demo: 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;
}

Demo: http://codebins.com/bin/4ldqp7q

于 2012-09-04T12:47:56.453 に答える