dynamically add row in Javascript not working in IE

Question

Dynamically adding new rows by using javascript. Everything works fine in Firefox but in IE doesn't work properly.

Issue : When adding new row ,values also fetching from previous row. Hide cell doesn't work (newcell.style.display = "none")
getting Undefined in IE (newcell.childNodes[1].type)

My code:

HTML

 <table id="coins" class="coins" name="coins">  
      <tr id="0">
       <th>
        <label>Bills/Coins</label>    
      </th>
      <th>                      
        <label>Qty</label>
      </th>
      <th>               
        <label>Line Amount</label>
      </th>
      </tr>
      <tr id="1">                           
      <td>                                        
        <cws:productCashList onchange="productprice(this)"/>    
      </td>              
      <td>  
        <input name="Qty" type="text" id="Qty_1" size="10" maxlength="60" value="1" onblur="lineamt(this.id);" />
      </td>
      <td>  
        <input name="lineamount" type="text" id="lineamount_1" size="10" maxlength="60" value="0" />      
      </td>
      <td>                                                              
        <input class="bluebutton" type="button" id="addrow" value="Add" onclick="add('coins');"/>              
      </td>
      <td style="display:none">                                                                           
        <input class="bluebutton" name="deleterow" type="button" id="deleterow_1" value="Delete"  onclick="adelete(this.id);" />              
      </td>
      <td style="display:none">                                                                           
      <input name="price" type="text" id="price_1" size="10" maxlength="60" value="1"/> 
      </td>

     </tr>  
     </tbody>             
     </table>

Javascript

function add(tableID)
{
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    row.id = rowCount;
    var colCount = table.rows[rowCount-1].cells.length;

    for(var i=0; i<colCount; i++) 
    {
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[1].cells[i].innerHTML;                 
        if(i==4)
            newcell.style.display = "none";                            
        switch(newcell.childNodes[1].type) {

        case "text":                           
            newcell.childNodes[1].id = newcell.childNodes[1].name+"_"+rowCount;   
            if(newcell.childNodes[1].name == "Qty")     
                newcell.childNodes[1].value = "1";   
            if(newcell.childNodes[1].name == "price") 
                newcell.style.display = "none";  
            else
                newcell.childNodes[1].value = "0";                
            break;                                                              
        case "button":   
            if(newcell.childNodes[1].value == "Delete")      
                newcell.childNodes[1].id = newcell.childNodes[1].name+"_"+rowCount;                                        
            break;  
        case "select-one":                      
            newcell.childNodes[1].id = "ID_"+newcell.childNodes[1].name+"_"+rowCount;   
            newcell.childNodes[1].selectedIndex = 0;
            break;                              
        }                
    }
    if(rowCount>1) 
    {
        var prerow  = table.rows[rowCount-1];                   
        var childcell = prerow.cells[3];               
        childcell.style.display = "none";
        var childcell = prerow.cells[4];
        childcell.style.display = "block";                                       
    }
}

Please anyone help me to resolve this.

Can you paste your code here(include the table HTML and the script that call the above function)? — The KNVB
– The KNVB, Commented Oct 15, 2015 at 4:26

zaparker · Accepted Answer · 2015-10-20 09:29:01Z

1

It looks like you're missing an opening <tbody> tag. Some browsers are smart and handle this just fine, but others freak out. Try adding the opening <tbody> and see if it still doesn't work in IE.

EDIT: Also your index into childNodes is always [1]. Shouldn't it be [0]? Here's a JSFiddle with the indexes changed: https://jsfiddle.net/nLrru7xw/

EDIT 2: Instead of iterating over all of the columns and all of the child nodes and using an if statement, it may be better to use something a little more targeted such as querySelector. For example:

row.querySelector('input[name="Qty"]').value = '1';
row.querySelector('input[name="price"]').display = 'none';
var allInputs = row.querySelectorAll('input');
for(var i = 0; i < allInputs.length; ++i) {
    allInputs[i].id = allInputs[i].name + '_' + rowCount;
}

This snippet doesn't set all the same things your code tries to set, but I think it's a good starting point for you.

edited Oct 20, 2015 at 9:29

answered Oct 15, 2015 at 6:20

zaparker

4853 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

shiva kumar Over a year ago

As per @zaparker suggestion. It is working well if the childNodes index is[0] for IE. But for FF, Chrome it is working if childnodes index is [1]. Also found a similar query [stackoverflow.com/questions/2154801/…

Silviaa Over a year ago

i proceed with for (var j = 0; j < newcell.childNodes.length; j++) { switch (newcell.childNodes[j].type) }

Collectives™ on Stack Overflow

dynamically add row in Javascript not working in IE

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related