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

Hi,

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

Please help...

Expand|Select|Wrap|Line Numbers

  
<html>

<head>

<title>Page title</title>
 
<script language="javascript">
 
function clone_rows(myType)

{
 
        if (myType == 'items') {

                    var clone_table=document.getElementById("clone_table");

        }

        if (myType == 'files') {

                var clone_table=document.getElementById("clone_table_files");

        }
 
        var clones=[];

        var startIndex=0;

        var rows=clone_table.getElementsByTagName("tr");
 
        for (var i=0; i < rows.length; i++) {

                if (rows[i].className=='clone') {

                        rows[i].className="";
 
                        clones.push(rows[i]);
 
                        startIndex=i;

                }

        }
 
        var new_name_number=parseInt((parseInt(rows.length)-2) / parseInt(clones.length));
 
        for (i=0; i < clones.length; i++) {
 
                var new_row=clone_table.insertRow(startIndex+i+1);
 
                if (i% 2 == 0)

                        var bgcolor = "C3D6E8";

                else

                        var bgcolor = "CCCCCC";
 
                if (myType == 'files') {

                        var last_row= clone_table.rows.length;

                        if (last_row% 2 == 0)

                                var bgcolor = "CCCCCC";

                        else

                                var bgcolor = "C3D6E8";

                }
 
                if (i == clones.length-1 && i != 0)

                        var bgcolor = "000000";
 
                new_row.style.backgroundColor = bgcolor;
 
                new_row.className="clone";
 
                var cloned_children=clones[i].getElementsByTagName("td");
 
                for (var j=0; j < cloned_children.length; j++) {

                        var new_cell=new_row.insertCell(-1);

                        new_cell.innerHTML=cloned_children[j].innerHTML;
 
//                      new_cell.innerHTML=new_cell.innerHTML.replace(/name=\"[0-9]{0,2}/g, "name=\"");

//                      new_cell.innerHTML=new_cell.innerHTML.replace(/name=\"/g, "name=\"" + new_name_number + "#");

//                      new_cell.innerHTML=new_cell.innerHTML.replace(/#/g, "@");

                        // This replaces existing digits and _ and adds in the new # with a _

                        new_cell.innerHTML=new_cell.innerHTML.replace(/name=\"\d*_*/g, "name=\"" + new_name_number + "_");

                }

        }
 
        var hiddenCount = document.createElement("input");

        hiddenCount.setAttribute("type", "hidden");

        if (myType == 'items') {

                hiddenCount.setAttribute("name", "theItemCount");

        }

        if (myType == 'files') {

                hiddenCount.setAttribute("name", "theFileCount");

        }

        hiddenCount.setAttribute("value", new_name_number);

        document.getElementById("clone_table").appendChild(hiddenCount);
 
}
 
</script> 

</head>

<body>
 
<table>

    <tr>

        <td></td>

        <td align="right"></td>

    </tr>

</table>

<table width="900" border="0" cellspacing="0" cellpadding="0">

    <tr>

        <td><img src="#" width="20" height="10" border="0"></td>

        <td><br>
 
<form action="" method="get" name="theForm">
 
    <table id="clone_table">

<tr >

<td colspan="3">Item1</td>

</tr>

    <tr bgcolor="" valign="top" class="clone">

    <td>Item2</td>

    <td><input type=text name="0_Item2" size="5" maxlength="350" value=""></td>

</tr>

    <tr bgcolor="" valign="top" class="clone">

    <td>Item3</td>

    <td><input type=text name="0_Item3" size="5" maxlength="350" value=""></td>

</tr>

    <tr valign="top" class="clone">

    <td>Item4</td>

    <td><input type=text name="0_Item4" size="5" maxlength="350" value=""></td>

    </tr>

    <tr bgcolor="" valign="top" class="clone">

    <td>Item5</td>

    <td colspan="2"><input type=text name="0_Item5" size="40" maxlength="250" value=""></td>

    </tr>

<tr bgcolor="" valign="top" class="clone">

<td>Item6</td>

<td>

<select name="0_Item6">

<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>

Item7</td>

<td>

<select name="0_Item7">

<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></td>

<td></td>

</tr>

    <tr>

    <td colspan="3"><input type="button" value="Add More Items" onclick="clone_rows('items'); return false;" /></td>

    </tr>

</table>

<br />
 
<table>

<tr valign="top">

<td><input name="submit_form" type="submit" value="Submit" /></td>

<td align="right"></td>

</tr>

</table>

</form>
 
</td>
 
        <td></td>

    </tr>

</table>
 
<br><br><br><br>

</body>

</html>

Please help...

Sep 28 '08 #1

Subscribe Post Reply

3174

RamananKalirajan

608

512MB

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

427

Expert 256MB

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

use dom methods instead.

Sep 29 '08 #3

nigelesquire

The array number is not showing for IE.

Sep 29 '08 #4

nigelesquire

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

427

Expert 256MB

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

  
<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>

Sep 30 '08 #6

nigelesquire

You are a blessing~!!

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

Thank you so much~!!

Sep 30 '08 #7

Similar topics

Javascript forms question, please help.

by: Acorn Tutors | last post by:

Hi folks, thanks for reading. I was wondering. I would like to create a form where if an option is chosen in one box, it will change the options available in one later in the form. Can anyone...

Javascript

Cloning or copying an XMLelement (please help)

by: ryanr | last post by:

I've run into a problem with a recursive algorithm. Basically, it grabs a tree, and creates premutations based off it. For example: Suppose you have you sell shoes in two colors (Black,...

C# / C Sharp

this code works in IE but not Firefox - please help

by: Notgiven | last post by:

Both of the following code smippets work in IE but not in Firefox. The javascript error for both scripts below is "x has not properties". The select boxes are shown as arrays since they are...

Javascript

AJAX .responseText not working - Please Help!

by: Snt | last post by:

Hi! I am trying to get AJAX working on multiple browsers and am having a problem with Firefox. I have the following code: function handleState3(){ switch(http.readyState) { case 0: //...

Javascript

Something wrong or a Bug in Firefox? - please help!

by: Randy | last post by:

Hi everyone, I'm trying to fix something I've done wrong, or is it a bug? My CSS looks ok in DW 8 preview, IE/Mac and Safari, but Firefox 1.5.0.4/Mac doesn't display the right menu correctly,...

HTML / CSS

Creating button dynamically not working in firefox..please help

by: ShutterMan | last post by:

I have a function that creates input buttons dynamically... function $NEW_BUTTON(id, content, parentId, cssclass, onclick) { var ctrl = document.createElement("input"); ctrl.id = id;...

Javascript

Hi, my html/css code is appers fine in IE 6 but not in Mozilla Firefox, Please help

by: praveenb000 | last post by:

Hi, every one on this forum.... I am new to web designing (using HTML/CSS). i designed a web page using HTML, Css with dream weaver. Here is the code i used for the desinging. it appears well...

HTML / CSS

Cloning and Deleting Multiple Rows with Javascript

by: nigelesquire | last post by:

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...

Javascript

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing