javascript - 如何将 html 多行表数据获取到 Javascript

Question

HTML table

<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 表格包含多行和四列。如果用户想添加列来输入数据，可以添加行。我想将所有列数据获取到 JavaScript。我该怎么做......请帮助我

我的 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。我尝试执行如下操作。但它不起作用。我得到空值。我没有得到实际值。

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

请让我知道我做错了什么以及我应该做什么。谢谢!

Answer 1

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 数组中读取值。