0

このコードの問題は、行を追加したいときに、1 つの列だけに行が追加されることです。列を分割する方法を教えてください。

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()">
4

1 に答える 1

0

テーブルには 4 つの列がありますが、セルが 3 つしかない行を挿入しようとしました。これにより、テーブル構造が無効になりました。

また、メソッドを呼び出すときに正しいインデックスを指定して、各セルを適切な位置に配置する必要がありますinsertCell()。

これは、4 つのセルを含む行を挿入する作業コードです。最初に「実行中のインデックス」があり、残りにはテキスト ボックスがあり、それぞれ独自のテキスト ボックスがあります。

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

フィドルを更新しました。

于 2012-11-19T10:04:39.657 に答える