Question

摘要：我有一个html页面，其中包含两个添加按钮和两个表格。单击“添加”按钮时，行将附加到相应的表。在后端我想收集所有行元素＆＃34;按钮＆＃34;单击并POST到其他页面。

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

这里是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
                });
              });
     })

此处您可以看到表行可以删除/排序。现在不要担心POST方法。我只需要在单击完成按钮后从表中收集列的逻辑。

假设脚本在类名和遍历过滤器方面是正确的。我只需要逻辑来收集列元素并推送到＃34; arr＆＃34;。

提前致谢

Answer 1

首先，您需要遍历th中的thead元素以获取列名称，然后tr中的tbody来获取值。您可以从每个相应的text()获取td属性以填充对象。试试这个：

.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

如何将表选择推送到数组：jquery

1 个答案: