javascript - 在 Javascript 中动态添加行在 IE 中不起作用

Question

使用 JavaScript 动态添加新行。在 Firefox 中一切正常，但在 IE 中却无法正常工作。

问题:添加新行时，也会从前一行获取值。隐藏单元格不起作用 (newcell.style.display = "none")
在 IE 中未定义 (newcell.childNodes[1].type)

我的代码:

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";                                       
    }
}

请任何人帮我解决这个问题。

Answer 1

您似乎缺少一个空缺 <tbody>标签。有些浏览器很聪明，可以很好地处理这个问题，但其他浏览器却很糟糕。尝试添加开头 <tbody>看看它在 IE 中是否仍然不起作用。

编辑: 此外，您对 childNodes 的索引始终为 [1]。不应该是[0]吗？这是索引已更改的 JSFiddle:https://jsfiddle.net/nLrru7xw/

编辑2:不要迭代所有列和所有子节点并使用 if声明，最好使用更有针对性的东西，例如 querySelector 。例如:

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

此代码段并未设置您的代码尝试设置的所有相同内容，但我认为这对您来说是一个很好的起点。