Make data array from HTML Table

Convert Table rows into JSON array

by danzkusuma

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
    <div class="row">
         <h3>Table is :</h3>
        <hr/>
        <table id="tablekaryawan" class="table table-striped" style=" ">
            <thead id="" class=" ">
                <tr>
                    <th id="" class="" style="">No</th>
                    <th id="" class="" style="">NIK</th>
                    <th id="" class="" style="">Nama</th>
                    <th id="" class="" style="">Jabatan</th>
                    <th id="" class="" style="width: 120px;">Action</th>
                </tr>
            </thead>
            <tbody id="" class=" ">
                <tr id="tableKaryawan1">
                    <td id="" class="">1</td>
                    <td id="" class="">123456</td>
                    <td id="" class="">Sujiwo Tedjo</td>
                    <td id="" class="">Manager QC</td>
                    <td>
                        <button type="button" id="" class=" btn btn-small btn-danger">Delete</button>
                    </td>
                </tr>
                <tr id="tableKaryawan2">
                    <td id="" class="">2</td>
                    <td id="" class=""></td>
                    <td id="" class=""></td>
                    <td id="" class=""></td>
                    <td>
                        <button type="button" id="" class=" btn btn-small btn-danger">Delete</button>
                    </td>
                </tr>
                <tr id="tableKaryawan3">
                    <td id="" class="">3</td>
                    <td id="" class=""></td>
                    <td id="" class=""></td>
                    <td id="" class=""></td>
                    <td>
                        <button type="button" id="" class=" btn btn-small btn-danger">Delete</button>
                    </td>
                </tr>
                <tr id="tableKaryawan4">
                    <td id=""...

JavaScript

/* Table -> Array Converter
 * 
 * tableToObj(param1, param2, param3)
 * 
 * params1 : id of table
 * params2 : keys of map(th title)
 * params3 : how many cols repetition you want
 *
 * author  : @rdanzkusuma (fendy kusuma wardhana)
 */

var tableToObj = function (table, key, cols) {
    var trs = $(table + ' > tbody > tr'),
        trl = $(table + ' > tbody >tr').length,
        idx = key,
        obj, ret = [];

    for (var i = 0; i < trl; i++) {
        obj = {};
        for (var j = 0; j < cols; j++) {
            obj[idx[j]] = trs[i].children[j].innerHTML
        }
        ret.push(obj);
    }

    return ret;
};

$(function () {
    var dataArray = JSON.stringify(tableToObj('#tablekaryawan', ['no', 'nik', 'nama', 'jabatan'], 4));

    $('#result').html(dataArray);
});