dynamic table creation

@papSep 24.2008

hi vwphillips,
i have a problem with the dynamic table rows. i want to get the values of each component (like select box, textbox and checkbox) from each row after the user adding the rows to the table dynamically. for example if the user added three rows i want to get the values of particular selected option and corresponding text field value of 3 rows.can u tell me how to write a function for this?

to post a comment

JavaScript

8 Comments(s) _↴

@KorSep 24.2008 — #can you show us the code you have used to add the rows? And give us more information. To get those values [I]when[/I]? Following which [I]action/even[/I]t?

@papauthorSep 24.2008 — #the script function and the corresponding html code is as follows.

the code is working fine and if we click the add button it will add the row and delte button it will delete the rows dynamically.

now what i want to do is after all the user adding or deleting the rows i want to get the values from each row(in a row the selected option value + corresponding text field value) and populate it as a list or a common string by using some delimiters so that the values could be passed to my action class of struts for further processing..

function Add(id){

var table=document.getElementById(id);

var tbody=table.getElementsByTagName('TBODY')[0];

var newrow=tbody.appendChild(table.rows[0].cloneNode(true));

newrow.getElementsByTagName('SELECT')[0].selectedIndex=0;

newrow.getElementsByTagName('INPUT')[0].value='';

newrow.getElementsByTagName('INPUT')[1].checked=false;

}

function Remove(id){

var table=document.getElementById(id);

var rows=table.rows;

for (var remove=[],zxc0=0;zxc0<rows.length;zxc0++){

var cb=rows[zxc0].getElementsByTagName('INPUT')[1];

if (cb&&cb.checked){

remove.push(rows[zxc0]);

}

}

if (remove.length==rows.length) return alert('Leave One');

for (var zxc1=0;zxc1<remove.length;zxc1++){

remove[zxc1].parentNode.removeChild(remove[zxc1]);

}

}

function Duplicate(obj){

var objs=document.getElementsByName(obj.name);

for (var zxc0=0;zxc0<objs.length;zxc0++){

if (objs[zxc0]!=obj){

if (obj.tagName=='INPUT'&&objs[zxc0].value!=''&&objs[zxc0].value==obj.value){

alert('No Duplicate Values');

obj.value='';

break;

}

else if (obj.tagName=='SELECT'&&objs[zxc0].selectedIndex!=0&&objs[zxc0].selectedIndex==obj.selectedIndex){

alert('No Duplicate Selects');

obj.selectedIndex=0;

break;

}

}

}

}

<table id="tst" border="1" width="230">

<tbody>

<tr>

<td>

<select size="1" onchange="Duplicate(this);">

<option>Select</option>

<option value="0">0</option>

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

<option value="8">8</option>

<option value="9">9</option>

</select>

 <input id="text"size="15" onblur="Duplicate(this);"/>
   <input type="checkbox" " />
   </td>
   </tr>
   </tbody>
   </table>
 
 
   <input type="button" name="" value="Assign E164" onclick="Add('tst');"/>
   <input type="button" name="" value="Clear E164" onclick="Remove('tst','bb[]');"/>

@vwphillipsSep 24.2008 — #see

http://www.webdeveloper.com/forum/showthread.php?t=191270

I will look at this a soon as I have time

@vwphillipsSep 24.2008 — #answered on main post

@papauthorSep 24.2008 — #hi,

i dont want to put a separate button like create string and onclicking that i need to fetch the values of the rows.

is there any way to get the values of selected option from select box and text box value while creating the rows or deleting the rows itself. like after adding a row that values should be in some variables and if u delete the row that values should also be deleted from the array like that...

there should not be separate event to generate a string...

can u tell me is it possible?

thanks,

pap

@vwphillipsSep 24.2008 — #

[CODE]<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 function Add(id,nu){
 var table=document.getElementById(id);
 var tbody=table.getElementsByTagName('TBODY')[0];
 var newrow=tbody.appendChild(tbody.getElementsByTagName('TR')[0].cloneNode
 (true));
 newrow.getElementsByTagName('SELECT')[0].selectedIndex=0;
 newrow.getElementsByTagName('INPUT')[0].value='';
 newrow.getElementsByTagName('INPUT')[1].checked=false;
 CreateString();
 }
 
 function Remove(id,nme){
 var table=document.getElementById(id);
 var rows=table.rows;
 for (var remove=[],zxc0=0;zxc0<rows.length;zxc0++){
 var cb=rows[zxc0].getElementsByTagName('INPUT')[1];
 if (cb&&cb.name==nme&&cb.checked){
 remove.push(rows[zxc0]);
 }
 }
 if (remove.length==rows.length) return alert('Leave One');
 for (var zxc1=0;zxc1<remove.length;zxc1++){
 remove[zxc1].parentNode.removeChild(remove[zxc1]);
 }
 CreateString();
 }
 
 function Duplicate(obj,tb,index){
 var objs=document.getElementsByName(obj.name);
 for (var zxc0=0;zxc0<objs.length;zxc0++){
 if (objs[zxc0]!=obj){
 if (obj.tagName=='INPUT'&&objs[zxc0].value!=''&&objs[zxc0].value==obj.value){
 alert('No Duplicate Values');
 obj.value='';
 break;
 }
 else if (obj.tagName=='SELECT'&&objs[zxc0].selectedIndex!=0&&objs[zxc0].selectedIndex==obj.selectedIndex){
 alert('No Duplicate Selects');
 obj.selectedIndex=0;
 break;
 }
 }
 }
 index=index||0;
 var tbs=document.getElementsByName(tb);
 for (var zxc1=0;zxc1<objs.length;zxc1++){
 if (objs[zxc1]==obj&&tbs[zxc1]){
 if (tbs[zxc1].getAttribute('disabled')) tbs[zxc1].removeAttribute('disabled');
 if (obj.selectedIndex==index){
 tbs[zxc1].setAttribute('disabled','disabled');
 }
 }
 }
 CreateString();
 }
 var string='';
 
 function CreateString(){
 var sels=document.getElementsByName('sel[]');
 var tbs=document.getElementsByName('txt[]');
 var cbs=document.getElementsByName('bb[]');
 string='';
 for (var zxc0=0;zxc0<sels.length;zxc0++){
 string+=sels[zxc0].selectedIndex+'(zxc)'+tbs[zxc0].value+'(cxz)';
 }
 document.Show.Show0.value=string;
 
 }
 /*]]>*/
 </script>
 </head>
 
 <body>
 <table>
 <tbody>
 <tr>
 <td>
 
 <table id="tst" border="1" width="230">
 <tbody>
 <tr>
 <td>
 <select name="sel[]" id="option" size="1"  onchange="Duplicate(this,'txt[]',2);">
 <option>Select</option>
 <option value="0">0</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="0">3</option>
 <option value="0">4</option>
 
 <option value="0">5</option>
 <option value="0">6</option>
 <option value="0">7</option>
 <option value="0">8</option>
 <option value="0">9</option>
 </select>
 
 <input name="txt[]" id="text"size="15" onblur="Duplicate(this);"/>
 <input type="checkbox" name="bb[]" id="check" />
 </td>
 </tr>
 </tbody>
 
 </table>
 </td>
 </tr>
 <tr>
 <td>
 <input type="button" name="" value="Add" onclick="Add('tst');"/>
 <input type="button" name="" value="Remove" onclick="Remove('tst','bb[]');"/>
 <input type="button" name="" value="Create String" onclick="CreateString();"/>
 </td>
 </tr>
 </tbody>
 </table>
 <br>&nbsp;<br>
 </center>
 <script> vic=0; </script>
 <form name=Show id=Show style="position:absolute;visibility:visible;top:420px;left:0px;" >
 <input size=100 name=Show0 >
 <input size=10 name=Show1 >
 <input size=10 name=Show2 >
 <input size=10 name=Show3 >
 <input size=10 name=Show4 >
 <input size=10 name=Show5 >
 <input size=10 name=Show6 >
 <input size=10 name=Show7 >
 <input size=10 name=Show8 >
 <input size=10 name=Show9 ><br>
 <textarea name=TA rows=1 cols=100 ></textarea>
 </form>
 
 </body>
 
 </html>[/CODE]

the document.Show is for testing

@papauthorSep 25.2008 — #hi vwphillips,

according to my script by default one row will be there in my dynamic table and the user clicks the add button it will add arow with new select box,text box, and checkbox. so if the user performs a click event only ican get the values of select option and text box value to form a string.. so i cannot get the values of lastrow because there would not be any click event.example if 3 rows are present in the jsp page means there should be 2 click events only.. and according to ur createstring function it will get the 2 row values and not the third row.. because the user can enter the values of the row and he can submit the form. i want to get the values of all rows from the table. how to do that can u tell me?

@vwphillipsSep 25.2008 — #the function 'CreateString' creates the string.

This is called on add, delete, select on change and text box onblur and records select indexes and textboxs when called including the last added row.

Also in #JavaScript _↴

Input Fields With Unique Values Sending data within tables Having problems with finishing up a hangman game.

Success!

Help @pap spread the word by sharing this article on Twitter...

Tweet This

dynamic table creation

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

dynamic table creation

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴