Hide or display a button according to row count of a table
Question
i have a HTML table and a button send.
First of all the send button must have this style: style.display="none" .
But if the table has at least one row the button should be displayed ( block / inline );
I still have no idea how to relate between the table and the button. I try to use JavaScript but i should think about a function and I don't found any of it to apply at type table. Thinking about CSS still also hard since I cannot find a relation between the table and the button.
4 answers
solution1
1 2010-06-16 13:48:31
You'll need to toggle the visibility of the button when the table is adjusted. Since that can be done in many ways, there's not way to know what is right for you.
For simplicity, give jQuery a try . I will make accessing the elements and modifying the styles much easier than 'vanilla' JavaScript. Also be sure that if you're updating the table after page load (via JavaScript), that you use this whenever you do that.
$(document).ready(function(){
if ($("#table > tr").length > 0)
$("#button").show();
else
$("#button").hide();
});
I hope that helps.
solution2
1 2010-06-16 14:00:10
A plain, non-jquery equivalent of Lance May's answer would be something like this:
var button = document.getElementById('the-button');
if (document.getElementById('the-table').getElementsByTagName('tr').length > 0){
button.style.display = 'block';
}else{
button.style.display = 'none';
}
solution3
0 2010-06-16 13:58:17
If the Button lies inside a TD which it most def. does then simply access it via:
td input {
display: none;
}
You even can define the stlye with a advanced selector like this in CSS3
input[type="button"] {
display: none;
}
I wrote about this at my blog .
With JavaScript you can grab the input field with
var myInput = document.getElementsByTagName('input');
myInput.style.display = none;
To select your input inside a tr, use something like
myTableRow.childNodes[0];
solution4
0 2010-06-18 06:07:51
<html>
<head>
<title>whatever</title>
<style type="text/css">
.hidden {
display: none;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
var $t = $('table');
var $h = $t.find('thead');
var $b = $t.find('tbody');
var $s = $('#send');
// the "add" button appends a new row
// into the table body; if the body
// transitions from empty, the "send"
// button is displayed
$('#add').bind('click', function ()
{
$b.append(newRow());
if (1 == $b.find('tr').length)
$s.removeClass('hidden');
});
// the remove button removes the last
// row from the table body (if there's
// any); if the body transitions to
// empty, the "send" button is hidden
$('#remove').bind('click', function ()
{
$b.find('tr:last').remove();
if (0 == $b.find('tr').length)
$s.addClass('hidden');
});
// generates a table row; this demo
// impl. just copies the heading row
var newRow = function ()
{
return $h.find('tr').clone();
};
});
</script>
</head>
<body>
<table border="1">
<thead>
<tr><td>foo</td><td>bar</td></tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" id="add" value="add" />
<input type="button" id="remove" value="remove" />
<input type="button" id="send" value="send" class="hidden" />
</body>
</html>
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.