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

Cloning Two Tables

P: 9
Hi,

Here's a little bug that's killing me

Expand|Select|Wrap|Line Numbers
  1.  
  2. <html>
  3.  
  4. <head>
  5. <title></title>
  6.  
  7. </head>
  8.  
  9. <body>
  10.  
  11. <script language="javascript">
  12.  
  13. function clone_rows(myType) {
  14.  
  15.     if( ! clone_rows.app){
  16.         clone_rows.app = { firstRun: true };
  17.          app = clone_rows.app;
  18.                 app.count = 0;
  19.         app.tab = 500;
  20.      }
  21.  
  22.      app = clone_rows.app;
  23.  
  24.  
  25.         app.count++;
  26.         var clone_table =  el(  (myType === "items" ? "clone_table" :
  27. "clone_table_files") || "clone_table" )
  28.         var rows = tags( clone_table,"tr");
  29.  
  30.     if( ! app.clones){ app.clones=[];
  31.  
  32.                var startIndex = 0;
  33.             var rowCount = rows.length;
  34.         function getClones(a,b){
  35.             if(a.className === "clone"){ var t =  a.cloneNode(true); t.className = ""; app.clones[app.clones.length] =t; startIndex = b; return t;  };
  36. alert(startIndex);                    
  37.           }
  38.         rows.map(getClones);
  39.  
  40.     }
  41.  
  42. function dupeNode(a){return a.cloneNode(true);}
  43.  
  44.  
  45. function updateInputs(a,bb){
  46.     var r = tags(a, "input") || [];
  47.     r = r.concat( tags(a, "select") );
  48.     if(!r || !r[0]){return;}
  49.  
  50.     r.map(function(a,b,c){
  51.         if(!a){return;}
  52.         var newInput = a;
  53.          var oldName = newInput.name.split("_");
  54.                     if (oldName[1]) {
  55.                         oldName = oldName[1];
  56.             newInput.name = "item" + app.count + "_" + oldName;
  57.            }
  58.  
  59.                     if (newInput.tabIndex) {
  60.             app.tab = app.tab+20;
  61.                         newInput.tabIndex = app.tab;
  62.                     }
  63.  
  64.     });
  65.   return a;
  66. }
  67.  
  68.  
  69.         var hiddenCount = el("counter") || document.createElement("input");
  70.         hiddenCount.setAttribute("type", "hidden");
  71.     hiddenCount.id = "counter";
  72.         if (myType == "items") {
  73.             hiddenCount.setAttribute("name", "theItemCount");
  74.         }
  75.         if (myType == "files") {
  76.             hiddenCount.setAttribute("name", "theFileCount");
  77.         }
  78.         hiddenCount.setAttribute("value",app.count);
  79.         el("clone_table").appendChild(hiddenCount);
  80.  
  81.        var clones = app.clones.map(dupeNode); //new instance
  82.     app.clones2= clones;
  83.     var spot = rows[ rows.length -1 ];
  84.     var mom = spot.parentNode;
  85.     clones.map(function(a,b){ mom.insertBefore(a, spot );})
  86.     clones.map(updateInputs);
  87.  
  88.  
  89. for(var i =0, mx= clones.length; i<mx;i++){
  90.     var tt= tags(clones[i], "input");
  91.     if(tt && tt[0]){ var it = tt[0];
  92.     if(it.scrollIntoView){it.scrollIntoView(true); } ; return
  93. setTimeout(function(){    it.focus();     }, 200);}
  94. }
  95.  
  96.     }//end of clonerow funciton
  97.  
  98.  
  99. function stylize(){
  100.     var rows = tags( "clone_table" ,"tr");
  101.     function colorize(a,i){
  102.                 if (i % 2) {
  103.                     var bgcolor = "#C3D6E8";
  104.                 } else {
  105.                     var bgcolor = "#CCCCCC";
  106.                 }
  107.         tags(a, "td")[0].style.textAlign = "right";
  108.          a.style.backgroundColor= a.getAttribute("bgcolor") ?
  109. a.bgcolor : bgcolor ;
  110.  
  111.     }
  112.         rows.map(colorize);
  113. }
  114.  
  115.  
  116. function el(tid) {return document.getElementById(tid);} 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;}; function tags(elm, tid) {var t = "getElementsByTagName";if (tid) {if
  117.  
  118. (elm.charCodeAt) {elm = el(elm);}return obValsl(elm[t](tid));}return obValsl(document[t](elm));} if (!Array.prototype.map) {// from http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array:map
  119. 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;};}
  120.  
  121.  
  122.  
  123. </script>
  124.  
  125.  
  126.  
  127.  
  128. <table>
  129.                 <tr>
  130.                                 <td></td>
  131.                                 <td>
  132.  
  133.                                                 </td>
  134.                 </tr>
  135.                 <tr>
  136.                                 <td colspan="2"></td>
  137.                 </tr>
  138.                 <tr>
  139.                                 <td colspan="2"></td>
  140.                 </tr>
  141. </table>
  142. <table width="900" border="0" cellspacing="0" cellpadding="0" background="/images/assets/header_bg.jpg">
  143.                 <tr>
  144.                                 <td class="pgTitle">hi</td>
  145.                                 <td align="right"></td>
  146.                 </tr>
  147. </table>
  148. <table width="900" border="0" cellspacing="0" cellpadding="0">
  149.                 <tr>
  150.                                 <td></td>
  151.                                 <td ><br>
  152.  
  153.  
  154. <form action="" method="post" name="theForm" >
  155. <table width="100%" border="0" bgcolor="#FFFFFF" cellpadding="3" cellspacing="1">
  156. <tr bgcolor="#CCCCCC" valign="top" align="right" class="red">
  157. <td colspan="2"></td>
  158. </tr>
  159. <tr bgcolor="#C3D6E8" valign="top">
  160. <td>Name </td>
  161. <td><input type=text name="theSupplier" size="50" maxlength="250" value=""></td>
  162. </tr>
  163. <tr bgcolor="#CCCCCC" valign="top">
  164. <td>address</td>
  165. <td><input type=text name="theSupplierContact" size="50" maxlength="250" value=""></td>
  166. </tr>
  167. <tr bgcolor="#C3D6E8" valign="top">
  168. <td>date</td>
  169. <td>
  170. <select id="theShip" name="theShip">
  171. <option value="">--None--</option>
  172. <option value="stuff1"
  173. >stuff1</option>
  174. <option value="stuff2"
  175. >stuff2</option>
  176. <option value="stuff3"
  177. >stuff3</option>
  178. <option value="stuff4"
  179. >stuff4</option>
  180. </select><br>
  181. Why <input type=text name="theOther" size="50" maxlength="250" value="">
  182. </td>
  183. </tr>
  184. <tr bgcolor="#CCCCCC" valign="top">
  185. <td>desc </td>
  186. <td><input type=text name="thePODesc" size="50" maxlength="250" value=""></td>
  187. </tr>
  188. <tr bgcolor="#C3D6E8" valign="top">
  189. <td>toy</td>
  190. <td><input type=text name="theNoteSupplier" size="50" maxlength="250" value=""></td>
  191. </tr>
  192. <tr bgcolor="#CCCCCC" valign="top">
  193. <td>give</td>
  194. <td><input type=text name="theNoteApprovers" size="50" maxlength="250" value=""></td>
  195. </tr>
  196. <tr bgcolor="#C3D6E8" valign="top">
  197. <td>bye</td>
  198. <td><input type="text" size="10" id="theProductBy" name="theProductBy" value="" onfocus="event.cancelBubble = true; showCalendar('theProductBy');" onclick="event.cancelBubble = true; showCalendar('theProductBy');" />
  199. <img src="/images/assets/calendar.gif" onclick="event.cancelBubble = true; showCalendar('theProductBy');" alt="Click here to set the date" title="Click here to set the date" />
  200. </td>
  201. </tr>
  202. <tr bgcolor="#CCCCCC" valign="top">
  203. <td>home</td>
  204. <td><input type=text name="theNote" size="50" maxlength="250" value=""></td>
  205. </tr>
  206. <tr bgcolor="#C3D6E8" valign="top">
  207. <td></td>
  208. <td></tr>
  209. </table>
  210. <br />
  211.  
  212.     <!-- ITEMS SECTION -->
  213. <table width="100%" border="0" bgcolor="#FFFFFF" cellpadding="3" cellspacing="1" id="clone_table">
  214. <tr bgcolor="" valign="top" class="red"> 
  215.                 <td colspan="3"><strong>roof</strong></td> 
  216. </tr>
  217. <tr bgcolor="" valign="top" class="clone">
  218.     <td>Quantity </td>
  219.     <td><input type=text name="item0_theQuantity" size="5" maxlength="350" onfocus="this.select();"  tabindex="101"></td>
  220. </tr>
  221. <tr bgcolor="" valign="top" class="clone">
  222.     <td>say</td>
  223.     <td><input type=text name="item0_theItem" size="5" maxlength="350" value=""  onfocus="this.select();"  tabindex="102"></td> 
  224. </tr>
  225. <tr bgcolor="" valign="top" class="clone">
  226.     <td>boat </td>
  227.     <td><input type=text name="item0_thePrice" size="5" maxlength="350" value=""  onfocus="this.select();" tabindex="104"></td>
  228. </tr>
  229. <tr bgcolor="" valign="top" class="clone">
  230.     <td>car</td>
  231.     <td colspan="2"><input type=text name="item0_theDescription" size="40" maxlength="250" value=""  onfocus="this.select();" tabindex="106" ></td>
  232. </tr>
  233.  
  234. <tr bgcolor="#010101" style="line-height: 20%;"  class="clone"> <td> <br /> </td> <td> <br /> </td> </tr>
  235. <tr>
  236.     <td colspan="3"><input type="button" value="Add More Items" onclick="clone_rows('items'); return false;"   tabindex="5110" /></td>
  237. </tr>
  238. </table>
  239.  
  240.  
  241.  
  242. <br />
  243.  
  244.  
  245. <input type="hidden" name="hippi" value="2000000" />
  246. <table width="100%" border="0" bgcolor="#FFFFFF" cellpadding="3" cellspacing="1" id="clone_table_files">
  247. <tr bgcolor="" valign="top" class="red"> 
  248.                 <td colspan="3">hi</td> 
  249. </tr>
  250. <tr bgcolor="" valign="top" class="clone">
  251. <td></td>
  252. <td>
  253.  
  254.     <input name="hi" type="text" />
  255. </td>
  256. </tr>
  257. <tr bgcolor="#010101" style="line-height: 20%;"  class="clone"> <td> <br /> </td> <td> <br /> </td> </tr>
  258. <tr>
  259.     <td colspan="3"><input type="button" value="Add More Items" onclick="clone_rows('files'); return false;"   tabindex="5110" /></td>
  260. </tr>
  261. </table>
  262.  
  263.  
  264. <table width="100%" border="0" bgcolor="#FFFFFF" cellpadding="3" cellspacing="1">
  265. <tr valign="top">
  266. <td><input name="submit_form" type="submit" value="Submit"></td>
  267. <td align="right"></td>
  268. </tr>
  269. </table>
  270. </form>
  271.  
  272. </td>
  273.  
  274.                                 <td><img src="/images/assets/clear.gif" width="20" height="10" border="0"></td>
  275.                 </tr>
  276. </table>
  277.  
  278.  
  279.  
  280. <br><br><br><br>
  281. </body>
  282. </html>
  283.  
  284.  

So, depending if you click on the first "Add More Items" button or second "Add More Items" button. It will only duplicate that particular table on top of the button you pressed. If you click on the first "Add More Items" button then click on the second "Add More Items" button, the outcome is not consistent.

I would like it so that if you click on the first "Add More Items" button it will only copy and paste the 7 row table on top of it.

If you click on the second "Add More Items" button it will only copy and paste the two row column table on top of that button.

You will notice that I added an "alert" feature to show you what is happening.

Please help!
Oct 1 '08 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
Part of the problem is that it assumes only one type of cloning. If you remove the check for app.clones on line 30, it should solve the problem, though if you do want to make use of that clones array, you may want to change other parts of the code.
Oct 4 '08 #2

Post your reply

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