HTML表格佈局不適合在Chrome瀏覽器中顯示，但在Firefox正確顯示？

Question

我已經使用Javascript動態創建html表格，但是當我在Firefox上運行它時它看起來不錯，但是當我在鉻表格佈局上運行它時，看起來不如Firefox。

FireFox Image 

Chrome Image 

我想表的佈局看起來像Firefox瀏覽器。

My Code 

<script language="javascript"> 

     i=1; 
     function dummy(chackValue) 
     { 
      var table=document.getElementById("dataTable"); 
      var row1=table.insertRow(); 
      var row2=table.insertRow(); 
      var row3=table.insertRow(); 
      var row4=table.insertRow(); 


      var cell1=row1.insertCell(0); 
      var element1 = document.createElement("input"); 
      cell1.rowSpan="4",'size','width="100px"'; 
      cell1.innerHTML="&nbsp;&nbsp;&nbsp;"; 
      cell1.align="center"; 
      element1.type = "checkbox"; 

      element1.name="chkbox"; 
      element1.id="id_checkbox"; 
      element1.onClick="changeDelete(this)"; 
      //cell1.innerHTML=i++; 
      cell1.appendChild(element1); 

      var cell1=row2.insertCell(0); 
      cell1.innerHTML="Brand:&nbsp;&nbsp;&nbsp"; 
      var el = document.createElement('select'); 
      var opt = document.createElement('option'); 

      el.setAttribute('name', 'txtRow'); 
      el.setAttribute('size', 'width="100px"'); 
      cell1.appendChild(el); 


      var label = document.createTextNode('---Tablets---'); 
      opt.setAttribute('value', 'item1value'); 
      opt.appendChild(label); 
      //opt.onchange=itemChange(this); 
      el.appendChild(opt); 
      cell1.appendChild(el); 

      var cell2=row2.insertCell(1); 
      cell2.innerHTML="Dose:"; 
      cell2.rowSpan="2"; 

      var cell3=row2.insertCell(1); 
      cell3.innerHTML="Days:"; 
      cell3.rowSpan="2"; 

      var cell4=row2.insertCell(3); 
      cell4.rowSpan="2"; 
      cell4.innerHTML="Qty:"; 

      var cell1=row3.insertCell(0); 
      cell1.innerHTML="Generic: "; 

      var cell1=row4.insertCell(0); 
      cell1.innerHTML="Info:"; 
      cell1.colSpan="2"; 

      var cell2 = row4.insertCell(1) 
      cell2.innerHTML = "DosageInfo"; 
      cell2.colSpan = "2"; 

     } 

      <div id="replace" > 
      <center> 
       <input type="button" onclick="dummy()" value="Append Row"/> 
       <input type='button' value='Delete' onclick="changeDelete(dataTable)"/> 
      </center><br> 
      <table border="1px" style="width:800px" align="center" id="dataTable" > 

      </table> 
     </div> 

Answer 1

我得到了正確的答案。

var indexValue = 0; 
    function addRow(){ 
     var htmlText = $("#mainHead").html(); 
     var test ='<tr id='+indexValue+' ><td rowspan="4"></td></tr><tr id='+indexValue+' ><td><select><option value="">----Select Tablet----</option></select></td><td>Days:</td><td>Qauntity:</td></tr><tr id='+indexValue+' ><td colspan="2">Generic:</td><td >Dosage:</td></tr><tr id='+indexValue+' ><td colspan="2">Info:</td><td colspan="2">DosageInfo:</td></tr>'; 

     test = test.replace(/#ID#/g, indexValue); 

     $("#applyTable").append(test); 

     indexValue++; 
    } 

Answer 2

問題很簡單：Chrome中的insertRow默認插入第0行，而在Firefox中插入最後一個。所以在Chrome中，rowpan = 4的第一行單元結束於最後一行，導致混亂。

所以這是如何解決這個問題。

 var row1=table.insertRow(0); 
     var row2=table.insertRow(1); 
     var row3=table.insertRow(2); 
     var row4=table.insertRow(3);