Преобразовать HTML-таблицу в Json, когда в столбце есть поля ввода, текст linput или выберите

Question

Как преобразовать HTML-таблицу в Javascript Object с помощью jQuery

Расширение этого вопроса. Моя таблица динамическая, ее ячейки содержат HTML-содержимое, такое как "Ввод" для ввода дескрипции и "Выделение" для выбора.

Таким образом, чтобы получить 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>