Complex html table to json using jQuery

Question

I need to get JSON of checked rows of following html table using jQuery

JSON should contain the comments which user entered in textbox. Any pointer will be helpful to me.

<table id="potable_grid" class="tab">
    <thead>
        <tr>
            <th>
                select PO
            </th>
            <th>
                po id
            </th>
            <th>
                ponumber
            </th>
            <th>
                pocurrency
            </th>
            <th>
                balance
            </th>
            <th>
                thisinvoice
            </th>
            <th>
                thisinvoiceinInvoicecurrency
            </th>
            <th>
                comments
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" id="chckPO" />
            </td>
            <td>
                po001
            </td>
            <td>
                cuspo1
            </td>
            <td>
                usd
            </td>
            <td>
                10000
            </td>
            <td>
                200
            </td>
            <td>
                2
            </td>
            <td>
                <input type="text" id="txtPO" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="chckPO" />
            </td>
            <td>
                po002
            </td>
            <td>
                pocus125
            </td>
            <td>
                inr
            </td>
            <td>
                5000
            </td>
            <td>
                300
            </td>
            <td>
                18000
            </td>
            <td>
                <input type="text" id="txtPO" />
            </td>
        </tr>
    </tbody>
</table>

I have checked many post like HTML Table to JSON

but it working for simple html table in which rows doesnt have any control.

Not totally sure what you are wanting. You just need to convert your table into a JSON object? Just the comments? Or both? — Leeish, Jan 14 '13 at 17:47
Lovely, but what output do you actually want from that? And *please*, read the [Markdown help page](http://stackoverflow.com/editing-help), there's a difference between *inline* code (wrapped in `\``) and ...code *blocks* (each line indented by four spaces *plus* further indentation to actually indent lines of code). — David Thomas, Jan 14 '13 at 17:50
@ Leeish I want json of all values of selected rows including comments in text box. @Ricardo/David Sorry for identation. this is my first question over the stackoverflow. — Suraj, Jan 14 '13 at 17:56

score 0 · Accepted Answer · answered Jan 14 '13 at 17:52

var $checked = $('#potable_grid :checked');

var data = [];

for(var i = 0; i != $checked.length; ++i)
{
  var $row = $($checked[i]).closest('tr');
  var text = $row.find(':text').val();

  data.push(text);
}

// data is now an array of all checked texts.

Your question is vague, but this should get you started about how to iterate over the rows that are checked and to get the values you want.

Having the same 'id' for all your textboxes is invalid, by the way. If you want to know the' id' associated with record in question, then do something like po id' e.g. <input type="text" id="cuspo1" />. Then your data (JSON) can be an object, e.g.

var $input = $row.find(':text');

data.push({ id: $input.attr('id'), value: $input.val() });


// now data contains an array of { id, value };

Complex html table to json using jQuery

1 Answers1