Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Help with dynamic select in dynamic table using DOM

Status
Not open for further replies.
nikscrasher

nikscrasher

Programmer
Aug 11, 2003
6
PH
Hi,
I have a table in which rows can be added one by one, dynamically on clicking the 'addrow' button of the various cells in each row, two drop down lists which are to be dynamic drop downs. That is, based on value selected in first drop down shud get populated. I'm encountering problem doing the 'dynamic dropdown' part. I am unable to read the value stored in first drop down using the DOM structure.

Anyway to overcome this?

Here's my code

<script language="JavaScript" type="text/javascript">


function addRowToTable()
{

var jarr = new Array(191);

var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);


var cellEight = row.insertCell(0);
var e8 = document.createElement('select');
e8.setAttribute('name','txtRow' + iteration + '7');
e8.setAttribute('size','1');
//e8.setAttribute('onchange',valueIs);
cellEight.appendChild(e8);
var e81 = document.createElement('option');
/////////////////////////////////////////
// HARDCODING THE DROP DOWN OPTIONS
////////////////////////////////////////
e81.innerText = '-Select -';
e8.appendChild(e81);
var e81 = document.createElement('option');
e81.innerText = 'A';
e8.appendChild(e81);
var e81 = document.createElement('option');
e81.innerText = 'B';
e8.appendChild(e81);
var e81 = document.createElement('option');
e81.innerText = 'C';
e8.appendChild(e81);


var cellNine = row.insertCell(1);
var e9 = document.createElement('select');
e9.setAttribute('name','txtRow' + iteration + '8');
e9.setAttribute('size','1');
cellNine.appendChild(e9);
var e91 = document.createElement('option');
////////////////////////////////////////////
//HARDCODING THE DROP DOWN OPTIONS
////////////////////////////////////////////
e91.innerText = '-Select-';
e9.appendChild(e91);
var e91 = document.createElement('option');
e91.innerText = '10';
e9.appendChild(e91);
var e91 = document.createElement('option');
e91.innerText = '20';
e9.appendChild(e91);
var e91 = document.createElement('option');
e91.innerText = '30';
e9.appendChild(e91);
e9.style.backgroundColor = 'beige';



}


</script>
</HEAD>

<BODY BGCOLOR="#EfEECB" >
<form name="myform" action="" method="post">

<input type="button" value="Add a new row" onclick="addRowToTable();" />

<BR><BR>
<table border="0" id="tblSample" align="center">
<thead><tr>
<TD ALIGN='CENTER'>Test A</TD>
<TD ALIGN='CENTER'>Test B</TD>
</thead></tr>
</table>



<BR><BR>
<P>
<input type="hidden" name="count" value ="">
</P>
</form>
</BODY>
</HTML>


 
Sort by date Sort by votes
simple - give your select an id and reference it using document.getElementById()


-jeff
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big
 
Upvote 0 Downvote
Sir,
Thank you for answering my question, but how can i do this?in my previous code there's already an id which is iteration for that select?

Please help me doing this..


Thank you.
 
Upvote 0 Downvote
you need to set an id attrubute for the select element, not just a name

e8.setAttribute('[highlight]id[/highlight]','txtRow' + iteration + '7');

then you can access the select list by its id

-jeff
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big
 
Upvote 0 Downvote
If the question is the op's shown intention, but failed and hence the question,
>[tt] //e8.setAttribute('onchange',valueIs);[/tt]
then the resolution is this.

[1] You have to assign a value to the option as well. For each option created before append, add the appropriate line
[tt]e81.value="a"; //or "b", "c" etc[/tt]
[2] The setAttribute in question can be this.
[tt]e8.setAttribute("onchange",function(){valueIs(this)});[/tt]
[3] Then add the function valueIs.
[tt]function valueIs(obj) {
alert(obj.value); //illustration only
}[/tt]

It is _very_ important to note that the whole realization is for ie only(such as e81.innerText, and setAttribute for event handler). It won't do without further twist for ff/nn.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
638
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
664
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
598
coldbohemia
coldbohemia
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
720
xwb
xwb
TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
584
TheLazyPig
TheLazyPig

Part and Inventory Search

Sponsor

Back
Top