how to push table selections to array: jquery

Question

Summary: I have a html page which consists of two add buttons and two tables. When add button is clicked, rows are appended to respective table. In the back end i want to collect all the row elements when "button" is clicked and POST to other page.

<div class="report">
        <div class="panel">
        <div>
        <button type="button" class="add btn btn-primary" data-toggle="tooltip" title="Add to configuration list.">
                            <i class="fa fa-plus"></i>
                            Add
                        </button>
                    </div>

                <div class ="configuration-table panel-body">
                    <table class="table table-striped table-bordered table-condensed">
                        <thead>
                            <tr>
                                <th>Remove</th>
                                <th>Layer</th>
                                <th>Display</th>
                                <th>Unit</th>
                                <th>Dataset</th>
                                <th>Ordering</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
    </div>

        <div class = "done">
        <input class="btn btn-success" formaction="{% url 'something' %}" formmethod="post" type="submit" value="Done"></input>
        </div>
</div>

and here is reports.js

var arr = [];
$('.report')
        .on('click','.add', function(){
              $(this)
                    .parents('.report')
                    .find('.configuration-table tbody')
                        .append(
                            '<tr>'+
                            '<td class="remove-row" role="button" aria-label="Remove Region"><i class="fa fa-times" title="Remove this row." data-toggle="tooltip" data-placement="right" aria-hidden="true"></i></td>'+
                            '<td>'+layer_text+'</td>'+
                            map_elements+
                            '<td>'+unit_text+'</td>'+
                            '<td>'+dataset_text+'</td>'+
                            '<td class="ordering" aria-label="Re-order"><i class="fa fa-arrows" title="Re-arrange row order." data-toggle="tooltip" data-placement="right"></i></td>'+
                            '</tr>'
                        )
                        .on('click','.remove-row',function() {
                            $(this).parents('tr').remove();
                        })

                        .sortable({
                            helper: script
                        })
                        .disableSelection();
        .on('submit','.done form',function(){
                //do domething to collect columns
              $('.configuration-table tbody').each(function(){
                arr.push({
                  column.name: column.value
                });
              });
     })

Here as you can see that table rows can be removed/sortable. Dont worry about POST method now. I just need the logic to collect columns from the table after done button is clicked.

Assume script is correct in terms of class names and traversal-filters. I just need the logic to collect column elements and push to "arr".

Thanks in advance

Rory McCrossan · Accepted Answer · 2015-07-15 18:36:59Z

4

Firstly, you need to loop over the th elements within the thead to get the column names, then the tr in the tbody to get the values. You can get the text() properties from each respective td to fill object. Try this:

.on('submit','.done form',function() {
    var arr = [];
    var $table = $('.configuration-table');
    var columnNames = $table.find('thead th').map(function() {
        return $(this).text();
    });

    $table.find('tbody tr').each(function(){
        var rowValues = {};
        $(this).find('td').each(function(i) {
            rowValues[columnNames[i]] = $(this).text();
        });
        arr.push(rowValues);
    });
});

Example fiddle

answered Jul 15, 2015 at 18:36

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to push table selections to array: jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related