I would like to use JavaScript to make a table row's display:none; and show it again on a click of a button.
-
You want to hide all tr's with 3 columns or hide a tr that just happen to have 3 columns?mplungjan– mplungjan2011-05-14 07:04:55 +00:00Commented May 14, 2011 at 7:04
-
hide a tr that just happen to have 3 columns and on clicking a button make the row visible again.Varada– Varada2011-05-14 07:06:03 +00:00Commented May 14, 2011 at 7:06
-
I updated your question with the changes from your commentmplungjan– mplungjan2011-05-14 07:26:27 +00:00Commented May 14, 2011 at 7:26
Add a comment
|
4 Answers
Plain JS - delegation, can handle dynamically inserted rows
window.addEventListener("DOMContentLoaded", function() {
document.getElementById("nav").addEventListener("click", function(e) {
var tgt = e.target;
if (tgt.tagName === "A") {
e.preventDefault(); // stop click
var rowId = tgt.getAttribute("data-id"),
rowIndex = tgt.getAttribute("data-index"),
row = rowId ? document.getElementById(rowId) : // id passed
document.getElementById('table1').rows[rowIndex - 1]; // idx passed
if (row) row.style.display = (row.style.display == 'none') ? '' : 'none';
}
});
});<div id="nav">
<a href="#" data-id="row3">Toggle row with ID row3</a> |
<a href="#" data-index="2">Toggle 2nd row</a><hr/>
</div>
<table>
<tbody id="table1">
<tr><td>row 1 cell 1</td><td>row 1 cell 2</td><td>row 1 cell 3</td></tr>
<tr><td>row 2 cell 1</td><td>row 2 cell 2</td><td>row 2 cell 3</td></tr>
<tr id="row3"><td>row 3 cell 1</td><td>row 3 cell 2</td><td>row 3 cell 3</td></tr>
</tbody>
</table>Plain JS - inline handler can ALSO handle dynamically inserted rows but the above is preferred
function toggle(row) {
if (isNaN(row)) row = document.getElementById(row); // id passed
else row = document.getElementById('table1').rows[row]; // idx passed
if (row) row.style.display = (row.style.display == 'none') ? '' : 'none';
return false;
}<a href="#" onClick="return toggle('row3')">Toggle row with ID row3</a> |
<a href="#" onClick="return toggle(1)">Toggle 2nd row</a><hr/>
<table>
<tbody id="table1">
<tr><td>row 1 cell 1</td><td>row 1 cell 2</td><td>row 1 cell 3</td></tr>
<tr><td>row 2 cell 1</td><td>row 2 cell 2</td><td>row 2 cell 3</td></tr>
<tr id="row3"><td>row 3 cell 1</td><td>row 3 cell 2</td><td>row 3 cell 3</td></tr>
</tbody>
</table>
3 Comments
mplungjan
@edward Not sure what you mean? If you pass it a row number or ID it will access it regardless of how or when the row was created
You have to modify the style attribute of the element:
// `rowElement` is a reference to the row you want to hide
rowElement.style.display = 'none';
Comments
This vanilla JS solution works (http://jsfiddle.net/C5g8U/3/):
tr = document.getElementsByTagName('tr');
for (var i = 0; i < tr.length; i++) {
if (tr[i].getElementsByTagName('td').length == 3) {
tr[i].style.display = 'none';
}
}
I'm a bit rusty with my vanilla JS, as I use jQuery for things like this, so here's a jQuery solution:
$('#button').click(function() {
$('tr').each(function() {
if ($(this).find('td').length == 3) {
$(this).toggle();
}
});
});
4 Comments
mplungjan
If you have no idea, why posting it as answer. Create a fiddle, test it and post.
mplungjan
It is not toggling and it did not matter that the cell count was 3 or not - see his comment and my edit
Blender
OP said: hide a tr that just happen to have 3 columns and on clicking a button make the row visible again.. I didn't care for the button, but this toggles.
mplungjan
The jQuery does, the plain doesn't.
Give the <tr> an id and then you can hide it with jQuery:
<tr id="sampleRow">
</tr>
$("#button").click(function () {
$("#sampleRow").toggle();
});
Toggle will make it hidden if it is currently visible, and will show it if it is currently hidden.
