471,896 Members | 1,996 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

home > topics > javascript > questions > cloning and deleting multiple rows with javascript

Join Bytes to post your question to a community of 471,896 software developers and data experts.

Cloning and Deleting Multiple Rows with Javascript

Please help!

I'm trying to clone and delete multiple rows with JavaScript.

I need two delete buttons that work...!

I only have one for now, but it's not working properly, the output count is messing up.

Problems:

# 1 - The most important feature is a delete feature for multiple cloned rows.

I need the delete feature for both Colors table and Letters table

When you click on Add More Letters twice, then Click on Add More Colors twice, then click on Delete This Letter, the alert reads ''Letter count is NAN"

Turning the integer into a string.

It does not subtract 1 from the Letter Count.

You will need both of the pages in one directory to see the output.

The second code need to be saved as see_results.html

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html
  2.     PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  3. <html>
  4.  
  5. <head>
  6. <title>Colors and Letters</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8.  
  9. <script type="text/javascript">
  10. /**************************
  11. // clone the Item rows
  12. **************************/
  13.  
  14. function clone_rows(myType) {
  15.     //If its the first time, then clone the rows
  16.     if( ! clone_rows.app){
  17.         clone_rows.app = { firstRun: true };
  18.         app = clone_rows.app;
  19.         app.counterer = 0;
  20.     }
  21.  
  22.     app = clone_rows.app;
  23.     app.counterer++;
  24.  
  25.         var clone_table =  el(  (myType === "items" ? "clone_table" :
  26. "clone_table") || "clone_table" )
  27.  
  28.         var rows = tags( clone_table,"tr");
  29.  
  30.     if( ! app.clones) {
  31.         app.clones=[];
  32.         var startIndex = 0;
  33.         var rowCount = rows.length;
  34.         function getClones(a,b) {
  35.             if(a.className === "clone") { 
  36.                 var t =  a.cloneNode(true); 
  37.                 t.className = ""; 
  38.                 app.clones[app.clones.length] =t; 
  39.                 startIndex = b; 
  40.                 return t;  
  41.             };
  42.         }
  43.         rows.map(getClones);
  44.     }
  45.  
  46.     function dupeNode(a) {
  47.         return a.cloneNode(true);
  48.     }
  49.  
  50.     function updateInputs(a,bb)
  51.     {
  52.         var r = tags(a, "input") || [];
  53.         r = r.concat( tags(a, "select") );
  54.         if(!r || !r[0]) {
  55.             return;
  56.         }
  57.         r.map(function(a,b,c) {
  58.             if(!a) {
  59.                 return;
  60.             }
  61.             var newInput = a;
  62.             var oldName = newInput.name.split("_");
  63.             if (oldName[1]) {
  64.                 oldName = oldName[1];
  65.                 newInput.name = "item" + app.counterer + "_" + oldName;
  66.             }
  67.             if (newInput.tabIndex) {
  68.                 app.tab = app.tab+20;
  69.                 newInput.tabIndex = app.tab;
  70.             }
  71.         });
  72.         return a;
  73.     }
  74.  
  75.     // Set the counter item (passes how many cloned rows there are)
  76.         var hiddenItemCount = el("counterer") || document.createElement("input");
  77.         hiddenItemCount.setAttribute("type", "hidden");
  78.     hiddenItemCount.id = "counterer";
  79.     hiddenItemCount.setAttribute("name", "theItemCount");
  80.         hiddenItemCount.setAttribute("value",app.counterer);
  81.         el("clone_table").appendChild(hiddenItemCount);
  82.                 alert("The Color Count is " + app.counterer);    
  83.  
  84.  
  85.     var clones = app.clones.map(dupeNode); //new instance
  86.     app.clones2= clones;
  87.  
  88.     var spot = rows[ rows.length -1 ];
  89.     var mom = spot.parentNode;
  90.  
  91.     clones.map(function(a,b){ mom.insertBefore(a, spot );})
  92.     clones.map(updateInputs);
  93.  
  94.  
  95.     for(var i =0, mx= clones.length; i<mx;i++) {
  96.         var tt= tags(clones[i], "input");
  97.         if(tt && tt[0]) { 
  98.             var it = tt[0];
  99.             if(it.scrollIntoView) {
  100.                 it.scrollIntoView(true); 
  101.             } ; return
  102.             setTimeout(function() {    
  103.                 it.focus();     
  104.             }, 200);
  105.         }
  106.     }
  107.  
  108. }//end of clone row function
  109.  
  110.  
  111. /**************************
  112. // clone the file rows
  113. **************************/
  114.  
  115. function clone_rows_files(myType) {
  116.      //If its the first time, then clone the rows 
  117.     if( ! clone_rows_files.app) {
  118.         clone_rows_files.app = { firstRun: true };
  119.         app = clone_rows_files.app;
  120.         app.countFile = 0;
  121.         app.tab = 500;
  122.     }
  123.  
  124.     app = clone_rows_files.app;
  125.     app.countFile++;
  126.  
  127.     var clone_table_files =  el("clone_table_files")
  128.     var rows = tags( clone_table_files,"tr");
  129.     if( ! app.clones) { 
  130.         app.clones=[];
  131.         var startIndex = 0;
  132.         var rowCount = rows.length;
  133.  
  134.         function getClones(a,b) {
  135.             if(a.className === "cloneFile") { 
  136.                 var t =  a.cloneNode(true); 
  137.                 t.className = ""; 
  138.                 app.clones[app.clones.length] =t; 
  139.                 startIndex = b; 
  140.                 return t;  
  141.             };
  142.         }
  143.         rows.map(getClones);
  144.     }
  145.  
  146.  
  147.     function dupeNode(a) {
  148.         return a.cloneNode(true);
  149.     }
  150.  
  151.     function updateInputs(a,bb) {
  152.         var r = tags(a, "input") || [];
  153.         r = r.concat( tags(a, "select") );
  154.         if(!r || !r[0]) {
  155.             return;
  156.         }
  157.         r.map(function(a,b,c) {
  158.             if(!a) {
  159.                 return;
  160.             }
  161.  
  162.             var newInput = a;
  163.             var oldName = newInput.name.split("_");
  164.  
  165.             if (oldName[1]) {
  166.                 oldName = oldName[1];
  167.                 newInput.name = "file" + app.countFile + "_" + oldName;
  168.             }
  169.  
  170.             if (newInput.tabIndex) {
  171.                 app.tab = app.tab+20;
  172.                 newInput.tabIndex = app.tab;
  173.             }
  174.         });
  175.         return a;
  176.     }
  177.  
  178.     // Set the counter item (passes how many cloned rows there are)
  179.     // Set the counter item (passes how many cloned rows there are)
  180.         var hiddenFileCount = el("file_counter") || document.createElement("input");
  181.         hiddenFileCount.setAttribute("type", "hidden");
  182.     hiddenFileCount.id = "file_counter";
  183.     hiddenFileCount.setAttribute("name", "theFileCount");
  184.         hiddenFileCount.setAttribute("value",app.countFile);
  185.         el("clone_table_files").appendChild(hiddenFileCount);
  186.  alert("The Letter count is " + app.countFile);
  187.  
  188.  
  189.  
  190.  
  191.     var clones = app.clones.map(dupeNode); //new instance
  192.     app.clones2= clones;
  193.  
  194.     var spot = rows[ rows.length -1 ];
  195.     var mom = spot.parentNode;
  196.  
  197.     clones.map(function(a,b){ mom.insertBefore(a, spot );})
  198.     clones.map(updateInputs);
  199.  
  200.     for(var i =0, mx= clones.length; i<mx;i++){
  201.  
  202.         var tt= tags(clones[i], "input");
  203.         if(tt && tt[0]) { 
  204.             var it = tt[0];
  205.             if(it.scrollIntoView) {
  206.                 it.scrollIntoView(true); 
  207.             } ; 
  208.             return
  209.             setTimeout(function() {    
  210.                 it.focus();     
  211.             }, 200);
  212.         }
  213.     }
  214. }//end of clone row file funciton
  215.  
  216. /**************************
  217. // Delete Row File
  218. **************************/
  219.  
  220. function deleteRow(r)
  221. {
  222.  var o=r.parentNode.parentNode.parentNode.rowIndex;
  223.  document.getElementById('clone_table_files').deleteRow(o);
  224.  
  225.  app.countFile = app.countFile-"1"; 
  226.  var hiddenFileCount = el("file_counter") || document.createElement("input");
  227.  
  228.  hiddenFileCount.setAttribute("type", "hidden");
  229.  hiddenFileCount.id = "file_counter";
  230.  hiddenFileCount.setAttribute("name", "theFileCount");
  231.  hiddenFileCount.setAttribute("value",app.countFile);
  232.  el("clone_table_files").appendChild(hiddenFileCount);
  233.  alert("The Letter count is " + app.countFile);
  234. }//end of delete row file funciton
  235.  
  236.  
  237.  
  238.  
  239. /**************************
  240. // Style the file rows
  241. **************************/
  242. function stylizeFile() 
  243. {
  244.     var rows = tags( "clone_table_files" ,"tr");
  245.     function colorize(a,i)
  246.     {
  247.         if (i % 2) {
  248.             var bgcolor = "#C3D6E8";
  249.         } else {
  250.             var bgcolor = "#CCCCCC";
  251.         }
  252.  
  253.         tags(a, "td")[0].style.textAlign = "right";
  254.         a.style.backgroundColor= a.getAttribute("bgcolor") ?  a.bgcolor : bgcolor ;
  255.     }
  256.     rows.map(colorize);
  257. }
  258.  
  259.  
  260.  
  261.  
  262.  
  263. /**************************
  264. // Style the Item rows
  265. **************************/
  266. function stylizeItem(){
  267.     var rows = tags( "clone_table" ,"tr");
  268.     function colorize(a,i)
  269.     {
  270.         if (i % 2) {
  271.             var bgcolor = "#C3D6E8";
  272.         } else {
  273.             var bgcolor = "#CCCCCC";
  274.         }
  275.         tags(a, "td")[0].style.textAlign = "right";
  276.         a.style.backgroundColor= a.getAttribute("bgcolor") ?  a.bgcolor : bgcolor ;
  277.     }
  278.     rows.map(colorize);
  279. }
  280.  
  281.  
  282. function el(tid)
  283. {
  284.     return document.getElementById(tid);
  285. }
  286.  
  287.  
  288. function obValsl(ob)
  289. {
  290.     try {
  291.         if (ob && ob.length) {
  292.             var r = [], i = 0, mx = ob.length;
  293.             for (var z = 0; z < mx; z++) {
  294.                 r[z] = ob[z] || undefined;
  295.             }
  296.         }
  297.     } catch (yy) {
  298.         alert(yy);
  299.     }
  300.     return r;
  301. };
  302.  
  303.  
  304. function tags(elm, tid)
  305. {
  306.     var t = "getElementsByTagName";
  307.     if (tid) {
  308.         if (elm.charCodeAt) {
  309.             elm = el(elm);
  310.         }
  311.         return obValsl(elm[t](tid));
  312.     }
  313.     return obValsl(document[t](elm));
  314. }
  315.  
  316. if (!Array.prototype.map) {
  317.     // from http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array:map
  318.     Array.prototype.map =
  319.  
  320.     function (fun)
  321.     {
  322.         var len = this.length;
  323.         if (typeof fun != "function") {
  324.             throw new TypeError;
  325.         }
  326.         var res = new Array(len);
  327.         var thisp = arguments[1];
  328.         for (var i = 0; i < len; i++) {
  329.             if (i in this) {
  330.                 res[i] = fun.call(thisp, this[i], i, this);
  331.             }
  332.         }
  333.         return res;
  334.     };
  335. }
  336.  
  337.     // this function is needed to work around a bug in IE related to element attributes
  338.  
  339.   function hasClass(obj) {
  340.      var result = false;
  341.      if (obj.getAttributeNode("class") != null) {
  342.          result = obj.getAttributeNode("class").value;
  343.      }
  344.      return result;
  345.   }   
  346.  
  347.  
  348. </script>  
  349.  
  350.  
  351. </head>
  352.  
  353. <body bgcolor="#FFFFFF" onLoad="stylizeItem();stylizeFile();stylizeItem();">
  354.  
  355.  
  356. <form action="see_results.html" method="get" name="theForm" id="test">
  357. <table>
  358. <tr  valign="top" align="right" class="red">
  359. <td colspan="2">HI</td>
  360. </tr>
  361. <tr valign="top">
  362.  
  363. <td>
  364.  
  365. Color1</td>
  366. <td><input type=text name="Color1" class="required" size="50" maxlength="250" value=""></td>
  367. </tr>
  368. <tr  valign="top">
  369. <td>Color2</td>
  370. <td><input type=text name="Color2" size="50" maxlength="250" value=""></td>
  371. </tr>
  372. <tr bgcolor="#C3D6E8" valign="top">
  373. <td>Color3</b></td>
  374. <td>
  375. <select id="Color3" name="Color3">
  376. <option value="">--None--</option>
  377.  
  378. <option value="F5-San Jose"
  379. >Color1</option>
  380. <option value="F5-Seattle"
  381. >Color2</option>
  382. <option value="F5-Spokane"
  383. >Color3</option>
  384. </select><br>
  385. Color4 <input type=text name="Color4" size="50" maxlength="250" value="">
  386. </td>
  387. </tr>
  388.  
  389. <tr valign="top">
  390. <td>Color5</b></td>
  391. <td><input type=text name="Color5" size="50" maxlength="250" value="" class="required"></td>
  392. </tr>
  393. <tr bgcolor="#C3D6E8" valign="top">
  394. <td>Color6</td>
  395. <td><input type=text name="Color6" size="50" maxlength="250" value=""></td>
  396. </tr>
  397. <tr  valign="top">
  398. <td>Color7</td>
  399. <td><input type=text name="Color7" size="50" maxlength="250" value=""></td>
  400. </tr>
  401. <tr valign="top">
  402.  
  403. <td>Color8</b></td>
  404. <td><input type="text" class="required" size="10" id="theProductBy" name="Color8" value=""  />
  405.  
  406. </td>
  407. </tr>
  408. <tr valign="top">
  409. <td>Color9</td>
  410. <td><input type=text name="Color9" size="50" maxlength="250" value=""></td>
  411. </tr>
  412. </table>
  413. <br />
  414.  
  415.     <!-- Letters SECTION -->
  416. <table id="clone_table">
  417. <tr valign="top" class="red"> 
  418.     <td colspan="2">Color10</td> 
  419. </tr>
  420. <tr valign="top" class="clone">
  421.     <td>Color11</td>
  422.     <td><input type=text name="Color11" size="5" maxlength="350"></td>
  423.  
  424. </tr>
  425. <tr valign="top" class="clone">
  426.     <td>Color12</td>
  427.     <td><input type=text name="Color12" size="5" maxlength="350" value=""></td> 
  428. </tr>
  429. <tr valign="top" class="clone">
  430.     <td>Color13</td>
  431.  
  432.     <td><input type=text name="Color13" size="5" maxlength="350" value="" ></td>
  433. </tr>
  434. <tr valign="top" class="clone">
  435.     <td>Color14</td>
  436.     <td><input type=text name="Color14" size="40" maxlength="250" value="" class="required"></td>
  437. </tr>
  438. <tr valign="top" class="clone"> 
  439.     <td>Color15</td> 
  440.     <td>
  441. <select name="Color15">
  442.  
  443. <option value="">--None--</option>
  444. <option value="a"
  445. >a</option>
  446. <option value="b"
  447. >b</option>
  448. <option value="c"
  449. >c/option>
  450. <option value="d"
  451. >d</option>
  452. </select>
  453.     </td>
  454.  
  455. </tr>
  456. <tr valign="top" class="clone"> 
  457.     <td>Color16</td> 
  458.     <td>
  459. <select name="Color16">
  460. <option value="">--None--</option>
  461. <option value="red"
  462. >red</option>
  463. <option value="black"
  464. >black</option>
  465. <option value="orange"
  466. >orange</option>
  467. </select>
  468.     </td>
  469. </tr>
  470. <tr class="clone"> <td><br /> </td> <td> <br /> </td> </tr>
  471. <tr>
  472.     <td colspan="2">
  473.         <input type="button" value="Add More Colors" onclick="clone_rows('items'); return false;"  /></td>
  474. </tr>
  475. </table>
  476.  
  477.  
  478.  
  479. <br />
  480.  
  481. <input type="hidden" name="hideLetter" value="123" />
  482. <table width="100%" border="0" cellpadding="3" cellspacing="1" id="clone_table_files">
  483. <tr valign="top" class="red"> 
  484.     <td colspan="3"><strong>File Attachments Section (total 5 MB max)</strong></td> 
  485. </tr>
  486. <tr valign="top" class="cloneFile">
  487. <td>Letter1</td>
  488. <td>
  489.  
  490.     <input name="Letter1" type="text" />
  491.  
  492. <div align="right"><input type="button" value="Delete This Letter" onclick="deleteRow(this)" /></div>
  493. </td>
  494. </tr>
  495.  
  496. <tr>
  497.     <td colspan="2">
  498.         <input type="button" value="Add More Letters" onclick="clone_rows_files('files');hidediv('imgToHide'); return false;" /></td>
  499. </tr>
  500. </table>
  501.  
  502.  
  503. <table>
  504. <tr valign="top">
  505.  
  506. <td><input name="submit_form" type="submit" value="Submit"></td>
  507. <td align="right"></td>
  508. </tr>
  509. </table>
  510. </form>
  511.  
  512. </td>
  513.  
  514.         <td></td>
  515.     </tr>
  516.  
  517. </table>
  518. <br><br><br><br>
  519. </body>
  520. </html>
  521.  
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Output</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6.  
  7. <script language="JavaScript">
  8.  
  9. function printToPage()
  10. {
  11.     var pos;
  12.     var searchStr = window.location.search;
  13.     var searchArray = searchStr.substring(1,searchStr.length).split('&');
  14.     var htmlOutput = '';
  15.     for (var i=0; i<searchArray.length; i++) {
  16.         htmlOutput += searchArray[i] + '<br />';
  17.     }
  18.     return(htmlOutput);
  19. }
  20.  
  21. </script>
  22.  
  23.  
  24. </head>
  25.  
  26. <body>
  27. Below should be the name/value pairs that were submitted:
  28. <p>
  29. <script language="JavaScript">
  30. <!--
  31. document.write(printToPage());
  32. //-->
  33. </script>
  34. </p>
  35.  
  36. </body>
  37. </html>
  38.  
Please help!

Thanks in advance,
Nigel
Oct 4 '08 #1
3 3662
acoder
16,027 Expert Mod 8TB
Line 225:
Expand|Select|Wrap|Line Numbers
  1. app.countFile = app.countFile-"1"; 
should be
Expand|Select|Wrap|Line Numbers
  1. app.countFile = app.countFile-1; 
Oct 4 '08 #2
Line 225:
Expand|Select|Wrap|Line Numbers
  1. app.countFile = app.countFile-"1"; 
should be
Expand|Select|Wrap|Line Numbers
  1. app.countFile = app.countFile-1; 
I tried that and it still didn't work
Oct 4 '08 #3
You can also go to: bestconsultation dot com / form to see the code

Still having the same problem as far as if you click on "Add More Letters" twice, then click on "Add More Colors" twice, then click on "Delete This Letter" once, I got an error

"file count is NaN"

Please help!

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <head>
  4. <title>Colors and Letters</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.  
  7. <script type="text/javascript">
  8.  
  9. /**************************
  10. // clone the Item rows
  11. **************************/
  12.  
  13. function clone_rows(myType) {
  14.     //If its the first time, then clone the rows
  15.     if( ! clone_rows.app){
  16.         clone_rows.app = { firstRun: true };
  17.         app = clone_rows.app;
  18.         app.counterer = 0;
  19.     }
  20.  
  21.     app = clone_rows.app;
  22.     app.counterer++;
  23.  
  24.         var clone_table =  el(  (myType === "items" ? "clone_table" :
  25. "clone_table") || "clone_table" )
  26.  
  27.         var rows = tags( clone_table,"tr");
  28.  
  29.     if( ! app.clones) {
  30.         app.clones=[];
  31.         var startIndex = 0;
  32.         var rowCount = rows.length;
  33.         function getClones(a,b) {
  34.             if(a.className === "clone") { 
  35.                 var t =  a.cloneNode(true); 
  36.                 t.className = ""; 
  37.                 app.clones[app.clones.length] =t; 
  38.                 startIndex = b; 
  39.                 return t;  
  40.             };
  41.         }
  42.         rows.map(getClones);
  43.     }
  44.  
  45.     function dupeNode(a) {
  46.         return a.cloneNode(true);
  47.     }
  48.  
  49.     function updateInputs(a,bb)
  50.     {
  51.         var r = tags(a, "input") || [];
  52.         r = r.concat( tags(a, "select") );
  53.         if(!r || !r[0]) {
  54.             return;
  55.         }
  56.         r.map(function(a,b,c) {
  57.             if(!a) {
  58.                 return;
  59.             }
  60.             var newInput = a;
  61.             var oldName = newInput.name.split("_");
  62.             if (oldName[1]) {
  63.                 oldName = oldName[1];
  64.                 newInput.name = "item" + app.counterer + "_" + oldName;
  65.             }
  66.             if (newInput.tabIndex) {
  67.                 app.tab = app.tab+20;
  68.                 newInput.tabIndex = app.tab;
  69.             }
  70.         });
  71.         return a;
  72.     }
  73.  
  74.     // Set the counter item (passes how many cloned rows there are)
  75.         var hiddenCount = el("counterer") || document.createElement("input");
  76.         hiddenCount.setAttribute("type", "hidden");
  77.         hiddenCount.id = "counterer";
  78.         hiddenCount.setAttribute("name", "theItemCount");
  79.         hiddenCount.setAttribute("value",app.counterer);
  80.         el("clone_table").appendChild(hiddenCount);
  81.         alert(app.counterer);
  82.  
  83.  
  84.     var clones = app.clones.map(dupeNode); //new instance
  85.     app.clones2= clones;
  86.  
  87.     var spot = rows[ rows.length -1 ];
  88.     var mom = spot.parentNode;
  89.  
  90.     clones.map(function(a,b){ mom.insertBefore(a, spot );})
  91.     clones.map(updateInputs);
  92.  
  93.  
  94.     for(var i =0, mx= clones.length; i<mx;i++) {
  95.         var tt= tags(clones[i], "input");
  96.         if(tt && tt[0]) { 
  97.             var it = tt[0];
  98.             if(it.scrollIntoView) {
  99.                 it.scrollIntoView(true); 
  100.             } ; return
  101.             setTimeout(function() {    
  102.                 it.focus();     
  103.             }, 200);
  104.         }
  105.     }
  106.  
  107. }//end of clone row function
  108.  
  109.  
  110.  
  111.  
  112.  
  113. /**************************
  114. // clone the file rows
  115. **************************/
  116.  
  117. function clone_rows_files(myType) {
  118.      //If its the first time, then clone the rows 
  119.     if( ! clone_rows_files.app) {
  120.         clone_rows_files.app = { firstRun: true };
  121.         app = clone_rows_files.app;
  122.         app.countFile = 0;
  123.         app.tab = 500;
  124.     }
  125.  
  126.     app = clone_rows_files.app;
  127.     app.countFile++;
  128.  
  129.     var clone_table_files =  el("clone_table_files")
  130.     var rows = tags( clone_table_files,"tr");
  131.     if( ! app.clones) { 
  132.         app.clones=[];
  133.         var startIndex = 0;
  134.         var rowCount = rows.length;
  135.  
  136.         function getClones(a,b) {
  137.             if(a.className === "cloneFile") { 
  138.                 var t =  a.cloneNode(true); 
  139.                 t.className = ""; 
  140.                 app.clones[app.clones.length] =t; 
  141.                 startIndex = b; 
  142.                 return t;  
  143.             };
  144.         }
  145.         rows.map(getClones);
  146.     }
  147.  
  148.  
  149.     function dupeNode(a) {
  150.         return a.cloneNode(true);
  151.     }
  152.  
  153.     function updateInputs(a,bb) {
  154.         var r = tags(a, "input") || [];
  155.         r = r.concat( tags(a, "select") );
  156.         if(!r || !r[0]) {
  157.             return;
  158.         }
  159.         r.map(function(a,b,c) {
  160.             if(!a) {
  161.                 return;
  162.  
  163.  
  164.             }
  165.  
  166.             var newInput = a;
  167.             var oldName = newInput.name.split("_");
  168.  
  169.             if (oldName[1]) {
  170.                 oldName = oldName[1];
  171.                 newInput.name = "file" + app.countFile + "_" + oldName;
  172.             }
  173.  
  174.             if (newInput.tabIndex) {
  175.                 app.tab = app.tab+20;
  176.                 newInput.tabIndex = app.tab;
  177.             }
  178.         });
  179.         return a;
  180.     }
  181.  
  182.     // Set the counter item (passes how many cloned rows there are)
  183.         var hiddenCount = el("file_counter") || document.createElement("input");
  184.         hiddenCount.setAttribute("type", "hidden");
  185.     hiddenCount.id = "file_counter";
  186.     hiddenCount.setAttribute("name", "theFileCount");
  187.         hiddenCount.setAttribute("value",app.countFile);
  188.         el("clone_table_files").appendChild(hiddenCount);
  189.  alert("file count is " + app.countFile);
  190.  
  191.  
  192.  
  193.  
  194.     var clones = app.clones.map(dupeNode); //new instance
  195.     app.clones2= clones;
  196.  
  197.     var spot = rows[ rows.length -1 ];
  198.     var mom = spot.parentNode;
  199.  
  200.     clones.map(function(a,b){ mom.insertBefore(a, spot );})
  201.     clones.map(updateInputs);
  202.  
  203.     for(var i =0, mx= clones.length; i<mx;i++){
  204.  
  205.         var tt= tags(clones[i], "input");
  206.         if(tt && tt[0]) { 
  207.             var it = tt[0];
  208.             if(it.scrollIntoView) {
  209.                 it.scrollIntoView(true); 
  210.             } ; 
  211.             return
  212.             setTimeout(function() {    
  213.                 it.focus();     
  214.             }, 200);
  215.         }
  216.     }
  217. }//end of clone row file funciton
  218.  
  219.  
  220.  
  221. /**************************
  222. // Delete Row Items
  223. **************************/
  224.  
  225. function deleteColor(){
  226.     for (i = 0;i <= 5; i++){
  227.     document.getElementById('clone_table').deleteRow(1);
  228.     }
  229.  
  230.     // Subtract 1 from the file count
  231.     app.counterer--; 
  232.     // Set the counter item (passes how many cloned rows there are)
  233.         var hiddenCount = el("counterer") || document.createElement("input");
  234.         hiddenCount.setAttribute("type", "hidden");
  235.         hiddenCount.id = "counterer";
  236.         hiddenCount.setAttribute("name", "theItemCount");
  237.         hiddenCount.setAttribute("value",app.counterer);
  238.         el("clone_table").appendChild(hiddenCount);
  239.         alert(app.counterer);
  240.  
  241. }//end of delete row item function
  242.  
  243. /**************************
  244. // Delete Row File
  245. **************************/
  246.  
  247. function deleteRow(r)
  248. {
  249.     var o=r.parentNode.parentNode.parentNode.rowIndex;
  250.     document.getElementById('clone_table_files').deleteRow(o);
  251.  
  252.     app.countFile--; 
  253.     var hiddenFileCount = el("file_counter") || document.createElement("input");
  254.  
  255.     hiddenFileCount.setAttribute("type", "hidden");
  256.     hiddenFileCount.id = "file_counter";
  257.  hiddenFileCount.setAttribute("name", "theFileCount");
  258.  hiddenFileCount.setAttribute("value",app.countFile);
  259.  el("clone_table_files").appendChild(hiddenFileCount);
  260.  alert("file count is " + app.countFile);
  261.  
  262.  
  263. }//end of delete row file funciton
  264.  
  265.  
  266.  
  267. /**************************
  268. // Style the file rows
  269. **************************/
  270. function stylizeFile() 
  271. {
  272.     var rows = tags( "clone_table_files" ,"tr");
  273.     function colorize(a,i)
  274.     {
  275.         if (i % 2) {
  276.             var bgcolor = "#C3D6E8";
  277.         } else {
  278.             var bgcolor = "#CCCCCC";
  279.         }
  280.  
  281.         tags(a, "td")[0].style.textAlign = "right";
  282.         a.style.backgroundColor= a.getAttribute("bgcolor") ?  a.bgcolor : bgcolor ;
  283.     }
  284.     rows.map(colorize);
  285. }
  286.  
  287.  
  288.  
  289.  
  290.  
  291. /**************************
  292. // Style the Item rows
  293. **************************/
  294. function stylizeItem(){
  295.     var rows = tags( "clone_table" ,"tr");
  296.     function colorize(a,i)
  297.     {
  298.         if (i % 2) {
  299.             var bgcolor = "#C3D6E8";
  300.         } else {
  301.             var bgcolor = "#CCCCCC";
  302.         }
  303.         tags(a, "td")[0].style.textAlign = "right";
  304.         a.style.backgroundColor= a.getAttribute("bgcolor") ?  a.bgcolor : bgcolor ;
  305.     }
  306.     rows.map(colorize);
  307. }
  308.  
  309.  
  310. function el(tid)
  311. {
  312.     return document.getElementById(tid);
  313. }
  314.  
  315.  
  316. function obValsl(ob)
  317. {
  318.     try {
  319.         if (ob && ob.length) {
  320.             var r = [], i = 0, mx = ob.length;
  321.             for (var z = 0; z < mx; z++) {
  322.                 r[z] = ob[z] || undefined;
  323.             }
  324.         }
  325.     } catch (yy) {
  326.         alert(yy);
  327.     }
  328.     return r;
  329. };
  330.  
  331.  
  332. function tags(elm, tid)
  333. {
  334.     var t = "getElementsByTagName";
  335.     if (tid) {
  336.         if (elm.charCodeAt) {
  337.             elm = el(elm);
  338.         }
  339.         return obValsl(elm[t](tid));
  340.     }
  341.     return obValsl(document[t](elm));
  342. }
  343.  
  344. if (!Array.prototype.map) {
  345.     // from http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Objects:Array:map
  346.     Array.prototype.map =
  347.  
  348.     function (fun)
  349.     {
  350.         var len = this.length;
  351.         if (typeof fun != "function") {
  352.             throw new TypeError;
  353.         }
  354.         var res = new Array(len);
  355.         var thisp = arguments[1];
  356.         for (var i = 0; i < len; i++) {
  357.             if (i in this) {
  358.                 res[i] = fun.call(thisp, this[i], i, this);
  359.             }
  360.         }
  361.         return res;
  362.     };
  363. }
  364.  
  365.     // this function is needed to work around a bug in IE related to element attributes
  366.  
  367.   function hasClass(obj) {
  368.      var result = false;
  369.      if (obj.getAttributeNode("class") != null) {
  370.          result = obj.getAttributeNode("class").value;
  371.      }
  372.      return result;
  373.   }   
  374.  
  375.  
  376. </script>  
  377.  
  378.  
  379. </head>
  380.  
  381. <body bgcolor="#FFFFFF" onLoad="stylizeItem();stylizeFile();stylizeItem();">
  382.  
  383.  
  384. <form action="see_results.html" method="get" name="theForm" id="test">
  385.  
  386.     <!-- Letters SECTION -->
  387.   <table width="50%" border="0" cellpadding="3" cellspacing="1" id="clone_table">
  388.     <tr>
  389.         <td colspan="2"><div align="right"><input type="button" value="Delete This Color" onclick="deleteColor(this)" /></div></td>
  390.     </tr>
  391.     <tr valign="top" class="clone"> 
  392.       <td>Color11</td>
  393.       <td><input type=text name="Color11" size="5" maxlength="350">
  394.  
  395.  
  396.  
  397.       </td>
  398.     </tr>
  399.     <tr valign="top" class="clone"> 
  400.       <td>Color12</td>
  401.       <td><input type=text name="Color12" size="5" maxlength="350" value=""></td>
  402.     </tr>
  403.     <tr valign="top" class="clone"> 
  404.       <td>Color13</td>
  405.       <td><input type=text name="Color13" size="5" maxlength="350" value="" ></td>
  406.     </tr>
  407.     <tr valign="top" class="clone"> 
  408.       <td>Color14</td>
  409.       <td><input type=text name="Color14" size="40" maxlength="250" value="" class="required"></td>
  410.     </tr>
  411.     <tr valign="top" class="clone"> 
  412.       <td>Color16</td>
  413.       <td> <select name="Color16">
  414.           <option value="">--None--</option>
  415.           <option value="red"
  416. >red</option>
  417.           <option value="black"
  418. >black</option>
  419.           <option value="orange"
  420. >orange</option>
  421.         </select> </td>
  422.     </tr>
  423.     <tr class="clone" bgcolor="#000000"> 
  424.       <td><br /> </td>
  425.       <td> <br /> </td>
  426.     </tr>
  427.     <tr> 
  428.       <td colspan="2"> <input type="button" value="Add More Colors" onclick="clone_rows('items'); return false;"  /></td>
  429.     </tr>
  430.   </table>
  431.  
  432. <br />
  433. <p>
  434. <br />
  435. <table width="50%" border="0" cellpadding="3" cellspacing="1" id="clone_table_files">
  436. <tr valign="top" class="red"> 
  437.     <td colspan="3"><strong>Colors Section</strong></td> 
  438. </tr>
  439. <tr valign="top" class="cloneFile">
  440. <td>Letter1</td>
  441. <td>
  442.  
  443.     <input name="Letter1" type="text" />
  444.  
  445. <div align="right"><input type="button" value="Delete This Letter" onclick="deleteRow(this)" /></div>
  446. </td>
  447. </tr>
  448.  
  449. <tr>
  450.     <td colspan="2">
  451.         <input type="button" value="Add More Letters" onclick="clone_rows_files('files');hidediv('imgToHide'); return false;" /></td>
  452. </tr>
  453. </table>
  454.  
  455.  
  456. <table>
  457. <tr valign="top">
  458.  
  459. <td><input name="submit_form" type="submit" value="Submit"></td>
  460. <td align="right"></td>
  461. </tr>
  462. </table>
  463. </form>
  464.  
  465. </td>
  466.  
  467.         <td></td>
  468.     </tr>
  469.  
  470. </table>
  471. <br><br><br><br>
  472. </body>
  473. </html>
  474.  
Oct 5 '08 #4

Post your reply

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

Similar topics

PHP
resultsets - deleting from while processing safe?
4 posts views Thread by Jim Michaels | last post: by
DataGridView deleting multiple rows
3 posts views Thread by manjub | last post: by
Cloning Two Tables
1 post views Thread by nigelesquire | last post: by
Markdown-ImageLocalize
reply views Thread by YellowAndGreen | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2023
About Bytes
Advertise
Terms Of Use
Privacy Policy
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates