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

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

动态添加Javascript中的行无法在IE中运行

1 个答案: