javascript - 根据第一个表的行的降序总和创建另一个表

Question

这里我有一个使用 rcm.create() 方法创建的初始表。然后我必须创建另一个表，其中的行将根据第一个表中行的降序总和进行排序。这意味着该行具有较高总和的将首先放在第二个表中。为了创建第二个表，我有 rcm.generateTab2() 方法。其工作方式如下；

1.调用rcm.create()方法创建第二张表。

2.创建第一个表中每一行的总和并将其放入包含对象数组的排名数组中。

3.rank数组按值降序排列

现在排名数组包含具有三个元素的对象。

每行的第一个 td 值。

行总和

以及将用于在第二个表的 tbody 中插入行的完整行

4.第二个表中的 tbody 元素被删除。

5.然后创建一个新的并尝试将排序后的行从表 1 插入到表 2。

但我得到的只是表 2 在浏览器中被推到表 1 之上，并且没有插入任何行。

完整代码:jsfiddle

主要问题在 rcm.generateTab2 方法内部。所以我将它单独发布在这里。

rcm.generateTab2 方法:

    generateTab2:function(){
                var power=0;
                this.create(machine,process); //create the second table

                var tbody=document.getElementsByTagName('tbody')[0];
                var trow=tbody.getElementsByTagName('tr');

                for(i=0;i<trow.length;i++){  //get summation
                     var td=trow[i].getElementsByTagName('td');
                     var sum=0;
                     
                     for(j=td.length-1;j>0;j--){
                       
                        if(td[j].innerHTML==''){
                            sum+=0*Math.pow(2,power);
                        }else{
                             sum+=parseInt(td[j].innerHTML)*Math.pow(2,power);

                        }

                         power++;
                     }
                     var first=parseInt(td[0].innerHTML);
                     rank.push({rowNo:first,sum:sum,row:trow[i]}); //pushed to rank array
                     
                     power=0;
                }
                rank.sort(function (a,b){ //rank array is sorted
                    if(a.sum>b.sum){
                         return -1;
                    }else if(a.sum<b.sum){
                         return 1;
                    }else{
                        return 0;
                    }
                });
                console.log(rank);
                
                var parent=document.getElementsByTagName('table')[1];
                parent.removeChild(parent.childNodes[1]);//delete existing tbody from second table
                
                
                var newTbody=document.createElement('tbody'); //create a new tbody
                parent.appendChild(newTbody); //append it to second table
                
                
             for(i=0;i<rank.length;i++){

                    newTbody.appendChild(rank[i].row);  //insert rows to tbody of second table
            }
                                
             
             
    
    }

Answer 1

不确定我是否正确理解了排名数学。

请查看下面和此处的演示 jsfiddle .

我已经重新编码了您的 js，因为我认为这样更容易。 (但如果您不喜欢使用 jQuery，我可以查看您的代码并检查是否可以找到问题所在。)

我正在使用这些 js 库:

• 用于 DOM 操作的 jQuery
• 使用 _.range 创建数组的下划线(也可以用 for 循环完成，所以实际上不需要下划线)
• > Tinysort jQuery plugin用于对表格进行排序

对于排序，我将排序等级(行的总和)作为数据属性添加到每一行，因此 tinysort 可以使用它来对表格进行排序。

这里的 CSS 与表头中的 jsFiddle(非居中文本)略有不同。不知道为什么。

表单输入中的默认值(3 和 2)只是为了更容易调试。稍后只需从输入中删除 value 属性即可。

---

更新 07.04.2015

我发现您的代码存在问题。问题是您已将对 table1 的引用存储在您的 rank 对象中。对象中的 tr 元素。 因此，由于该引用，您已经覆盖了 table1。

您可以通过使用 rank[i].row.cloneNode(true) 克隆行的内容来解决此问题。然后您可以将它追加到您的新表中而不会出现问题。

查看更新的 fiddle here .

var ROC = {
    init: function (element) {
        this.$el = $(element);
        this.$table1wrap = $('<div/>').attr('id', 'table1wrapper');
        this.$table2wrap = $('<div/>').attr('id', 'table2wrapper');
        this.$el.append([this.$table1wrap, this.$table2wrap]);
    },
    create: function (machine, process) {
        var self = this,
            $tableHeading = $('<tr/>'),
            $table = $('<table/>').attr('id', 'mainTable');

        this.$table1wrap.html($table.append($('<thead/>').html($tableHeading)));

        this.processes = this.createCols(process);
        this.machines = this.createRows(machine);
        //var addRow = function() {
        //    this.$el.append($('tr').html(this.processes));
        //this.$el.append($('<tr/>').html($('<td/>').text('test')));
        $(this.machines).each(function (index, row) {
            //console.log(index, $(row));
            var $curRow = $(row);
            //console.log($tableHeading.length);
            $(self.processes).each(function (i, col) {
                if (index == 0) {
                    var letter = String.fromCharCode(97 + i).toUpperCase();
                    if (i == 0) $tableHeading.append($('<th/>').text('~'));
                    $tableHeading.append($('<th/>').text(letter));
                }
                //console.log(i, $(col));
                // self.$el.append(($(row).clone()).html($(col).clone()));
                if (i == 0) $curRow.append($('<td/>')
                    .text(index + 1)
                    .addClass('rowIndex'));
                $curRow.append($(col).attr('contentEditable', 'true'));
            });

            $table.append($curRow.clone());
        });
        //console.log(this.processes, this.machines);
    },
    createCols: function (cols) {
        var rCols = _.range(cols).map(function (num, index) {
            return $('<td/>').text(0);
        }); // [td, td, ...];
        return rCols;
    },
    createRows: function (rows) {
        var rRows = _.range(rows).map(function (num, index) {
            return $('<tr/>');
        }); // [tr, tr, ...];
        return rRows;
    },
    copy: function (sel) {
        //console.log($(sel));
        var $newTable = $(sel).clone().attr('id', 'copy');
        var $sortedBody = $($newTable)
            .find('tbody')
            .html(this.calcRank($newTable));
        //console.log($sortedBody, this.calcRank($newTable));

        //console.log('sorted', $sortedTable);
        $(this.$table2wrap).html($($newTable, 'tbody').append($sortedBody));
    },
    calcRank: function (newTable) {
        var sum, $col;
        newTable.find('tr').each(function (index, item) {
            //console.log(index, $(item).children());
            $col = $(item).children();
            sum = 0;
            if (index > 0) { // skip heading
                $col.each(function (i, cell) {
                    if (i > 0) sum += parseInt($(cell).text()); // skip first col 
                });
                $(item).attr('data-rank', sum);
            }
            //console.log(index, sum, $(item));
            //$(item).attr('data-rank', sum);
        });
        //console.log($(newTable));

        return tinysort($(newTable).find('tbody>tr'), {
            attr: 'data-rank',
            order: 'desc'
        });
    },
    reset: function () {
        this.$table1wrap.empty();
        this.$table2wrap.empty();
    }
};

ROC.init('#out');

$('#btnCreate').click(function () {
    var proc = $('#process').val(),
        machine = $('#machine').val();

    ROC.create(machine, proc);
});

$('#btnCreate2').click(function () {
    ROC.copy('#mainTable');
});

$('#btnRst').click(function () {
    ROC.reset();
});

body {
    padding: 1em;
}
input[type='number'] {
    background:lightblue;
    color:crimson;
    margin-left:20px;
}
table {
    border-collapse: initial !important;
    border-spacing: 10px !important;
}
th {
    background:black;
    color:white;
    width:40px;
    height:40px;
    border:1px solid white;
    text-align:center;
    box-shadow:0px 0px 7px black;
}
td {
    box-shadow:0px 0px 7px black;
    background:white;
    width:40px;
    height:40px;
    border:1px solid black;
    text-align:center;
}
td.rowIndex {
    background: black;
    color: white;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.1.1/tinysort.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Rank Order Clustering</h1>

<fieldset>
    <legend style='font-size:30px;background:lightblue;'>insert items</legend>
    <label for='process'>process :</label>
    <input type='number' id='process' placeholder='processes' value="3" />
    <br/>
    <label for='machine'>machines :</label>
    <input type='number' id='machine' placeholder='machines' value="2" />
    <br/>
    <input type='button' value='create table' id='btnCreate' />
    <input type='button' value=' reset' id='btnRst' />
    <input type='button' value='generate table2' id='btnCreate2' />
</fieldset>
<div id="out"></div>