Append checked checkbox values to another Table
Hello,
I have a modal popup that populates the following html shown in the link below.
When I select the checkbox(s), it's respective row/column values need to be appended to another table inside div ("ResultTable"). Currently, only one row gets appended. Please assist.
- <table id="mytable">
- <tr>
- <th>FileName</th>
- <th>Period</th>
- <th>Select</th>
- </tr>
- <tr>
- <td>Ginger Ale</td>
- <td>2015</td>
- <td><input type="checkbox" name="case[]"/></td>
- </tr>
- <tr>
- <td>Mocha White</td>
- <td>2012</td>
- <td><input type="checkbox" name="case[]"/></td>
- </tr>
- <tr>
- <td>Fanta Cola</td>
- <td>2016</td>
- <td><input type="checkbox" name="case[]"/></td>
- </tr>
- <tr>
- <td>Laughing Therapy</td>
- <td>2008</td>
- <td><input type="checkbox" name="case[]"/></td>
- </tr>
- <tr>
- <td>Build Page</td>
- <td>2014</td>
- <td><input type="checkbox" name="case[]"/></td>
- </tr>
- </table>
- <button id="btnGetCheckedboxes">Get Result</button>
- <div id="ResultTable">
- </div>
Script:
- $(document).ready(function($) {
- $('#btnGetCheckedboxes').click(function () {
- $("#ResultTable").empty();
- /* $('#mytable').find('tr').each(function () {
- var row = $(this);
- // if (row.find('input[type="checkbox"]').is(':checked')) {
- if (row.find('input[name="case[]"]').is(':checked')) {
- $('#ResultTable').append('<table><tr data-for="'
- +'"><td>'
- +row.closest("td")
- +'</td>'
- +'<td>'
- +"TEST334"
- +'</td>'
- +'</tr></table>');
- }
- });*/
-
- var values = new Array();
- $.each($("input[name='case[]']:checked").closest("td").siblings("td"),
- function () {
- values.push($(this).text());
-
- });
- //alert(values);
- $('#ResultTable').append('<tr data-for="'
- +'"><td>'
- +values[0]
- +'</td>'
- +'<td>'
- +values[1]
- +'</td>'
- +'</tr>');
-
- //alert("val---" + values.join (", "));
-
- });
- });