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.

Answer 1

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 };