checkboxes and tables

by J. Jones

HTML

<table id="testTable">
    <tbody>
        <tr id="tr1">
            <td>
                <input name='modifyCheck' type="checkbox" value="value1"/>
            </td>
            <td>row 1</td>
            <td>A</td>
        </tr>
        <tr id="tr2">
            <td>
                <input name='modifyCheck' type="checkbox" value="value2"/>
            </td>
            <td>row 2</td>
            <td>B</td>
        </tr>
        <tr id="tr3">
            <td>
                <input name='modifyCheck' type="checkbox" value="value3"/>
            </td>
            <td>row 3</td>
            <td>C</td>
        </tr>
    </tbody>
</table>
<button name='foo'>Finish</button>
<button name='notfoo'>Not Finish</button>

JavaScript

$("button[name='notfoo']").on("click", function () {
    var values = $('#testTable tbody tr').map(function () {
        // $(this) is used more than once; cache it for performance.
        var $row = $(this);

        // For each row that's "mapped", return an object that
        //  describes the first and second <td> in the row.
        return {
            checked: $row.find("input[name='modifyCheck']").attr('checked'),
            id: $row.find(':nth-child(1)').text(),
            text: $row.find(':nth-child(2)').text(),
            v: $row.find(':nth-child(3)').text()
        };
    }).get();
    alert(JSON.stringify(values, null, 4));
});

$("button[name='foo']").on("click", function () {
    var values = [];
    $("input[name='foo1']:checked").each(function () {
        var $mytr = $(this).closest("tr").attr("id");
        alert("mytr is: " + $mytr);
        // Find all of the table cells on this row.
        $mytr.find('td').each(function (i) {
            // Determine the cell's column name by comparing its index
            //  within the row with the columns list we built previously.
            var rowName = columns[i];
            alert("rowname is: " + rowName);

            // Add a new property to the row object, using this cell's
            //  column name as the key and the cell's text as the value.
            row[rowName] = $(this).text();
        });
        alert("mytr is: " + mytr);
        values.push({
            "val": $(this).val(),
                "tr": $(this).closest("tr").attr("id")
        });
    });
    alert(JSON.stringify(values, null, 4));
});