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

Cloning rows with Javascript. Works in Firefox but not IE...Please HELP!!

P: 9
Hi,

I have the following code working great in Firefox but not IE.

Please help...

Expand|Select|Wrap|Line Numbers
  1.  
  2. <html>
  3. <head>
  4. <title>Page title</title>
  5.  
  6.  
  7. <script language="javascript">
  8.  
  9.  
  10.  
  11. function clone_rows(myType)
  12. {
  13.  
  14.         if (myType == 'items') {
  15.                     var clone_table=document.getElementById("clone_table");
  16.         }
  17.         if (myType == 'files') {
  18.                 var clone_table=document.getElementById("clone_table_files");
  19.         }
  20.  
  21.  
  22.  
  23.         var clones=[];
  24.         var startIndex=0;
  25.         var rows=clone_table.getElementsByTagName("tr");
  26.  
  27.         for (var i=0; i < rows.length; i++) {
  28.                 if (rows[i].className=='clone') {
  29.                         rows[i].className="";
  30.  
  31.  
  32.                         clones.push(rows[i]);
  33.  
  34.  
  35.                         startIndex=i;
  36.                 }
  37.         }
  38.  
  39.         var new_name_number=parseInt((parseInt(rows.length)-2) / parseInt(clones.length));
  40.  
  41.         for (i=0; i < clones.length; i++) {
  42.  
  43.                 var new_row=clone_table.insertRow(startIndex+i+1);
  44.  
  45.  
  46.                 if (i% 2 == 0)
  47.                         var bgcolor = "C3D6E8";
  48.                 else
  49.                         var bgcolor = "CCCCCC";
  50.  
  51.                 if (myType == 'files') {
  52.                         var last_row= clone_table.rows.length;
  53.                         if (last_row% 2 == 0)
  54.                                 var bgcolor = "CCCCCC";
  55.                         else
  56.                                 var bgcolor = "C3D6E8";
  57.                 }
  58.  
  59.  
  60.                 if (i == clones.length-1 && i != 0)
  61.                         var bgcolor = "000000";
  62.  
  63.                 new_row.style.backgroundColor = bgcolor;
  64.  
  65.                 new_row.className="clone";
  66.  
  67.  
  68.  
  69.                 var cloned_children=clones[i].getElementsByTagName("td");
  70.  
  71.                 for (var j=0; j < cloned_children.length; j++) {
  72.                         var new_cell=new_row.insertCell(-1);
  73.                         new_cell.innerHTML=cloned_children[j].innerHTML;
  74.  
  75. //                      new_cell.innerHTML=new_cell.innerHTML.replace(/name=\"[0-9]{0,2}/g, "name=\"");
  76. //                      new_cell.innerHTML=new_cell.innerHTML.replace(/name=\"/g, "name=\"" + new_name_number + "#");
  77. //                      new_cell.innerHTML=new_cell.innerHTML.replace(/#/g, "@");
  78.                         // This replaces existing digits and _ and adds in the new # with a _
  79.                         new_cell.innerHTML=new_cell.innerHTML.replace(/name=\"\d*_*/g, "name=\"" + new_name_number + "_");
  80.                 }
  81.         }
  82.  
  83.  
  84.         var hiddenCount = document.createElement("input");
  85.         hiddenCount.setAttribute("type", "hidden");
  86.         if (myType == 'items') {
  87.                 hiddenCount.setAttribute("name", "theItemCount");
  88.         }
  89.         if (myType == 'files') {
  90.                 hiddenCount.setAttribute("name", "theFileCount");
  91.         }
  92.         hiddenCount.setAttribute("value", new_name_number);
  93.         document.getElementById("clone_table").appendChild(hiddenCount);
  94.  
  95. }
  96.  
  97.  
  98. </script> 
  99. </head>
  100. <body>
  101.  
  102. <table>
  103.     <tr>
  104.         <td></td>
  105.         <td align="right"></td>
  106.     </tr>
  107. </table>
  108. <table width="900" border="0" cellspacing="0" cellpadding="0">
  109.     <tr>
  110.         <td><img src="#" width="20" height="10" border="0"></td>
  111.         <td><br>
  112.  
  113. <form action="" method="get" name="theForm">
  114.  
  115.  
  116.     <table id="clone_table">
  117. <tr >
  118. <td colspan="3">Item1</td>
  119. </tr>
  120.     <tr bgcolor="" valign="top" class="clone">
  121.     <td>Item2</td>
  122.     <td><input type=text name="0_Item2" size="5" maxlength="350" value=""></td>
  123. </tr>
  124.     <tr bgcolor="" valign="top" class="clone">
  125.     <td>Item3</td>
  126.     <td><input type=text name="0_Item3" size="5" maxlength="350" value=""></td>
  127. </tr>
  128.     <tr valign="top" class="clone">
  129.     <td>Item4</td>
  130.     <td><input type=text name="0_Item4" size="5" maxlength="350" value=""></td>
  131.     </tr>
  132.     <tr bgcolor="" valign="top" class="clone">
  133.     <td>Item5</td>
  134.     <td colspan="2"><input type=text name="0_Item5" size="40" maxlength="250" value=""></td>
  135.     </tr>
  136. <tr bgcolor="" valign="top" class="clone">
  137. <td>Item6</td>
  138. <td>
  139. <select name="0_Item6">
  140. <option value="">--None--</option>
  141. <option value="001"
  142. >001</option>
  143. <option value="002"
  144. >002</option>
  145. <option value="003"
  146. >003</option>
  147. <option value="004"
  148. >004</option>
  149. </select>
  150. </td>
  151. </tr>
  152. <tr class="clone">
  153. <td>
  154. Item7</td>
  155. <td>
  156. <select name="0_Item7">
  157. <option value="">--None--</option>
  158. <option value="101"
  159. >101</option>
  160. <option value="102"
  161. >102</option>
  162. <option value="103"
  163. >103</option>
  164. </select><br>
  165. </td>
  166. </tr>
  167. <tr class="clone">
  168. <td></td>
  169. <td></td>
  170. </tr>
  171.     <tr>
  172.     <td colspan="3"><input type="button" value="Add More Items" onclick="clone_rows('items'); return false;" /></td>
  173.     </tr>
  174. </table>
  175. <br />
  176.  
  177.  
  178. <table>
  179. <tr valign="top">
  180. <td><input name="submit_form" type="submit" value="Submit" /></td>
  181. <td align="right"></td>
  182. </tr>
  183. </table>
  184. </form>
  185.  
  186. </td>
  187.  
  188.         <td></td>
  189.     </tr>
  190. </table>
  191.  
  192. <br><br><br><br>
  193. </body>
  194. </html>
  195.  
  196.  
Please help...
Sep 28 '08 #1
Share this Question
Share on Google+
6 Replies


RamananKalirajan
100+
P: 607
Your code seems to be working good in IE7 and Firefox, whats the problem you are facing. can u explain ur requirement clearly

Regards
Ramanan Kalirajan
Sep 29 '08 #2

rnd me
Expert 100+
P: 427
ie6 does not support using .innerHTML to make table rows.

use dom methods instead.
Sep 29 '08 #3

P: 9
The array number is not showing for IE.
Sep 29 '08 #4

P: 9
Unfortunately, I'm not familiar with DOM scripting, is there anyway you can help me. I'm pretty desperate. I would like to pay you for your services. My job kind of depends on it.

Please help~

ie6 does not support using .innerHTML to make table rows.

use dom methods instead.
Sep 30 '08 #5

rnd me
Expert 100+
P: 427
well,
i rewrote the whole thing, bringing it up to date.
the zebra striping is applied on bootup, so it looks good right away.
i also added keyboard navigation to help accessibility,

there is a problem with the names you were using: IE6 throws away the leading 0+any following digits, and so all the inputs had the same name to it. i dont know if this would be a problem on the server, when it's actually used.

i renamed the names to begin with "item". this fixes the problem for IE6.

let me know if there's anything else i can do for you.


Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. <html>
  4. <head>
  5. <title>Page title</title>
  6.  
  7.  
  8. <script language="javascript">
  9.  
  10. function clone_rows(myType) {
  11.  
  12.     if( ! clone_rows.app){ 
  13.         clone_rows.app = { firstRun: true };
  14.          app = clone_rows.app;
  15.                 app.count = 0;
  16.         app.tab = 500;
  17.      }
  18.  
  19.      app = clone_rows.app;
  20.  
  21.         app.count++;
  22.         var clone_table =  el(  (myType === "items" ? "clone_table" : "clone_table_files") || "clone_table" )
  23.         var rows = tags( clone_table,"tr");
  24.  
  25.     if( ! app.clones){ app.clones=[];
  26.  
  27.                var startIndex = 0;
  28.             var rowCount = rows.length;
  29.         function getClones(a,b){ 
  30.             if(a.className === "clone"){ var t =  a.cloneNode(true); t.className = ""; app.clones[app.clones.length] =t; startIndex = b; return t;  };
  31.           }
  32.         rows.map(getClones);
  33.  
  34.     }
  35.  
  36. function dupeNode(a){return a.cloneNode(true);}
  37.  
  38.  
  39. function updateInputs(a,bb){
  40.     var r = tags(a, "input") || [];
  41.     r = r.concat( tags(a, "select") );
  42.     if(!r || !r[0]){return;}    
  43.  
  44.     r.map(function(a,b,c){
  45.         if(!a){return;}
  46.         var newInput = a;
  47.          var oldName = newInput.name.split("_");
  48.                     if (oldName[1]) {
  49.                         oldName = oldName[1];
  50.             newInput.name = "item" + app.count + "_" + oldName;
  51.            }
  52.  
  53.                     if (newInput.tabIndex) {
  54.             app.tab = app.tab+20;
  55.                         newInput.tabIndex = app.tab;
  56.                     }
  57.  
  58.     });
  59.   return a;
  60. }
  61.  
  62.  
  63.         var hiddenCount = el("counter") || document.createElement("input");
  64.         hiddenCount.setAttribute("type", "hidden");
  65.     hiddenCount.id = "counter";
  66.         if (myType == "items") {
  67.             hiddenCount.setAttribute("name", "theItemCount");
  68.         }
  69.         if (myType == "files") {
  70.             hiddenCount.setAttribute("name", "theFileCount");
  71.         }
  72.         hiddenCount.setAttribute("value",app.count);
  73.         el("clone_table").appendChild(hiddenCount);
  74.  
  75.        var clones = app.clones.map(dupeNode); //new instance
  76.     app.clones2= clones;
  77.     var spot = rows[ rows.length -1 ];
  78.     var mom = spot.parentNode;
  79.     clones.map(function(a,b){ mom.insertBefore(a, spot );})
  80.     clones.map(updateInputs);
  81.  
  82.  
  83. for(var i =0, mx= clones.length; i<mx;i++){
  84.     var tt= tags(clones[i], "input");
  85.     if(tt && tt[0]){ var it = tt[0];
  86.     if(it.scrollIntoView){it.scrollIntoView(true); } ; return setTimeout(function(){    it.focus();     }, 200);}
  87. }
  88.  
  89.     }//end of clonerow funciton
  90.  
  91.  
  92. function stylize(){
  93.     var rows = tags( "clone_table" ,"tr");
  94.     function colorize(a,i){
  95.                 if (i % 2) {
  96.                     var bgcolor = "#C3D6E8";
  97.                 } else {
  98.                     var bgcolor = "#CCCCCC";
  99.                 }
  100.         tags(a, "td")[0].style.textAlign = "right";
  101.          a.style.backgroundColor= a.getAttribute("bgcolor") ?  a.bgcolor : bgcolor ;
  102.  
  103.     }
  104.         rows.map(colorize);
  105. }
  106.  
  107.  
  108. function el(tid) {return document.getElementById(tid);}
  109. function obValsl(ob) {try {if (ob && ob.length) {var r = [], i = 0, mx = ob.length;for (var z = 0; z < mx; z++) {r[z] = ob[z] || undefined;}}} catch (yy) {alert(yy);}return r;};
  110. function tags(elm, tid) {var t = "getElementsByTagName";if (tid) {if (elm.charCodeAt) {elm = el(elm);}return obValsl(elm[t](tid));}return obValsl(document[t](elm));}
  111. if (!Array.prototype.map) {// from http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array:map
  112. Array.prototype.map = function (fun) {var len = this.length;if (typeof fun != "function") {throw new TypeError;}var res = new Array(len);var thisp = arguments[1];for (var i = 0; i < len; i++) {if (i in this) {res[i] = fun.call(thisp, this[i], i, this);}}return res;};}
  113.  
  114.  
  115.  
  116. </script> 
  117. </head>
  118. <body onload= "stylize()">
  119.  
  120. <table>
  121.     <tr>
  122.         <td>Items</td>
  123.         <td></td>
  124.     </tr>
  125. </table>
  126. <table>
  127.     <tr>
  128.         <td></td>
  129.         <td><br>
  130.  
  131.  
  132. <form action="" method="get" name="theItems">
  133.  
  134.  
  135.     <table>
  136. <tr>
  137. <td>Items2</td>
  138. </tr>
  139.     <tr>
  140.     <td>Items3</td>
  141.     <td><input type=text name="Items3" size="5"   onfocus="this.select();"  tabindex="101" ></td>
  142. </tr>
  143.     <tr bgcolor="" valign="top" class="clone">
  144.     <td>Items4</td>
  145.     <td><input type=text name="4" size="5" maxlength="350" value=""  onfocus="this.select();"  tabindex="102"></td>
  146. </tr>
  147.     <tr class="clone">
  148.     <td>Items5</td>
  149.     <td><input type=text name="Items5" size="5" maxlength="350" value=""  onfocus="this.select();"  tabindex="104"></td>
  150.     </tr>
  151.     <tr class="clone">
  152.     <td>Items6</td>
  153.     <td colspan="2"><input type=text name="Items6" onfocus="this.select();"  tabindex="106" ></td>
  154.     </tr>
  155. <tr bgcolor="" valign="top" class="clone">
  156. <td>Items7</td>
  157. <td>
  158. <select name="Items7"   tabindex="108">
  159. <option value="">--None--</option>
  160. <option value="001"
  161. >001</option>
  162. <option value="002"
  163. >002</option>
  164. <option value="003"
  165. >003</option>
  166. <option value="004"
  167. >004</option>
  168. </select>
  169. </td>
  170. </tr>
  171. <tr class="clone">
  172. <td>
  173. Items8</td>
  174. <td>
  175. <select name="Items8"    tabindex="110">
  176. <option value="">--None--</option>
  177. <option value="101"
  178. >101</option>
  179. <option value="102"
  180. >102</option>
  181. <option value="103"
  182. >103</option>
  183. </select><br>
  184. </td>
  185. </tr>
  186. <tr class="clone">
  187. <td> <br /> </td>
  188. <td> <br /> </td>
  189. </tr>
  190.     <tr>
  191.     <td colspan="3"><input type="button" value="Add More Items" onclick="clone_rows('items'); return false;"   tabindex="5110" /></td>
  192.     </tr>
  193. </table>
  194. <br />
  195.  
  196.  
  197. <table>
  198. <tr>
  199. <td> </td>
  200. <td ></td>
  201. </tr>
  202. </table>
  203. <input name="submit_form" type="submit" value="Submit"   tabindex="5150" />
  204.  
  205. </form>
  206. </body>
  207. </html>
  208.  
  209.  
  210.  
Sep 30 '08 #6

P: 9
You are a blessing~!!

I'm naming my next child after you~!!

Thank you so much~!!
Sep 30 '08 #7

Post your reply

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