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

debugcn 发表于 Dev

阿齐希·马法萨（Azihi Mafaza）

我有一个看起来像下面的表格，我想获取表格内的所有值，包括文本框和复选框的值。

<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，但表内未显示文本框和复选框的值。请帮助我解决此问题。

先感谢您。

iota

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。