根据第一个表的行的递减总和创建另一个表

Question

这里我有一个初始表，我使用rcm.create（）方法创建。然后，我必须创建另一个表中的行将按照第一个表的行的总和递减。这意味着具有较高总和的行将被放置在第二个表中。为了创建第二个表，我有rcm.generateTab2（）方法。

1.调用rcm.create（）方法创建第二个表。

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

3.rank阵列是根据排序降序值

现在秩数组包含对象具有三个元件。

首先来自每行的td值。行

和完整的行，其将被用于插入行中第二表的TBODY从第二表

4.tbody元件的

总和被删除。

5.then创建一个新的，并试图插入排序行形成表1至表2.

但所有我得到是表2中的浏览器上表1推动并没有行被插入。

全码：jsfiddle

主要问题是rcm.generateTab2 method.So里面我在这里分别张贴。

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

• 的jQuery的DOM操作
• 强调了数组创建与_.range（可以用一个for循环也做，所以是不是真的需要下划线）
• Tinysort jQuery plugin排序表

对于排序我已经将排序等级（行的总和）作为数据属性添加到每行，所以tinysort可以使用它来排序表。

这里SO的CSS与表头中的jsFiddle（不居中的文本）有点不同。不知道为什么。

表单输入中的默认值（3 & 2）仅用于更容易的调试。稍后请从输入中删除value属性。

---

更新2015年4月7日

我发现你的代码的问题。问题在于你已经在排名对象中存储了对table1的引用。对象中的tr元素。 因此，您因该参考覆盖table1。

您可以使用rank[i].row.cloneNode(true)修复此问题以克隆该行的内容。然后，您可以将它附加到新表中，而不会出现问题。

查看更新的小提琴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>