どのようにJavaScriptにI GET HTML複数行の表のデータを行います

PUSHPARAJ N:

HTMLテーブル

<table id="dataTable" border="1px" style="width:355px; BORDER-COLLAPSE:collapse">
    <tr>
        <td id="0" align="center"></td>
        <td id="1" align="center">Name</td>
        <td id="2" align="center">Designation</td>
        <td id="3" align="center">PAN</td>
        <td id="4" align="center">Address</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="chk" id ="chk" size="6"/></td>
        <td><input type="text" name="txtRow1" id="txtRow1" size="8"/></td>
        <td><input type="text" name="txtRow2" id="txtRow2" size="8"/></td>
        <td><input type="text" name="txtRow3" id="txtRow3" size="8"/></td>
        <td><input type="text" name="txtRow4" id="txtRow4" size="8"/></td>
    </tr>
</table>
<table>
    <tr>
        <td><input type="button" value="Add Row" onclick="addRowTable('dataTable')" /></td>
        <td><input type="button" value="Delete Row" onclick="deleteRowTable('dataTable')" /></td>
    </tr>  
</table>

HTMLテーブルにデータを入力した後、私はそれをデータベースに保存することができるように、JavaScriptにそのデータを取得したいです。HTMLテーブルは、複数の行と4つの列が含まれています。彼らはデータを入力するために列を追加したい場合は、ユーザーが行を追加することができます。私はJavaScriptにすべての列のデータを取得したいです。私はthat..Kindlyヘルプ私をどのように行うのですか

私のHTMLコード:

function addRowTable(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    if (rowCount > 10) {
        alert("Maximum 10 rows allowed");
        return false;
    }
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";
    element1.name = "chkbox[]";
    cell1.appendChild(element1);
    element1.size = 8;
    /*var cell2 = row.insertCell(1);
    cell2.innerHTML = rowCount + 1;*/

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.name = "txtbox[]";
    cell2.appendChild(element2);
    element2.size = 8;

    var cell3 = row.insertCell(2);
    var element3 = document.createElement("input");
    element3.type = "text";
    element3.name = "txtbox[]";
    cell3.appendChild(element3);
    element3.size = 8;

    var cell4 = row.insertCell(3);
    var element4 = document.createElement("input");
    element4.type = "text";
    element4.name = "txtbox[]";
    cell4.appendChild(element4);
    element4.size = 8;

    var cell5 = row.insertCell(4);
    var element5 = document.createElement("input");
    element5.type = "text";
    element5.name = "txtbox[]";
    cell5.appendChild(element5);
    element5.size = 8;

}

function deleteRowTable(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);*/
    }
}

テーブルの行を追加したり削除したりする私のjavascriptのコード:

今、テーブルの列が満たされた後、私はjavascript.Iにデータを以下のように実行しようとしましたことを取得したいです。しかし、それはworking.Iではありませんが、実際の値を取得していないヌルvalues.I AMを取得しています。

var rowCount = table.rows.length;
        for (var i = 1; i < rowCount; i++) 
        {
            var Name = $("dataTable").find("tr").eq(i).find("td").eq(0).text();
            var Designation = $("dataTable").find("tr").eq(i).find("td").eq(1).text();
            var PAN = $("dataTable").find("tr").eq(i).find("td").eq(2).text();
            var Address = $("dataTable").find("tr").eq(i).find("td").eq(3).text();
        }

親切に私は私が間違っているの何を知っていると私は何をすべき。ありがとうございました!

テーム:

HTMLテーブルのデータは、それが(最後の行を格納している)の変数にデータを置くよりも簡単だ、JS配列に格納することができます。

var rows = table.rows,
    len = rows.length,
    data = [],
    cells;
for (var n = 1; n < len; n++) {
    cells = rows[n].cells;
    data.push([
        cells[0].firstElementChild.checked,
        cells[1].firstElementChild.value,
        cells[2].firstElementChild.value,
        cells[3].firstElementChild.value,
        cells[4].firstElementChild.value
   ]);
}

今ではから値を読み取るために簡単ですdata、必要なときに配列。

おすすめ

転載: http://43.154.161.224:23101/article/api/json?id=31117&siteId=1