Expanding a table using checkbox - php

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>
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.

Answer 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);
});

Answer 2

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>
</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>
</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>
</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