I have a table and it looks like this:
<form id="myForm"> <table class="table" align="center"> <tr style="background-color: #337ab7"> <th>soort dag</th> <th>Day</th> <th>Date</th> <th>Place</th> <th>name</th> <th>Type</th> <th>costs</th> </tr> <tr> <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> </td> <td>1</td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" />euro</td> </tr> <tr> <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> </td> <td>2</td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" />euro</td> </tr> <tr> <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> </td> <td>3</td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" />euro</td> </tr> <tr> <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> </td> <td>4</td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" />euro</td> </tr> <tr> <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> </td> <td>5</td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" />euro</td> </tr> <tr> <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> </td> <td>6</td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" />euro</td> </tr> <tr> <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> </td> <td>7</td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" />euro</td> </tr> </table> </form>
But I want that when people select the 'op reis' button The row will be hidden and it shows another row. I know how I have to do this with id, but then I have to give everything another id
and everything another script to hide and show.
Step1: Include jQuery into your html page
<head>
<script src="jquery-1.11.3.min.js"></script>
</head>
Step2:
Include this query into your script:
$(document).ready(function(){
$("input").click(function(event){
var row = $(this).closest("tr");
row.hide();
//$("#some other row").show();
});
});
Step3: Provide the script with the row you want to show after hiding the one that was clicked.
Note that $("input")
will make this work on your textboxes too, you can replace it with $(".disappearOnClick")
if you'd give your radiobuttons this class (ie class = "disappearOnClick"
)
If i understand correctly this should work
Html:
<form id="myForm">
<table class="table" align="center">
<tr class="nav_row" style="background-color: #337ab7">
<th>soort dag</th>
<th>Day</th>
<th>Date</th>
<th>Place</th>
<th>name</th>
<th>Type</th>
<th>costs</th>
</tr>
</table>
jQuery:
$(function() {
showHide();
});
function showHide() {
//Generate 7 rows and hide them
for (i = 7; i > 0; i--) {
$('.nav_row').after('<tr id="row_' + i + '"> <td><form><input type="radio" name="day type" value="staying" checked>staying( at hotel, camping etc.)<br><input type="radio" name="soort dag" value="op reis"> aan het reizen (bijv. vliegtuig, auto enz.)</form> </td> <td>' + i + '</td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" /></td> <td><input type="text" />euro</td> </tr>');
$('#row_' + i).hide();
}
//Check if first row exists and show it
if ($('#row_1').length == 1) {
$('#row_1').css('display', 'table-row');
}
checklast = $('input').parents('tr').length; //number of rows
i = 1;
$("input[value='op reis']").click(function() {
id = $(this).parents('tr').attr('id'); //Get ID of row clicked
//If it is the last row - return (stop)
if (id == 'row_' + checklast) {
return;
};
//hides previous, shows next row
if (id == 'row_' + i) {
$('#row_' + i).fadeOut('fast').css('display', 'none');
i++;
$('#row_' + i).fadeIn('normal').css('display', 'table-row');
}
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.