6

HTML ページにテーブルとして表示されるフォームを作成するコードを作成しました。ユーザーが行を追加したり、選択した行を削除したりできるように、Javascript を作成しました。追加および削除機能が機能します。しかし、行の最後の列に前の 3 つの値の合計を表示したいのですが、それは起こっていません。

HTMLコードは次のとおりです。

<input type="button" value="Add Row" onclick="addRow('dataTable')" />

<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<table id="dataTable" width="350px" border="1">
 <form name="f1" id="f1">
    <tr>
    <td><b> Select </b></td>
    <td><b> S.No. </b></td>
    <td><b> Subject </b></td>
    <td><b> Mark 1 </b></td>
    <td><b> Mark 2 </b></td>
    <td><b> Mark 3 </b></td>
    <td><b> Total </b></td>
    </tr>
    <tr>
        <td> <input type="checkbox" name="chk"/></td>
        <td> 1 </td>
        <td> <input type="text" name="subject" /> </td>
        <td> <input type="text" name="mark" /></td>
        <td> <input type="text" name="marka" /></td>
        <td> <input type="text" name="markb" /></td>
        <td> <input type="text" name="total" /></td>
    </tr>
    </form>
</table>
<input type=button value="Sum" onclick=sum('dataTable') />

そして、私が使用してきたJavascript：

 <script language="javascript">
    var k=0;
    function addRow(tableID) {
        k++;
        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name="chk"+k;
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        cell2.innerHTML = rowCount;

        var cell3 = row.insertCell(2);
        var element2 = document.createElement("input");
        element2.type = "text";
        element2.name = "subject"+k;
        cell3.appendChild(element2);

        var cell4 = row.insertCell(3);
        var element3 = document.createElement("input");
        element3.type = "text";
        element3.name = "mark"+k;
        cell4.appendChild(element3);

        var cell5 = row.insertCell(4);
        var element4 = document.createElement("input");
        element4.type = "text";
        element4.name = "marka"+k;
        cell5.appendChild(element4);

        var cell6 = row.insertCell(5);
        var element5 = document.createElement("input");
        element5.type = "text";
        element5.name = "markb"+k;
        cell6.appendChild(element5);

        var cell7 = row.insertCell(6);
        var element6 = document.createElement("input");
        element6.type = "text";
        element6.name = "total"+k;
        cell7.appendChild(element6);
    }

    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
        }catch(e) {
            alert(e);
        }

        for(var j=1; j<rowCount; j++)
        {var mytable = document.getElementById(tableID);
        mytable.rows[j].cells[1].innerHTML = j;
        }
    }
function sum(tableID)
{   var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for(var i=1;i<rowCount;i++)
    {
    table.rows[i].cells[6].name.value=table.rows[i].cells[3].name.value + table.rows[i].cells[4].name.value + table.rows[i].cells[5].name.value;
    }

}


</script>

また、Firefox では最初の行が削除されません。これは、Internet Explorer facepalmでのみ機能します。

私は何をすべきか？

4

1 に答える 1

2

以下は、正しい方向を示す新しい改良された Sum 関数です。

sum = function()
{
   var table = document.getElementById("dataTable");
   var rowCount = table.rows.length;

   for(var i=1;i<rowCount;i++)
   {
      table.rows[i].cells[6].childNodes[0].value = 
         parseInt(table.rows[i].cells[3].childNodes[0].value) + 
         parseInt(table.rows[i].cells[4].childNodes[0].value) + 
         parseInt(table.rows[i].cells[5].childNodes[0].value);
   }
}

これを機能させるには、入力フィールドの前にあるスペースも削除する必要があります。

すべてを組み込んだ JSFiddle を次に示します。JSFiddle

それがあなたのニーズに合っていることを願っています。

于 2013-06-14T13:05:27.380 に答える