如何使用Jquery获取记录表并使用AJAX将其发送到服务器？

Question

I have a table like below

<table cellspacing="0" rules="all" border="1" id="ContentPlaceHolder1_GridView1" style="border-collapse:collapse;" class="table table-striped">
    <tbody>
        <tr>
            <th scope="col">&nbsp;</th>
            <th scope="col">Bill NO</th>
            <th scope="col">Date</th>
            <th scope="col">Description</th>
            <th scope="col">Type</th>
            <th scope="col">Amount</th>
        </tr>
        <tr>
            <td><input id="Checkbox0" class="checkBoxClass" type="checkbox">/td>
            <td>111</td>
            <td>12-22-2014</td>
            <td>computer problem</td>
            <td>Invoice</td>
            <td class="ActualAmount">7689.00</td>
        </tr>
        <tr>
            <td><input id="Checkbox1" class="checkBoxClass" type="checkbox">/td>
            <td>112</td>
            <td>12-22-2014</td>
            <td>Printer problem</td>
            <td>Invoice</td>
            <td class="ActualAmount">7689.00</td>
        </tr>
    </tbody>
</table>

I am trying to get the value of BillNo and ActualAmount if checkbox is selected on that row

First I try to get the value of the row using this below code

alert('value = ' + $("#ContentPlaceHolder1_GridView1 .checkBoxClass input[type='checkbox']:checked").closest("td").val())

it alert value = undefined

I am trying to get the value like this Jfiddle

Answer 1

If you want to get all rows that has that checkbox checked and save that values in an array of objects...

var values = [];

$('table#ContentPlaceHolder1_GridView1 input.checkBoxClass:checked').each(function() {
    var $row = $(this).closest('tr').children('td');
    values.push({ 'billno': $row.eq(1).text(), 'amount': $row.eq(5).text() });
});

I hope it helps

Answer 2

在您的警报消息中尝试此操作

$("#ContentPlaceHolder1_GridView1  input[type='checkbox'].checkBoxClass:checked").parent().next().html()

Answer 3

Something like

$("#ContentPlaceHolder1_GridView1 .checkBoxClass input[type='checkbox']:checked").closest("tr").find("td:eq(1)").text()

will work for BillNo (but it should be better to add a class or a data-tag in your html for this column, as you did for actualAmount).

For actual Amount :

$("#ContentPlaceHolder1_GridView1 .checkBoxClass input[type='checkbox']:checked").closest("tr").find("td.ActualAmount").text()