如何使用 JQuery 获取 HTML 表中的所有值

Question

我有一个如下所示的表格，我想获取表格中的所有值，包括文本框和复选框的值。

<div class="container-fluid">
<h1 class="h3 mb-4 text-gray-800"><?= $title; ?></h1>
<div class="container" style="text-align: left">
    <table class="table table-sm" id="tbl">
        <thead>
            <tr>
                <th>No</th>
                <th>Checklist Item</th>
                <th>Cheklist</th>
                <th>Actual</th>
                <th>Recomended</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td scope="row">1</td>
                <td>Check and clean rubber roller cage</td>
                <td><input type="checkbox" name="chek" id="check"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td scope="row">2</td>
                <td>Tension Rod all </td>
                <td><input type="checkbox" name="chek" id="check"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td scope="row">3</td>
                <td>Delete all unnecessary file from system</td>
                <td><input type="checkbox" name="chek" id="check"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
            </tr>
    </table>
    <a href="" class="btn btn-success" id="save">save</a>
</div>

当我使用此脚本获取所有值时，我无法在文本框和复选框中获取值

$(document).on('click', '#save', function() {
        var myRows = [];
        var headersText = [];
        var $headers = $("th");

        // Loop through grabbing everything
        var $rows = $("tbody tr").each(function(index) {
            $cells = $(this).find("td");
            myRows[index] = {};

            $cells.each(function(cellIndex) {
                // Set the header text
                if (headersText[cellIndex] === undefined) {
                    headersText[cellIndex] = $($headers[cellIndex]).text();
                }
                // Update the row object with the header/cell combo
                myRows[index][headersText[cellIndex]] = $(this).text();
            });
        });

        var myObj = {
            "Array": myRows
        };
        alert(JSON.stringify(myObj));
    });

我想将其转换为 JSON，但文本框和复选框的值未显示在表格内。请帮我解决这个问题。

提前谢谢你。

Answer 1

如果表格单元格的文本为空，您可以找到输入并使用.val() 获取其值。复选框和文本输入需要单独处理。

const text = $(this).text();
if(text){
   myRows[index][headersText[cellIndex]] = text;
} else {
   const input = $(this).find('input');
   if(input.is(":checkbox")){
      myRows[index][headersText[cellIndex]] = +input.prop('checked');
   } else {
      myRows[index][headersText[cellIndex]] = input.val();
   }
}