合并两个表后,在新行中添加“全选”复选框

时间:2014-03-03 10:24:18

标签: javascript jquery

我已经成功实现了行末尾的select all复选框,以防只显示一个表。但是在其中一个选项卡中,我将两个表数据组合在一起并将它们分成两列,因此这两列中的行数不同。

我试图弄清楚如何在两列的行末尾填充两个不同的全选复选框。

我使用JS动态填充表。这是我的代码

HTML

<div id="tabs">
    <ul id="betTypesTabs"></ul>
</div>

JS用于填充来自两个来源的表数据

function drawSelectionsForDoubles(table, events, indexes) {

    // Array of Horse Selections for every event
    var arrayOfSelections = [];
    $.each(indexes, function (i, index) {
        arrayOfSelections[i] = events[index].markets[0].selections;
    });

    // Max number of Selections
    var maxNumberOfSelections = 0;
    for (var i=0; i<arrayOfSelections.length; i++) {
        if (arrayOfSelections[i].length > maxNumberOfSelections) maxNumberOfSelections = arrayOfSelections[i].length;
    }

    // Going through all the selections in the horizontal manner
    for (var i=0; i<maxNumberOfSelections; i++) {
        for (var j=0; j<arrayOfSelections.length; j++) {

            var currentHorse = arrayOfSelections[j][i];

            // If the horse exists
            if (currentHorse != null) {

                // If the horse is participating in Running Double bet
                $.each(currentHorse.prices, function(index, value) {
                    if (value.betTypeId == 108) {

                        // Adding the record
                        // First tds in the row
                        if (j == 0) {
                            var tr = createTr(table.id + '_' + i, "white");
                            $(tr).append(createTd(null, null, currentHorse.position, null));
                            $(tr).append(createTd(null, null, currentHorse.name, null));
                            var td = createTd(null, null, "",null);
                            td.appendChild(createInput(table.id + '_' + i + "_doubles_" + currentHorse.id, table.id + "_doubles_1", "checkbox", null));
                            $(tr).append(td);
                            $(table).append(tr);
                        }

                        // Second column
                        else {
                            tr = document.getElementById(table.id + '_' + i);
                            if (tr == null) {
                                var tr = createTr(table.id + '_' + i, "white");
                                $(table).append(tr);
                                var td = createTd(null, null, '', 3);
                                $(tr).append(td);
                            }
                            $(tr).append(createTd(null, null, currentHorse.position, null));
                            $(tr).append(createTd(null, null, currentHorse.name, null));
                            var td = createTd(null, null, "",null);
                            td.appendChild(createInput(table.id + '_' + i + "_doubles_" + currentHorse.id, table.id + "_doubles_2", "checkbox", null));
                            $(tr).append(td);
                        }
                    }
                });
            }
        }
    }
}

现在由于两列中的行不同,我想在表格之后添加一个额外的行,我可以在其中添加一个复选框,选中表格中的所有行。

0 个答案:

没有答案