当列有输入字段、输入文本或选择时，将 Html Table 转换为 Json答案

【问题标题】：Convert Html Table to Json when the column has input fields, linput text or select当列有输入字段、输入文本或选择时，将 Html Table 转换为 Json
【发布时间】：2017-11-02 23:13:56
【问题描述】：

How to convert HTML table to Javascript Object with jQuery

这个问题的延伸。我的表格是动态的，它的单元格包含 Html 内容，例如 Input 以输入描述和 Select 以进行下拉选择。

因此，为了将 html 内容获取到 json 对象，创建了这个已回答的问题。

【问题讨论】：

不如你自己尝试一下，看看你卡在哪里了..

标签： javascript jquery html json dynamic

【解决方案1】：

对代码进行简单的更改，您可以：

//
// for each table row in table body
//
var tbl = $('#students tbody tr').map(function (idxRow, ele) {
    //
    // start building the retVal object
    //
    var retVal = {id: ++idxRow};
    //
    // for each cell
    //
    var $td = $(ele).find('td').map(function (idxCell, ele) {
        var input = $(ele).find(':input');
        //
        // if cell contains an input or select....
        //
        if (input.length == 1) {
            var attr = $('#students thead tr th').eq(idxCell).text();
            retVal[attr] = input.val();
        } else {
            var attr = $('#students thead tr th').eq(idxCell).text();
            retVal[attr] = $(ele).text();
        }
    });
    return retVal;
}).get();

console.log(tbl);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="students" border="1">
    <thead>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Grade</th>
    </tr>
    </thead>
    <tbody>
    <tr class="student">
        <td>Oscar</td>
        <td><select>
            <option value="21">21</option>
            <option value="23" selected>23</option>
            <option value="32">32</option>
        </select></td>
        <td><input type="text" value="16.5"></td>
    </tr>
    <tr class="student">
        <td>Antonio</td>
        <td><select>
            <option value="21">19</option>
            <option value="23">23</option>
            <option value="32" selected>32</option>
        </select></td>
        <td><input type="text" value="14"></td>
    </tr>
    <tr class="student">
        <td>Jessica</td>
        <td><select>
            <option value="21" selected>21</option>
            <option value="23">23</option>
            <option value="32">32</option>
        </select></td>
        <td><input type="text" value="19"></td>
    </tr>
    </tbody>
</table>

【讨论】：

此代码仅返回带有输入字段的单元格，其他字段将被忽略。您能否提供一个解决方案来获取所有列而不考虑单元格内容。
将代码添加到其他部分。 if (input.length == 1) { var attr = $('#students thead tr th').eq(idxCell).text(); retVal[attr] = input.val(); } else{ var attr = $('#students thead tr th').eq(idxCell).text(); retVal[attr] = $(ele).text(); }
你拯救了我的一天。谢谢！