動態HTML對齊在Chrome中不正確，但在IE和FF中正常工作

Question

這是我在其中使用內部Html創建表的代碼。輸入框對齊功能在IE和Firefox中很好，但在Chrome中顯示爲向後。我不知道這段代碼有什麼問題。

我希望你有任何建議。

function insertRow(){  

    var pricingType = window.dialogArguments.getAttribute('pricingType');  
     var srcTable = document.getElementById("priceTable"); 
     var tmpRow = null; 
     var tmpCell = null; 

     var inp1 = document.createElement("INPUT"); 
     var inp2 = document.createElement("INPUT"); 
     var inp3 = document.createElement("INPUT"); 
     var inp4 = document.createElement("INPUT"); 
     var inp5 = document.createElement("INPUT"); 

     inp1.setAttribute("type","text"); 
     inp2.setAttribute("type","text"); 
     inp3.setAttribute("type","text"); 
     inp4.setAttribute("type","text"); 
     inp5.setAttribute("type","text"); 

     tmpRow = AppendRow(srcTable); 
     tmpRow.setAttribute("borderColor","white");  
     tmpCell = AppendCell(tmpRow); 
     tmpCell.innerHTML = "<font color=red>* denotes required fields"; 
     tmpCell.setAttribute("colSpan","2");  
     tmpCell = null; 
     tmpRow = null; 

    tmpRow = AppendRow(srcTable); 
     tmpRow.setAttribute("borderColor","white"); 

     tmpCell = AppendCell(tmpRow); 
     tmpCell.innerHTML = "<b>*Price Qty"; 
     tmpCell = null; 

     if(pricingType == 'T'){    
      tmpCell = AppendCell(tmpRow); 
      tmpCell.innerHTML = "<b>*Tier Price"; 
      tmpCell = null; 
     } 
     if(pricingType == 'B'){  
      tmpCell = AppendCell(tmpRow); 
      tmpCell.innerHTML = "<b>*Bracket Price"; 
      tmpCell = null; 
     } 
     tmpRow = null; 

     tmpRow = AppendRow(srcTable); 
     tmpRow.setAttribute("borderColor","white"); 

     tmpCell = AppendCell(tmpRow);    
     tmpCell.appendChild(inp1);  
     inp1.setAttribute("name","priceQty");  
     inp1.setAttribute("id","priceQty"); 
     inp1.setAttribute("value",""); 
     tmpCell = null; 

     tmpCell = AppendCell(tmpRow); 
     tmpCell.appendChild(inp2);  
     inp2.setAttribute("name","price"); 
     inp2.setAttribute("id","price"); 
     inp2.setAttribute("value",""); 
     tmpCell = null; 
     tmpRow = null; 

     tmpRow = AppendRow(srcTable); 
     tmpRow.setAttribute("borderColor","white"); 

     tmpCell = AppendCell(tmpRow); 
     tmpCell.innerHTML = "<b>*PriceStartDate(e.g. 06/12/2007)"; 
     tmpCell = null; 

     tmpCell = AppendCell(tmpRow); 
     tmpCell.innerHTML = "<b>PriceEndDate(e.g. 06/12/2007)"; 
     tmpCell = null; 
     tmpRow = null; 

     tmpRow = AppendRow(srcTable); 
     tmpRow.setAttribute("borderColor","white");  

     tmpCell = AppendCell(tmpRow); 
     tmpCell.appendChild(inp3);  
     inp3.setAttribute("name","priceStartDate"); 
     inp3.setAttribute("id","priceStartDate"); 
     inp3.setAttribute("value",""); 
     tmpCell = null; 

     tmpCell = AppendCell(tmpRow); 
     tmpCell.appendChild(inp4);  
     inp4.setAttribute("name","priceEndDate"); 
     inp4.setAttribute("id","priceEndDate"); 
     inp4.setAttribute("value",""); 
     tmpCell = null; 
     tmpRow = null; 

     tmpRow = AppendRow(srcTable); 
     tmpRow.setAttribute("borderColor","white"); 

     tmpCell = AppendCell(tmpRow); 
     tmpCell.innerHTML = "<b>*Created By"; 
     tmpCell = null; 
     tmpRow = null; 

     tmpRow = AppendRow(srcTable); 
     tmpRow.setAttribute("borderColor","white"); 

     tmpCell = AppendCell(tmpRow);    
     tmpCell.appendChild(inp5);  
     inp5.setAttribute("name","createUserId"); 
     inp5.setAttribute("id","createUserId"); 
     inp5.setAttribute("value",""); 
     tmpCell = null; 
     tmpRow = null; 

} 

//AppendRow JS funcation 

function AppendRow(srcTable) 
{ 
    if(srcTable != null) 
    { 
     return srcTable.insertRow(); 
    } 
    else 
    { 
     alert("Error while creating table. Cause: Container Table is null!"); 
    } 
} 

//AppendCell JS funcation 
function AppendCell(srcRow) 
{ 
    if(srcRow != null) 
    { 
     return srcRow.insertCell(); 
    } 
    else 
    { 
     alert("Error while creating table. Cause: Container row is null!"); 
    } 
} 

Chrome是否有內部html的問題？

Answer 1

從AppendRow()返回新創建的行這樣的：return srcTable.insertRow(-1);

瀏覽器位置插入的行不同，如果省略index argument。通過-1總是在表的末尾附加新創建的行。