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

How to access dynamic table rows and concatinate them in textarea?

P: 1
Here is my code:

1. Normally I can concatenate the given values in text-area

2. After adding the new row I am not able to do that
can any one please help me to fix this issue!!

Thanks

Code:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html> <html> <head> <style>
  2. table, td {
  3.     border: 1px solid black;
  4. }
  5. </style> </head> <body> <p>Click the button to add a new row at the first position of the table and then add cells and content.</p> <table id="myTable"> <th> Owner </th> <th> Receiver</th> <th> agreement</th> <th> Access</th> <th> Permissions</th> <tr> <td><input type="text" id="Owner"  onkeyup="generateEOS()"/></td> <td><input type="text" id="Receiver" onkeyup="generateEOS()"  /></td> <td><input type="text" id="Options"   onkeyup="generateEOS()" /></td> <td><select onchange="ChooseContact(this)"> <Option>Access</Option> <option>R</option> <option>W</option> <option>B</option> <option>N</option> </select></td> <td><input type="text" id="Access" onkeyup="generateEOS()" /></td> </tr> </table> <br> <div align="Center"> <button onclick="myFunction()">Add new row</button> <textarea id="preview" rows="20" cols="70">
Dec 24 '14 #1
Share this Question
Share on Google+
1 Reply


Claus Mygind
100+
P: 571
To access a dynamic row or table cell, give each node <td> a unique id like this.
Expand|Select|Wrap|Line Numbers
  1. function addRow()
  2. {
  3.   // when adding a row get the new length of the table
  4.   var x = document.getElementById("myTable").rows.length;
  5.   // then add that row number to the id of the row
  6.  
  7. }
  8.  
Another method that does not require a unique id would be to walk the document tree nodes, filter out the nodes you want to get information from while skipping the rest. This could be done by setting the root node to your table, then stopping at every <td> node or if only specific <td> nodes you can give them a similar 'name' like <td name='getInfoHere">. It's not hard to do but it take a little to wrap your head around the code to see what is happening. At this point of course I'm still guessing at what you are trying to do.

Expand|Select|Wrap|Line Numbers
  1. function getLikeElements(tagName, attrName, attrValue) {
  2.     var startSet;
  3.     var endSet = new Array();
  4.     if (tagName) {
  5.         startSet = document.getElementsByTagName(tagName);    
  6.     } else {
  7.         startSet = (document.all) ? document.all : document.getElementsByTagName("*");
  8.     }
  9.     if (attrName) {
  10.         for (var i = 0; i < startSet.length; i++) {
  11.             if (startSet[i].getAttribute(attrName)) {
  12.                 if (attrValue) {
  13.                     if (startSet[i].getAttribute(attrName) == attrValue) {
  14.                         endSet[endSet.length] = startSet[i];
  15.                     }
  16.                 } else {
  17.                     endSet[endSet.length] = startSet[i];
  18.                 }
  19.             }
  20.         }
  21.     } else {
  22.         endSet = startSet;
  23.     }
  24.     return endSet;
  25. }
  26.  
  27. ----------
  28.  
  29. function walkChildNodes(objRef, n) {
  30.     var obj;
  31.     if (objRef) {
  32.         if (typeof objRef == "string") {
  33.             obj = document.getElementById(objRef);
  34.         } else {
  35.             obj = objRef;
  36.         }
  37.     } else {
  38.         obj = (document.body.parentElement) ? 
  39.             document.body.parentElement : document.body.parentNode;
  40.     }
  41.     var output = "";
  42.     var indent = "";
  43.     var i, group, txt;
  44.     if (n) {
  45.         for (i = 0; i < n; i++) {
  46.             indent += "+---";
  47.         }
  48.     } else {
  49.         n = 0;
  50.         output += "Child Nodes of <" + obj.tagName .toLowerCase();
  51.         output += ">\n=====================\n";
  52.     }
  53.     group = obj.childNodes;
  54.     for (i = 0; i < group.length; i++) {
  55.         output += indent;
  56.         switch (group[i].nodeType) {
  57.             case 1:
  58.                 output += "<" + group[i].tagName.toLowerCase();
  59.                 output += (group[i].id) ? " ID=" + group[i].id : "";
  60.                 output += (group[i].name) ? " NAME=" + group[i].name : "";
  61.                 output += ">\n";
  62.                 break;
  63.             case 3:
  64.                 txt = group[i].nodeValue.substr(0,15);
  65.                 output += "[Text:\"" + txt.replace(/[\r\n]/g,"<cr>");
  66.                 if (group[i].nodeValue.length > 15) {
  67.                     output += "...";
  68.                 }
  69.                 output += "\"]\n";
  70.                 break;
  71.             case 8:
  72.                 output += "[!COMMENT!]\n";
  73.                 break;
  74.             default:
  75.                 output += "[Node Type = " + group[i].nodeType + "]\n";
  76.         }
  77.         if (group[i].childNodes.length > 0) {
  78.             output += walkChildNodes(group[i], n+1);
  79.         }
  80.     }
  81.     return output;
  82. }
  83.  
  84. ----------
  85.  
  86. function authorAttrFilter(node) {
  87.     if (node.hasAttribute("author")) {
  88.         return NodeFilter.FILTER_ACCEPT;        
  89.     }
  90.     return NodeFilter.FILTER_SKIP;
  91. }
  92.  
  93. var authorsOnly = document.createTreeWalker(document, NodeFilter.SHOW_ELEMENT, 
  94.                   authorAttrFilter, false);
  95.  
  96.  
From the information you provided your question cannot be answered. You did not include your javaScript functions.
1. myFunction()
2. generateEOS()

That being said, formatting your code will make it easier for you to debug it. For example look at your code below where I have formatted it for you. Note the bold item
<tr>around your table header tags <th>. They were missing in your code. Easy to spot when the code is formatted. This would mess things up when you add a row to the table. <TH> is like a <TD> and must be encapsulated in a <TR> </TR> tag.

So where is your code where you concatenate your text in the text area?


Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3.     <!DOCTYPE html> 
  4.     <html> 
  5.         <head> 
  6.             <style>
  7.                 table, td {border: 1px solid black;}
  8.             </style> 
  9.         </head> 
  10.         <body> 
  11.             <p>Click the button to add a new row at the first position of the table and then add cells and content.</p> <table id="myTable">
  12.                 <tr>
  13.                     <th> Owner </th> 
  14.                     <th> Receiver</th> 
  15.                     <th> agreement</th> 
  16.                     <th> Access</th> 
  17.                     <th> Permissions</th> 
  18.                 </tr>
  19.                 <tr> 
  20.                     <td>
  21.                         <input type="text" id="Owner"  onkeyup="generateEOS()"/>
  22.                     </td><td>
  23.                         <input type="text" id="Receiver" onkeyup="generateEOS()"  />
  24.                     </td><td>
  25.                         <input type="text" id="Options"   onkeyup="generateEOS()" />
  26.                     </td><td>
  27.                         <select onchange="ChooseContact(this)"> 
  28.                             <Option>Access</Option> 
  29.                             <option>R</option> 
  30.                             <option>W</option> 
  31.                             <option>B</option> 
  32.                             <option>N</option> 
  33.                         </select>
  34.                     </td><td>
  35.                         <input type="text" id="Access" onkeyup="generateEOS()" />
  36.                     </td> 
  37.                 </tr> 
  38.             </table> 
  39.             <br> 
  40.             <div align="Center"> 
  41.                 <button onclick="myFunction()">Add new row</button> 
  42.                 <textarea id="preview" rows="20" cols="70">
  43.  
  44.  
  45.  
Dec 29 '14 #2

Post your reply

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