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

**RamananKalirajan** · Sep 29 '08, 05:42 AM

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

**rnd me** · Sep 29 '08, 06:24 AM

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

use dom methods instead.

**nigelesquire** · Sep 29 '08, 03:34 PM

The array number is not showing for IE.

**nigelesquire** · Sep 30 '08, 02:09 AM

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~

Originally posted by rnd me

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

use dom methods instead.

**rnd me** · Sep 30 '08, 11:10 AM

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.

Code:


<html>
<head>
<title>Page title</title>
 
 
<script language="javascript">
 
function clone_rows(myType) {
 
    if( ! clone_rows.app){ 
        clone_rows.app = { firstRun: true };
         app = clone_rows.app;
                app.count = 0;
        app.tab = 500;
     }
 
     app = clone_rows.app;
 
        app.count++;
        var clone_table =  el(  (myType === "items" ? "clone_table" : "clone_table_files") || "clone_table" )
        var rows = tags( clone_table,"tr");
 
    if( ! app.clones){ app.clones=[];
 
               var startIndex = 0;
            var rowCount = rows.length;
        function getClones(a,b){ 
            if(a.className === "clone"){ var t =  a.cloneNode(true); t.className = ""; app.clones[app.clones.length] =t; startIndex = b; return t;  };
          }
        rows.map(getClones);
 
    }
 
function dupeNode(a){return a.cloneNode(true);}
 
 
function updateInputs(a,bb){
    var r = tags(a, "input") || [];
    r = r.concat( tags(a, "select") );
    if(!r || !r[0]){return;}    
 
    r.map(function(a,b,c){
        if(!a){return;}
        var newInput = a;
         var oldName = newInput.name.split("_");
                    if (oldName[1]) {
                        oldName = oldName[1];
            newInput.name = "item" + app.count + "_" + oldName;
           }
 
                    if (newInput.tabIndex) {
            app.tab = app.tab+20;
                        newInput.tabIndex = app.tab;
                    }
 
    });
  return a;
}
 
 
        var hiddenCount = el("counter") || document.createElement("input");
        hiddenCount.setAttribute("type", "hidden");
    hiddenCount.id = "counter";
        if (myType == "items") {
            hiddenCount.setAttribute("name", "theItemCount");
        }
        if (myType == "files") {
            hiddenCount.setAttribute("name", "theFileCount");
        }
        hiddenCount.setAttribute("value",app.count);
        el("clone_table").appendChild(hiddenCount);
 
       var clones = app.clones.map(dupeNode); //new instance
    app.clones2= clones;
    var spot = rows[ rows.length -1 ];
    var mom = spot.parentNode;
    clones.map(function(a,b){ mom.insertBefore(a, spot );})
    clones.map(updateInputs);
 
 
for(var i =0, mx= clones.length; i<mx;i++){
    var tt= tags(clones[i], "input");
    if(tt && tt[0]){ var it = tt[0];
    if(it.scrollIntoView){it.scrollIntoView(true); } ; return setTimeout(function(){    it.focus();     }, 200);}
}
 
    }//end of clonerow funciton
 
 
function stylize(){
    var rows = tags( "clone_table" ,"tr");
    function colorize(a,i){
                if (i % 2) {
                    var bgcolor = "#C3D6E8";
                } else {
                    var bgcolor = "#CCCCCC";
                }
        tags(a, "td")[0].style.textAlign = "right";
         a.style.backgroundColor= a.getAttribute("bgcolor") ?  a.bgcolor : bgcolor ;
 
    }
        rows.map(colorize);
}
 
 
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 (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
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;};}
 
 
 
</script> 
</head>
<body onload= "stylize()">
 
<table>
    <tr>
        <td>Items</td>
        <td></td>
    </tr>
</table>
<table>
    <tr>
        <td></td>
        <td><br>
 
 
<form action="" method="get" name="theItems">
 
 
    <table>
<tr>
<td>Items2</td>
</tr>
    <tr>
    <td>Items3</td>
    <td><input type=text name="Items3" size="5"   onfocus="this.select();"  tabindex="101" ></td>
</tr>
    <tr bgcolor="" valign="top" class="clone">
    <td>Items4</td>
    <td><input type=text name="4" size="5" maxlength="350" value=""  onfocus="this.select();"  tabindex="102"></td>
</tr>
    <tr class="clone">
    <td>Items5</td>
    <td><input type=text name="Items5" size="5" maxlength="350" value=""  onfocus="this.select();"  tabindex="104"></td>
    </tr>
    <tr class="clone">
    <td>Items6</td>
    <td colspan="2"><input type=text name="Items6" onfocus="this.select();"  tabindex="106" ></td>
    </tr>
<tr bgcolor="" valign="top" class="clone">
<td>Items7</td>
<td>
<select name="Items7"   tabindex="108">
<option value="">--None--</option>
<option value="001"
>001</option>
<option value="002"
>002</option>
<option value="003"
>003</option>
<option value="004"
>004</option>
</select>
</td>
</tr>
<tr class="clone">
<td>
Items8</td>
<td>
<select name="Items8"    tabindex="110">
<option value="">--None--</option>
<option value="101"
>101</option>
<option value="102"
>102</option>
<option value="103"
>103</option>
</select><br>
</td>
</tr>
<tr class="clone">
<td> <br /> </td>
<td> <br /> </td>
</tr>
    <tr>
    <td colspan="3"><input type="button" value="Add More Items" onclick="clone_rows('items'); return false;"   tabindex="5110" /></td>
    </tr>
</table>
<br />
 
 
<table>
<tr>
<td> </td>
<td ></td>
</tr>
</table>
<input name="submit_form" type="submit" value="Submit"   tabindex="5150" />
 
</form>
</body>
</html>

**nigelesquire** · Sep 30 '08, 02:50 PM

If everyone was as helpful as you, the world would be a better place

You are a blessing~!!

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

Thank you so much~!!

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

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

Comment

Comment

Comment

Comment

Comment

Comment