javascript - Html 表格布局不能在 Chrome 中正确显示，但在 Firefox 中正确显示？

Question

我已经使用 Javascript 动态创建了 html 表，但是当我在 Firefox 上运行它时它看起来不错，但是当我在 chrome 表布局上运行它时，它似乎不如 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

问题非常简单：默认情况下，Chrome 中的 insertRow 在第 0 行之前插入，而在 Firefox 中，它附加在最后一行之后。因此，在 Chrome 中，rowspan=4 的第一行单元格最终出现在最后一行，这会导致混乱。

所以这就是解决这个问题的方法。

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

Answer 2

我得到正确的答案。

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