如何通過在JavaScript中動態拆分列來添加行

Question

這段代碼的問題是，當我們要添加一行時，它只會在一行中添加一行。 有人可以告訴我如何拆分列嗎？

JavaScript：

    function Myfunction(tableid) {
        var table=document.getElementById("tablerow");            
        var rowCount = table.rows.length;            
        var row = table.insertRow(rowCount);            
        var cell1 = row.insertCell(0); 
        var cell2 = row.insertCell(0);

        cell2.innerHTML = rowCount + 1;

        var cell3 = row.insertCell(1);
        var element2 = document.createElement("input");
        element2.type = "text";
        cell3.appendChild(element2);
    }

HTML：

    <body>
       <table id="tablerow" border="1" align="center">
          <tr>
            <td><center>1</center></td>
            <td><input type="textbox" name="" value=""></td>
            <td><input type="textbox" name="" value=""></td>
            <td><input type="textbox" name="" value=""></td>
         </tr>
         <tr>
            <td><center>2</center></td>
            <td><input type="textbox" name="" value=""></td>
            <td><input type="textbox" name="" value=""></td>
            <td><input type="textbox" name="" value=""></td>
         </tr>

         <center><input type="button" value="Add Row" onclick="Myfunction()">

Answer 1

表中有四列，但您試圖插入僅包含三個單元格的行。 這導致無效的表結構。

另外，在調用insertCell()方法時，應通過提供正確的索引將每個單元格放置在適當的位置。

這是插入四個行的行的工作代碼，第一個具有“運行索引”，其余的具有文本框，每個文本框都有自己的文本框：

function Myfunction(tableid) {
    var table=document.getElementById("tablerow");        
    var rowCount = table.rows.length;        
    var row = table.insertRow(rowCount);        

    var cell1 = row.insertCell(0); 
    cell1.innerHTML = rowCount + 1;

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    cell2.appendChild(element2);

    var cell3 = row.insertCell(2);
    var element3 = document.createElement("input");
    cell3.appendChild(element3);

    var cell4 = row.insertCell(3);
    var element4 = document.createElement("input");
    cell4.appendChild(element4);
}

實時測試用例。

這有效，但很“笨拙”。 為了使其更加靈活和更好地編寫，請添加另一個功能：

function CellWithTextbox(row, index) {
    var cell = row.insertCell(index);
    var element = document.createElement("input");
    element.type = "text";
    cell.appendChild(element);
    return cell;
}

然后，函數的最后一部分將轉到這些簡單的行：

var cell2 = CellWithTextbox(row, 1);
var cell3 = CellWithTextbox(row, 2);
var cell4 = CellWithTextbox(row, 3);

更新小提琴。

如何通過在JavaScript中動態拆分列來添加行

問題描述

1 個解決方案

解決方案1
0 2012-11-19 10:04:39

如何通過在JavaScript中動態拆分列來添加行

問題描述

1 個解決方案

解決方案1 0 2012-11-19 10:04:39

解決方案1
0 2012-11-19 10:04:39