Question

How to convert HTML table to Javascript Object with jQuery

此问题的延伸。我的表是动态的，它的单元格有Html内容，如输入descritpion和Select for下拉选择。

所以要将这个html内容转换为json对象创建了这个已回答的问题。

Answer 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>

当列具有输入字段，输入文本或选择时，将Html表转换为Json

1 个答案: