PDA

View Full Version : JS Drop-down Add Table Row

superjoepsu
05-12-2008, 05:09 PM
I've searched these forums and spent some time on Google, but can't seem to find a direct solution to what I am trying to achieve. Basically I have a drop-down menu that should add/remove a table row with HTML form elements based upon selection criteria. The caveat to this is that I need to have control over where the row appears, rather than automatically appended to the end.

I found an example on this site that almost does what I need it to do. However, I need to generate the entire row, which doesn't seem to work nicely with the span tag in the example. The only way I can get it to semi-do what I need is by actually creating that row in the HTML and dropping the <span> tags in the <td> cells, but only populating it based upon drop-down selection criteria. This creates a visual problem as the row still shows up in the browser.

Also, this script doesn't remove the added row if you go back to the default selection. And does anybody know why IE7 and Safari use the excess padding in that table cell when I use the <form> tag? FF seems to work fine with it.

Here is my current working code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function writebox(form){
if(form.menu1.value=="1"){
document.getElementById('thebox1').innerHTML='Option 1a';
document.getElementById('thebox2').innerHTML='Option 1b';
}
else if(form.menu1.value=="2"){
document.getElementById('thebox1').innerHTML='Option 2a';
document.getElementById('thebox2').innerHTML='Option 2b';
}
else if(form.menu1.value=="3"){
document.getElementById('thebox1').innerHTML='Option 3a';
document.getElementById('thebox2').innerHTML='Option 3b';
}
}
//-->
</script>
</head>

<body>

<table width="50%" border="1" cellpadding="0" align="center">
<tr>
<td width="50%">
<form>
<select name="menu1" onchange="writebox(this.form)">
<option value="none" selected></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</td>
<td width="50%">Cell 1</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 1</td>
</tr>
<tr>
<td><span id="thebox1"></span></td>
<td><span id="thebox2"></span></td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 1</td>
</tr>
</table>

</body>
</html>

Thank you!
shyam
05-12-2008, 06:45 PM
function writebox(form) {
var row = form.menu1.value;
var nr = document.getElementById('newRow');
if ( !!nr ) {
nr = nr.parentNode.removeChild(nr);
}
if ( row.length > 0 && !isNaN(row) ) {
row = parseInt(form.menu1.value, 10);
var hook = document.getElementById('targetTable').getElementsByTagName('tr')[row];
nr = !!nr ? nr : hook.cloneNode(true);
nr.id = 'newRow';
nr.getElementsByTagName('td')[0].firstChild.nodeValue = 'option ' + row + 'a';
nr.getElementsByTagName('td')[1].firstChild.nodeValue = 'option ' + row + 'b';
hook.parentNode.insertBefore(nr, hook.nextSibling);
}
}
window.onload = function() {
var trs = document.getElementById('targetTable').getElementsByTagName('tr');
for ( var i = 0, l = trs.length; i < l; i++ ) {
trs[i].id = 'row' + i;
} // endfor i
}

<table id="targetTable" width="50%" border="1" cellpadding="0" align="center">...
superjoepsu
05-12-2008, 07:58 PM
thank you shyam! however, i'm not sure that's exactly the solution i am looking for. it looks like that inserts the row based upon the row number, correct? so if it's the fourth option selected from the drop-down, it will appear in the fourth row?

i'm basically just creating a web-form that should only display certain elements/fields/rows depending on which "view" or criteria is selected from the drop-down menu. i'm positioning my cells with logical content next to each other. so for example, if the user selects "foreign cars" from a list, i want to have a row that will display "bmw, mercedes, and audi" next to the american cars row. sometimes i will need multiple fields/rows to appear when selecting a drop-down option positioned in various parts of the page. my initial code allowed me to do that, but for whatever reason wouldn't allow me to insert entire rows.

(and please forgive me, i am an information architect trying to dabble in web design, so a lot of this seems foreign to me. your code looks very impressive, but i'm not sure how to really customize it.)

thanks again!
Arbitrator
05-12-2008, 08:26 PM
i'm basically just creating a web-form that should only display certain elements/fields/rows depending on which "view" or criteria is selected from the drop-down menu. i'm positioning my cells with logical content next to each other. so for example, if the user selects "foreign cars" from a list, i want to have a row that will display "bmw, mercedes, and audi" next to the american cars row. sometimes i will need multiple fields/rows to appear when selecting a drop-down option positioned in various parts of the page. my initial code allowed me to do that, but for whatever reason wouldn't allow me to insert entire rows.Why not create all of the rows initially then hide them via CSS and scripting? Using your current approach is more complex and also makes your form inaccessible when users have scripting disabled.

(and please forgive me, i am an information architect trying to dabble in web design, so a lot of this seems foreign to me. your code looks very impressive, but i'm not sure how to really customize it.)With the exception of window.onload and form.menu1, shyam’s code is W3C DOM‐based. I would suggest learning how to use the W3C DOM instead of using the HTML‐as‐string approach of Microsoft’s proprietary innerHTML property (even if you decide that you prefer the latter); the DOM is more powerful and knowing how to use it will give you a better grasp of how things work.

And, just FYI, the W3C DOM‐based code for the latter piece of code above would be document.getElementsByName("menu1").item(0) or document.getElementsByName("menu1")[0].
superjoepsu
05-12-2008, 09:18 PM
Why not create all of the rows initially then hide them via CSS and scripting? Using your current approach is more complex and also makes your form inaccessible when users have scripting disabled.

With the exception of window.onload and form.menu1, shyam’s code is W3C DOM‐based. I would suggest learning how to use the W3C DOM instead of using the HTML‐as‐string approach of Microsoft’s proprietary innerHTML property (even if you decide that you prefer the latter); the DOM is more powerful and knowing how to use it will give you a better grasp of how things work.

And, just FYI, the W3C DOM‐based code for the latter piece of code above would be document.getElementsByName("menu1").item(0) or document.getElementsByName("menu1")[0].

the scripting/css option sounds exactly like what i am looking for. i just did some research and i can only find examples on how to accomplish hiding a row based upon a button. are you familiar with anyway to accomplish this based upon your drop-down menu selection?

and thank you for the rest of your response as well. it sounds like DOM is something valuable to understand. i will look into it.
superjoepsu
05-12-2008, 09:32 PM
i actually also found this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript hide table row</title>
</head>

<body>
<script type="text/javascript">
function displayRow(){
var row = document.getElementById("captionRow");
if (row.style.display == '') row.style.display = 'none';
else row.style.display = '';
}
</script>

<table width="300" border="1">
<tr id="captionRow"><th>TH-1</th><th>TH-2</th><th>TH-3</th></tr>
<tr><td>cell-11</td><td>cell-12</td><td>cell-13</td></tr>
<tr><td>cell-21</td><td>cell-22</td><td>cell-23</td></tr>
</table>
<p><button onclick="displayRow()" >Show / Hide</button></p>
</body>
</html>

from here: http://www.javascriptf1.com/tutorial/javascript-hide-table-row.html?page=3

that seems to do exactly what i need, only with the button instead of drop-down. some initial playing around with it doesn't seem to allow what i am trying to do. i'm sure there is an easy way to manipulate this, i'm just not that familiar with JS syntax yet to know what it is.