Showing table rows based on user's actions
I wo开发者_开发问答uld like to show some parts of my table only if user has chosen certain radio button, for example:
if (radiobutton value == 'address' {
//show addressrows;
}
else {
//show other
}
I'm new to Javascript so I don't know where to start.
You'll want to hook the change or click event of the radio button element. Then you'll want to access the table row elements and set their display style property to "none" (hide) or "" (show).
Some notes:
- To access an element, you might use
document.getElementById, orgetElementsByTagName, or use those to find some base element (the table, perhaps) and navigate viachildNodesand other such properties of theNodeandElementinterfaces. - To attach an event handlers, you probably want
addEventListener(attachEventon IE). (Although you can just useelement.onclick = function() { ... };and similar, that's a very limited approach.)
Here are some examples, first using the DOM methods above directly, then looking at how libraries can help you out.
Example:
HTML:
<body>
<label><input type='radio' name='rdoOptions' value='on' checked>On</label>
<label><input type='radio' name='rdoOptions' value='off'>Off</label>
<table id='theTable'>
<tbody>
<tr class='foo'>
<td>This cell is in a 'foo' row</td>
</tr>
<tr>
<td>This is not</td>
</tr>
<tr>
<td>This is not</td>
</tr>
<tr class='foo'>
<td>This cell is in another 'foo' row</td>
</tr>
<tr class='foo'>
<td>This cell is in a 'foo' row</td>
</tr>
<tr>
<td>This is not</td>
</tr>
</tbody>
</table>
<script>(...the code below...)</script>
</body>
JavaScript:
// This code is inserted where you see %code% in the
// HTML panel on the right. Note that that's just before
// the closing body tag -- that's important, because our
// `init` function assumes the radio buttons already exist
// in the DOM, so this code must be *after* them in the
// markup.
(function() {
init();
function init()
{
var list, index, elm;
// Find the buttons and attach handlers to them
list = document.getElementsByTagName('input');
for (index = 0; index < list.length; ++index) {
elm = list[index];
if (elm.type === 'radio' && elm.name === 'rdoOptions') {
hookEvent(elm, 'click', radioClickHandler);
}
}
}
function radioClickHandler(event) {
var showFlag;
// On IE, the event isn't passed as an argument, it's a global
// property of `window`, so we handle that with the curiously-
// powerful || operator. More about ||:
// http://blog.niftysnippets.org/2008/02/javascripts-curiously-powerful-or.html
event = event || window.event;
// In an event handler, `this` will refer to the element the
// handler is attached to
// Show if the button clicked was "on", hide otherwise
showOrHideRows(this.value === 'on');
}
function showOrHideRows(showFlag) {
var displayValue, table, rows, index, row;
// Determine our display value
displayValue = showFlag ? "" : "none";
// Get the table, then find all the rows in it
table = document.getElementById('theTable');
rows = table.getElementsByTagName('tr');
// Loop through them, showing or hiding
for (index = 0; index < rows.length; ++index) {
// Get this row
row = rows[index];
// Is it a 'foo' row?
// Note: This check only works if 'foo' is the ONLY class
// on the row, which isn't very realistic
if (row.className === 'foo') {
// Yes, show or hide it by assigning our display value
row.style.display = displayValue;
}
}
}
function hookEvent(element, eventName, handler) {
if (element.addEventListener) {
element.addEventListener(eventName, handler, false);
}
else if (element.attachEvent) {
element.attachEvent("on" + eventName, handler);
}
else {
element["on" + eventName] = handler;
}
}
})();
Live copy
Off-topic: This stuff can be made a lot easier using a library like jQuery, Prototype, YUI, Closure, or any of several others. They abstract away a lot of browser differences and provide a lot of additional functionality.
For instance, here's the JavaScript for the above using JQuery:
jQuery(function($) {
// Find our radio buttons and hook up the handler
$('input[type=radio][name=rdoOptions]').click(handleRadioClick);
// Our radio button click handler
function handleRadioClick(event) {
// Show if the button clicked was "on", hide otherwise
showOrHideRows(this.value === 'on');
}
// Show or hide rows
function showOrHideRows(showFlag) {
var rows = $("#theTable tr.foo");
if (showFlag) {
rows.show();
}
else {
rows.hide();
}
}
});
Live copy
...and even that is fairly verbose because I wanted to be clear what I was doing. It can get downright condensed:
jQuery(function($) {
$('input[type=radio][name=rdoOptions][value=on]').click(function() {
$("#theTable tr.foo").show();
});
$('input[type=radio][name=rdoOptions][value=off]').click(function() {
$("#theTable tr.foo").hide();
});
});
Live copy
...even cryptic:
jQuery(function($) {
$('input[type=radio][name=rdoOptions]').click(function() {
$("#theTable tr.foo")[this.value === 'on' ? 'show' : 'hide']();
});
});
Live copy
(That works because you can access JavaScript properties using ['name'], and functions are proeprties, and so obj.show() and obj['show']() mean the same thing. So it uses a ternary operator [condition ? trueValue : falseValue] to select either "show" or "hide" as the name of the function to call, then call it. But that's really cryptic.)
You can set the id attribute of your table rows and hide them like this:
<table>
<tr id="address"></tr>
<tr id="other"></tr>
</table>
<script>
if (radiobutton.value == 'address' {
document.getElementById("address").style.display = "";
document.getElementById("other").style.display = "none";
}
else {
document.getElementById("address").style.display = "none"; //hide the row
document.getElementById("other").style.display = ""; //show the row
}
</script>
加载中,请稍侯......
精彩评论