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

Posted 2023-03-05

【中文标题】如何使用 JQuery 获取 HTML 表中的所有值

【英文标题】：How to get all values inside HTML table using JQuery

【发布时间】：2020-10-24 16:57:09

【问题描述】：

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

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

提前谢谢你。

【问题讨论】：

你想如何构造复选框的数据？只是返回检查状态？

是返回 1 或 0 取决于状态

与下面的答案类似，使用更强大的if() ....if($(this).has(':checkbox')) valueWanted = $(this).find(':checkbox').prop('checked') ? 1 :0 else if(($(this).has(':text') valueWanted = $(this).find('input').val() else /* get the text*/..

我可以得到完整的代码吗？

【参考方案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();
   

【讨论】：

需要对复选框进行更精细的处理

代码可以获取文本框的值，但是无论是否选中，检查框都只能“打开”。

@AzihiMafaza 没问题。