- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
这里我有一个使用 rcm.create() 方法创建的初始表。然后我必须创建另一个表,其中的行将根据第一个表中行的降序总和进行排序。这意味着该行具有较高总和的将首先放在第二个表中。为了创建第二个表,我有 rcm.generateTab2() 方法。其工作方式如下;
1.调用rcm.create()方法创建第二张表。
2.创建第一个表中每一行的总和并将其放入包含对象数组的排名数组中。
3.rank数组按值降序排列
现在排名数组包含具有三个元素的对象。
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
}
}
最佳答案
不确定我是否正确理解了排名数学。
请查看下面和此处的演示 jsfiddle .
我已经重新编码了您的 js,因为我认为这样更容易。 (但如果您不喜欢使用 jQuery,我可以查看您的代码并检查是否可以找到问题所在。)
我正在使用这些 js 库:
_.range
创建数组的下划线(也可以用 for 循环完成,所以实际上不需要下划线)对于排序,我将排序等级(行的总和)作为数据属性添加到每一行,因此 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>
关于javascript - 根据第一个表的行的降序总和创建另一个表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29471848/
我是一名优秀的程序员,十分优秀!