根據第一個表的行的遞減總和創建另一個表

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>