By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,688 Members | 1,900 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,688 IT Pros & Developers. It's quick & easy.

naming cloned rows in a table javascript

P: 6
Hi friends,

I am strugging with this problem.I don't know much javascript. Please you gurus can help me.

My problem is I cloned the frist row in a table.after cloning i want to change the names of the cloned cells.In a row i have two select button and three text boxes.

My code is

Expand|Select|Wrap|Line Numbers
  1. tabBody = document.getElementById('tblSample').firstChild;
  2.    newRow = tabBody.appendChild(tabBody.firstChild.nextSibling.cloneNode(true));
  3.    rowNum = rowNum + 1;
Please help me

Thank you in advance
priya
Oct 21 '07 #1
Share this Question
Share on Google+
11 Replies


gits
Expert Mod 5K+
P: 5,390
hi ...

welcome to TSDN ...

i assume you want to rename the textboxes and buttons in your cloned row? ... for that you have to loop through your cloned row. do this before you append it ... use a variable cloned_row for it. now you can do something like the following:

Expand|Select|Wrap|Line Numbers
  1. var cloned_cells = cloned_row.getElementsByTagName('td');
  2.  
  3. for (var i = 0; i < cloned_cells.length; i++) {
  4.     var cell = cloned_cells[i];
  5.     // here you may retrieve and manipulate the nodes inside 
  6.     // of every cell
  7. }
  8.  
after that ... append your row.

kind regards
Oct 21 '07 #2

gits
Expert Mod 5K+
P: 5,390
hi ...

ok ... have a look at the following adapted code, that should rename all textboxes (type = "text") and buttons (type = "button") ...

Expand|Select|Wrap|Line Numbers
  1. var counter = 0;
  2. var rowNum = 0;
  3.  
  4. function addRowToTable() {
  5.     counter++;
  6.  
  7.     var tabBody = document.getElementById('tblSample').firstChild;
  8.     var cloned_row = tabBody.firstChild.nextSibling.cloneNode(true);
  9.     var cloned_cells = cloned_row.getElementsByTagName('td');
  10.  
  11.     for (var i = 0; i < cloned_cells.length; i++) {
  12.         var cell = cloned_cells[i];
  13.         var node_suffix = '_sfx_' + i;
  14.  
  15.         var t = cell.getElementsByTagName('input');
  16.  
  17.         for (var j = 0; j < t.length; j++) {
  18.             var input_node = t[j];
  19.  
  20.             if (input_node.type in { 'text': 1, 'button': 1 }) {
  21.                 input_node.name += node_suffix;
  22.             }
  23.         }
  24.     }
  25.  
  26.     tabBody.appendChild(cloned_row);
  27.     rowNum++;
  28. }
  29.  
kind regards
Oct 21 '07 #3

P: 6
Hi Gits,

Thank you for your valuable reply.In my table I am having two select box and three text boxes.I am attaching my program with this.Please help me...

Expand|Select|Wrap|Line Numbers
  1.  
  2. <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
  3.     pageEncoding="ISO-8859-1"%>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  5.  
  6. <%@page import="java.util.*"%>
  7.  
  8. <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">
  9. <head>
  10. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  11. <link rel="File-List" href="testIndex_files/filelist.xml">
  12.  
  13. <title>Insert title here</title>
  14. <!--[if !mso]>
  15. <style>
  16. v\:*         { behavior: url(#default#VML) }
  17. o\:*         { behavior: url(#default#VML) }
  18. .shape       { behavior: url(#default#VML) }
  19. </style>
  20. <![endif]--><!--[if gte mso 9]>
  21. <xml><o:shapedefaults v:ext="edit" spidmax="1027"/>
  22. </xml><![endif]-->
  23. </head>
  24. <body>
  25.  
  26. <p>&nbsp;</p>
  27. <p align="center"><b><font size="7" face="Monotype Corsiva">New Order</font></b></p>
  28. <form method="get" action="http://localhost:7001/loginProcess/jspPages/tableaddrow_nw.jsp">
  29.   <p align="center">&nbsp;</p>
  30.   <fieldset style="padding: 2">
  31.   <legend>Purchase Order Header</legend>
  32. &nbsp;<div align="center">
  33.     <center>
  34.     <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="75%" id="AutoNumber1">
  35.     <tr>
  36.       <td width="29%" align="right">Purchase Order Number:</td>
  37.       <td width="21%"><input type="text" name="pono" size="20"></td>
  38.       <td width="25%" align="right">P O Date:</td>
  39.       <td width="25%"><input type="text" name="podate" size="20"></td>
  40.     </tr>
  41.     <tr>
  42.       <td width="29%" align="right">Supplier Code:</td>
  43.       <td width="21%"><select size="1" name="D9">
  44.         <option> Supp101</option>
  45.         <option>Supp102</option>
  46.         <option> Supp103</option>
  47.         </select></td>
  48.       <td width="25%" align="right">Reference No:</td>
  49.       <td width="25%"><input type="text" name="refno" size="20"></td>
  50.     </tr>
  51.   </table>
  52.     </center>
  53.   </div>
  54.   <p>&nbsp;</p>
  55.   </fieldset><p align="center"><!--[if gte vml 1]><v:line id="_x0000_s1025"
  56.  style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:1'
  57.  from="8.25pt,247.5pt" to="747pt,248.25pt"/><![endif]--><![if !vml]><span
  58. style='mso-ignore:vglayout;position:absolute;z-index:1;left:10px;top:329px;
  59. width:987px;height:3px'><img width=987 height=3
  60. src="testIndex_files/image001.gif" v:shapes="_x0000_s1025"></span><![endif]>&nbsp;
  61.   <p align="center">&nbsp;<p>
  62. <input type="button" value="Add" onclick="addRowToTable();" />
  63. <input type="button" value="Remove" onclick="removeRowFromTable();" />
  64. <input type="button" value="saveorder" onclick="testing.jsp" />
  65. </p>
  66. <table border="1" id="tblSample" width="774">
  67.   <tr>
  68.       <td width="165" align="center"><b>Model Code</b></td>
  69.       <td width="148" align="center"><b>Color code</b></td>
  70.       <td width="148" align="center"><b>Order Quantity </b> </td>
  71.       <td width="148" align="center"><b>Production Year</b></td>
  72.       <td width="148" align="center"><b>Production Month</b></td>
  73.     </tr>
  74.   <tr>
  75.    <td width="165"><select name="model"> 
  76.             <option> Model1</option>
  77.            <option>Mode22</option>
  78.            <option> Mode33</option>
  79.          </select></td>
  80.  
  81.      <td width="148"><select name="color">
  82.       <option>red</option>
  83.       <option>blue</option>
  84.       <option>black</option>
  85.          </select></td>
  86.       <td width="148" align="center"><input type="text" name="ord_qty" size="20"></td>
  87.       <td width="148" align="center"><input type="text" name="prod_yr" size="20"></td>
  88.       <td width="148" align="center"><input type="text" name="prod_mth" size="20"></td>
  89.     </tr>
  90. </table>
  91.   <p align="center">&nbsp;</p>
  92.   <p align="center">&nbsp;</p>
  93.   <p align="center">
  94.   <input type="submit" value="Save Order" name="saveorder"/>
  95.   <input type="reset" value="Cancel Now" name="cancel"></p>
  96. </form>
  97.  
  98. <script type="text/javascript" src="../javascript/windowOpen.js"></script>
  99.  
  100. <script language="JavaScript" type="text/javascript">
  101. <!--
  102. var counter = 0;
  103. var rowNum =0;
  104. function addRowToTable()
  105. {
  106.   counter++;
  107.  
  108.    tabBody = document.getElementById('tblSample').firstChild;
  109.    newRow = tabBody.appendChild(tabBody.firstChild.nextSibling.cloneNode(true));
  110.    var cloned_cells = cloned_row.getElementsByTagName('td');
  111.  
  112.     for (var i = 0; i < cloned_cells.length; i++) {
  113.        //The problem area
  114.     }
  115.  
  116. }
  117.  
  118.  
  119.    }
  120.  
  121.  
  122. function removeRowFromTable()
  123. {
  124.   var tbl = document.getElementById('tblSample');
  125.   var lastRow = tbl.rows.length;
  126.   if (lastRow > 2) tbl.deleteRow(lastRow - 1);
  127. }
  128. </script>
  129.  
  130. <%!
  131. String suppVal;
  132. String str1;
  133. %>
  134. &nbsp;</body></html>
  135.  
  136.  
Once again thank you.
Oct 21 '07 #4

gits
Expert Mod 5K+
P: 5,390
ok ... i just gave the code for your addRowToTable() function above ... simply use that ...

now i overlooked the fact that you didn't have buttons but select-boxes ... i was confused by the term select-buttons ... so we have to do the following:

Expand|Select|Wrap|Line Numbers
  1. var counter = 0;
  2. var rowNum = 0;
  3.  
  4. function addRowToTable() {
  5.     counter++;
  6.  
  7.     var tabBody = document.getElementById('tblSample').firstChild;
  8.     var cloned_row = tabBody.firstChild.nextSibling.cloneNode(true);
  9.     var cloned_cells = cloned_row.getElementsByTagName('td');
  10.  
  11.     for (var i = 0; i < cloned_cells.length; i++) {
  12.         var cell = cloned_cells[i];
  13.         var node_suffix = '_sfx_' + i;
  14.  
  15.         var t = cell.getElementsByTagName('input');
  16.  
  17.         for (var j = 0; j < t.length; j++) {
  18.             var input_node = t[j];
  19.  
  20.             if (input_node.type == 'text') {
  21.                 input_node.name += node_suffix;
  22.             }
  23.         }
  24.  
  25.         var s = cell.getElementsByTagName('select');
  26.  
  27.         for (j = 0; j < s.length; j++) {
  28.             var select_node = s[j];
  29.  
  30.             select_node.name += node_suffix;
  31.         }
  32.     }
  33.  
  34.     tabBody.appendChild(cloned_row);
  35.     rowNum++;
  36. }
  37.  
kind regards
Oct 21 '07 #5

P: 6
Once again thanks a lot git.....

After trying the above code each colum name in a row is changing and rows not...

output is this.

pono=101
podate=12%2F10.1998
D9=Supp101
refno=1001

model=Model1
color=red
ord_qty=10
prod_yr=1998
prod_mth=12

model_sfx_0=Mode22
color_sfx_1=blue
ord_qty_sfx_2=11
prod_yr_sfx_3=1999
prod_mth_sfx_4=13

model_sfx_0=Mode33
color_sfx_1=black
ord_qty_sfx_2=12
prod_yr_sfx_3=2000
prod_mth_sfx_4=14

saveorder=Save+Order

please help me.Sorry for the distrubance.
Oct 21 '07 #6

gits
Expert Mod 5K+
P: 5,390
yes ... :) it was an example ... so could you please try to explain in detail what and to what you want to have it changed?

kind regards
Oct 21 '07 #7

P: 6
I want to take the values from this page and store it in a database using EJB .For that i want to take the values in a JSP page to pass ejb.

If the names are different i can take the values in a jsp page using request.getParameter("name of the box");

Actually I tried without using clone method but i want to display the values in the combo boxes (model and color) from the table.So i failed in that procedure also.Then i tried with clone


once again thank your for your valuable reply
Oct 21 '07 #8

gits
Expert Mod 5K+
P: 5,390
so the following little adjustment should do the trick?

Expand|Select|Wrap|Line Numbers
  1. function addRowToTable() {
  2.     var tabBody = document.getElementById('tblSample').firstChild;
  3.     var cloned_row = tabBody.firstChild.nextSibling.cloneNode(true);
  4.     var cloned_cells = cloned_row.getElementsByTagName('td');
  5.     var node_suffix = '_sfx_' + rowNum;
  6.  
  7.     for (var i = 0; i < cloned_cells.length; i++) {
  8.         var cell = cloned_cells[i];
  9.  
  10.         var t = cell.getElementsByTagName('input');
  11.  
  12.         for (var j = 0; j < t.length; j++) {
  13.             var input_node = t[j];
  14.  
  15.             if (input_node.type == 'text') {
  16.                 input_node.name += node_suffix;
  17.             }
  18.         }
  19.  
  20.         var s = cell.getElementsByTagName('select');
  21.  
  22.         for (j = 0; j < s.length; j++) {
  23.             var select_node = s[j];
  24.  
  25.             select_node.name += node_suffix;
  26.         }
  27.     }
  28.  
  29.     tabBody.appendChild(cloned_row);
  30.     rowNum++;
  31. }
  32.  
kind regards
Oct 21 '07 #9

P: 6
Hi gits


My problem is almost solved.Thank you

I made a small change in the code

Expand|Select|Wrap|Line Numbers
  1.    var tabBody = document.getElementById('tblSample').firstChild;
  2.     var cloned_row = tabBody.firstChild.nextSibling.cloneNode(true);
  3.     var cloned_cells = cloned_row.getElementsByTagName('td');
  4.     var rowcount =tblSample.rows.length;
  5.     for (var i = 0; i < cloned_cells.length; i++) {
  6.         var cell = cloned_cells[i];
  7.         var node_suffix = rowcount ;
  8.  
Oct 21 '07 #10

gits
Expert Mod 5K+
P: 5,390
glad to hear that ... its the same solution ;) ... post back to the forum anytime you have more questions ...

kind regards
Oct 21 '07 #11

P: 6
ok once again thank you

bye
Oct 21 '07 #12

Post your reply

Sign in to post your reply or Sign up for a free account.