I have a checkbox which when selected, should show table rows, and when unchecked, should hide the rows .. Below is my code:
<tr class='row New Request' style="display:none">
<td>Storage</td>
<td><input type="checkbox" name="storage" value="storage"></td>
</tr>
<tr class='row New Request' style="display:none">
<td>Network Infrastructure</td>
<td><input type="checkbox" id="network" name="network" value="network"></td>
</tr>
<tr class='subrow network' style="display:none">
<td><input type="checkbox" id="Wireless" name="Wireless" value="Wireless Connection">Wireless Connection</td>
<td><input type="checkbox" id="LAN" name="LAN" value="LAN Connection">LAN Connection</td>
</tr>
<tr class='row New Request' style="display:none">
<td>Security Infrastructure</td>
<td><input type="checkbox" name="security" value="security"></td>
</tr>
<tr class='row New Request' style="display:none">
<td>New Requset 4</td>
<td></td>
</tr>
And for the jQuery, here it is:
<script src="http://ift.tt/1oMJErh"></script>
<script>
function changeVal() {
$('#myHeader').html(this.name);
$(this).closest('tr').nextAll('.row').hide();
$(this).closest('tr').nextAll('.subrow').hide();
$('.'+this.value).show();
var tempText = "";
switch(this.value)
{
case "Inquiry":
tempText="Send Inquiry";
break;
case "Feedback":
tempText="Send Feedback";
break;
case "Complain":
tempText="File Complain";
break;
case "Request":
tempText="New Request";
break;
}
$('#myHeader').html(tempText).toggle(this.value != 'default');
}
$(function(){
$('#contactSelect').change(changeVal);
});
</script>
<script>
function changeValSub() {
$(this).closest('tr').nextAll('.subrow').hide();
//$('.'+this.value).show();
alert($(this).select() == false);
if($(this).select() == false)
$('.'+this.value).hide();
else
$('.'+this.value).show();
}
$(function(){
$('#network').change(changeValSub);
});
</script>
This is a part of complete table that shows/hides rows depending on the dropdown and the checkboxes ..
Aucun commentaire:
Enregistrer un commentaire