[英]How to order the table rows based on its value in javascript
在處理表時，我的目的是根據行的總和有序顯示行。 我的意思是，應首先顯示最高價值的行，然后顯示第二最高價值，然后繼續。.嘗試過並且無法做到。 只要給我一個主意，對我來說就足夠了。 關於如何根據其總和值重新排列行，我一無所知。 有什么想法嗎？
<div id="na_1" style="border: 1px solid gray;width: 450px;padding:10px;">
<form>
<input type="radio" value="All" onclick="Turnthis();"/>All
<input type="radio" value="Top15" onclick="TurnOutthis();"/>Top5
</form>
<table id="bt_01" border="1" width="100%">
<thead>
<tr><td>head1</td><td>head2</td><td>head3</td><td>head4</td><td>head5</td><td>head6</td><td>head7</td></tr>
</thead>
<tbody>
<tr><td>Subject1</td><td>501</td><td>501</td><td>501</td><td>550</td><td>560</td><td>570</td></tr>
<tr><td>Subject2</td><td>620</td><td>640</td><td>605</td><td>650</td><td>600</td><td>604</td></tr>
<tr><td>Subject3</td><td>730</td><td>730</td><td>740</td><td>750</td><td>760</td><td>790</td></tr>
<tr><td>Subject4</td><td>700</td><td>701</td><td>700</td><td>702</td><td>700</td><td>703</td></tr>
<tr><td>Subject5</td><td>220</td><td>201</td><td>202</td><td>222</td><td>210</td><td>203</td></tr>
<tr><td>Subject6</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
<tr><td>Subject7</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
<tr><td>Subject8</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
<tr><td>Total</td><td>202</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
</tbody>
</table>
</div>
在按下“ Top5”按鈕后，表格應顯示如下[樣本]
<div id="na_1" style="border: 1px solid gray;width: 450px;padding:10px;">
<form>
<input type="radio" value="All" onclick="Turnthis();"/>All
<input type="radio" value="Top15" onclick="TurnOutthis();"/>Top5
</form>
<table id="bt_01" border="1" width="100%">
<thead>
<tr><td>head1</td><td>head2</td><td>head3</td><td>head4</td><td>head5</td><td>head6</td><td>head7</td></tr>
</thead>
<tbody>
<tr><td>Subject3</td><td>730</td><td>730</td><td>740</td><td>750</td><td>760</td><td>790</td></tr>
<tr><td>Subject4</td><td>700</td><td>701</td><td>700</td><td>702</td><td>700</td><td>703</td></tr>
<tr><td>Subject2</td><td>620</td><td>640</td><td>605</td><td>650</td><td>600</td><td>604</td></tr>
<tr><td>Subject1</td><td>501</td><td>501</td><td>501</td><td>550</td><td>560</td><td>570</td></tr>
<tr><td>Subject5</td><td>220</td><td>201</td><td>202</td><td>222</td><td>210</td><td>203</td></tr>
</tbody>
</table></div>
希望這是有道理的。 對於您的信息，我只在javascript中而不在jquery中提供代碼。
訣竅是獲取所需的行並將其放入數組中，然后對數組進行排序並以正確的順序將行放入表中。 下面將根據單元格值對行進行排序，因此，如果第一個單元格值相等，則使用第二個單元格，依此類推。 排序可能不穩定，因為它僅使用內置的Array.prototype.sort 。 如果要保持穩定，那很簡單（但通常不是必需的）。
首先，獲取相關的tBody元素和行：
var tBody = document.getElementById('bt_01').tBodies[0];
var rows = tBody.rows;
rows是一個實時集合，因此您想從中構建一個數組（也有助於排序）。 以下在現代瀏覽器中可以正常運行：
var rowArr = Array.prototype.slice.call(rows);
但是在IE 8及更低版本中將無法使用，您需要使用for循環（僅增加一行代碼）：
var rowArr = [];
for (var i=0, iLen=rows.length; i<iLen; i++) rowArr[i] = rows[i];
要將最后一行保留為最后一行，只需保留一個引用：
var lastRow = rowArr[rowArr.length - 1];
現在根據第二個單元格之后的單元格值進行排序：
rowArr.sort(function(a, b) {
var aVal, bVal;
for (var i = 1, iLen = a.cells.length; i<iLen; i++) {
aVal = a.cells[i].textContent || a.cells[i].innerText;
bVal = b.cells[i].textContent || b.cells[i].innerText;
if (aVal != bVal) return aVal - bVal;
}
return 0;
});
現在將行排序：
for (var j=0, jLen=rowArr.length; j<jLen; j++) {
tBody.appendChild(rowArr[j]);
}
最后，將底行放回底部：
tBody.appendChild(lastRow);
到此為止。 而且它比提供的jQuery替代版本短（並且可能快得多）。 ;-)
最好將頁腳行放在標頭的單獨的tFoot部分中。
如果要基於每行中值的總和進行排序，則排序部分將變為：
rowArr.sort(function(a, b) {
var aSum = 0, bSum = 0;
for (var i = 1, iLen = a.cells.length; i<iLen; i++) {
aSum += parseFloat(a.cells[i].textContent || a.cells[i].innerText);
bSum += parseFloat(b.cells[i].textContent || b.cells[i].innerText);
}
return aSum - bSum;
});
該代碼可以在Chrome 30上運行並經過測試
非jQuery版本（更新的問題）：
<html>
<body>
<div id="na_1" style="border: 1px solid gray;width: 450px;padding:10px;">
<table id="bt_01" border="1" width="100%">
<thead>
<tr><td>head1</td><td>head2</td><td>head3</td><td>head4</td><td>head5</td><td>head6</td><td>head7</td></tr>
</thead>
<tbody>
<tr><td>Subject1</td><td>501</td><td>501</td><td>501</td><td>550</td><td>560</td><td>570</td></tr>
<tr><td>Subject2</td><td>620</td><td>640</td><td>605</td><td>650</td><td>600</td><td>604</td></tr>
<tr><td>Subject3</td><td>730</td><td>730</td><td>740</td><td>750</td><td>760</td><td>790</td></tr>
<tr><td>Subject4</td><td>700</td><td>701</td><td>700</td><td>702</td><td>700</td><td>703</td></tr>
<tr><td>Subject5</td><td>220</td><td>201</td><td>202</td><td>222</td><td>210</td><td>203</td></tr>
<tr><td>Subject6</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
<tr><td>Subject7</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
<tr><td>Subject8</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
</tbody>
<tfoot>
<tr><td>Total</td><td>202</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
</tfoot>
</table>
</div>
<input type='button' onclick='sort()' value='sort by sum' />
<script>
function sort() {
var t = document.getElementById('bt_01').children[1]; // tbody
var arr = [];
// find all tr
var trs = t.children;
for(;trs.length;) {
var tr = trs[0];
// find all td and calculate the sum
var sum = 0;
var tds = tr.children;
for(var y in tds) {
var td = tds[y];
var v = +td.textContent;
if (!isNaN(v)) sum += v;
};
// move them to arr
tr = tr.parentNode.removeChild(tr)
arr.push({sum: sum,tr: tr});
};
// sort it
arr.sort(function(a, b) {
if (a.sum < b.sum) return 1;
if (a.sum > b.sum) return -1;
return 0;
});
// attach back the tr in order
for (var z in arr) t.appendChild(arr[z].tr)
}
</script>
</body>
</html>
jQuery版本：
<html>
<body>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<div id="na_1" style="border: 1px solid gray;width: 450px;padding:10px;">
<table id="bt_01" border="1" width="100%">
<thead>
<tr><td>head1</td><td>head2</td><td>head3</td><td>head4</td><td>head5</td><td>head6</td><td>head7</td></tr>
</thead>
<tbody>
<tr><td>Subject1</td><td>501</td><td>501</td><td>501</td><td>550</td><td>560</td><td>570</td></tr>
<tr><td>Subject2</td><td>620</td><td>640</td><td>605</td><td>650</td><td>600</td><td>604</td></tr>
<tr><td>Subject3</td><td>730</td><td>730</td><td>740</td><td>750</td><td>760</td><td>790</td></tr>
<tr><td>Subject4</td><td>700</td><td>701</td><td>700</td><td>702</td><td>700</td><td>703</td></tr>
<tr><td>Subject5</td><td>220</td><td>201</td><td>202</td><td>222</td><td>210</td><td>203</td></tr>
<tr><td>Subject6</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
<tr><td>Subject7</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
<tr><td>Subject8</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
</tbody>
<tfoot>
<tr><td>Total</td><td>202</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr>
</tfoot>
</table>
</div>
<input type='button' onclick='sort()' value='sort by sum' />
<script>
function sort() {
var t = $('#bt_01').find('tbody');
var arr = [];
// find all tr
t.find('tr').each(function(idx, tr) {
tr = $(tr);
// find all td and calculate the sum
var sum = 0;
tr.find('td').each(function(idx, td) {
td = $(td);
var v = +td.text();
if (!isNaN(v)) sum += v;
});
// move them to arr
arr.push({sum: sum,tr: tr.detach()});
});
// sort it
arr.sort(function(a, b) {
if (a.sum < b.sum) return 1;
if (a.sum > b.sum) return -1;
return 0;
});
// attach back the tr in order
for (var z in arr) t.append(arr[z].tr)
}
</script>
</body>
</html>
我假設您希望sort之后的表格末尾有“總計”行。否則代碼可以短10至12行。
我想出了這個解決方案。為了方便起見，我已經注釋掉了每個部分。借助一些幫助表單getElementsByTagName ， removeChild ， createElement和appendChild方法，您可以實現您要嘗試的操作。這非常簡單。我建議您去最主要的是創建一個包含三個屬性的對象數組。 這些屬性是實際的tr元素，其總和和第一個td元素，其中包含subject1,2,3 ....和Total字符串 。然后使用Array.prototype.sort（）對其進行排序，然后將其順序添加到您的tbody中元件
var radio=document.getElementById('radio'); if(radio.checked == true){ //check for radio element is checked or not radio.checked=false; } var table=document.getElementById('bt_01'); var serialTdArr=[]; //array which will hold the array of objects var storageForTotal='';// store the tr element that has 'Total' as value of its first td element function Turnthis(e){ var tbody=document.getElementsByTagName('tbody')[0]; //get the current tbody element var tr=tbody.getElementsByTagName('tr'); //get all tr elements inside tbody for(i=0;i<tr.length;i++){ // loop over the tr elements var sum=0; var td=tr[i].getElementsByTagName('td'); //get all td element inside every tr element for(j=1;j<td.length;j++){ sum+=parseInt(td[j].innerHTML); // sum them up } var firstTd=td[0].innerHTML; //save every subject1,subject2,3,...and Total string to a seperate variable serialTdArr.push({index:tr[i],sum:sum,pointer:firstTd}); // an object which holds the tr element,its sum and its first td element value is pushed inside serialTdArr } var sortedArr=serialTdArr.sort(function(a,b){ // sort them down from higher to lower if(a.sum < b.sum){ return 1; } if(a.sum > b.sum){ return -1; } return 0; }); table.removeChild(tbody); // remove the current tbody var newTbody=document.createElement('tbody'); // create a new tbody table.appendChild(newTbody); // append it to table for(i=0;i<sortedArr.length;i++){ if((sortedArr[i].pointer) != 'Total'){ // if it has no "Total" string then add them to tbody newTbody.appendChild(sortedArr[i].index); // add to tbody }else{ storageForTotal=sortedArr[i].index; // 'Total' row will be seperated and stored in a variable to be added later at the end of the table } } newTbody.appendChild(storageForTotal); // add the tr which 'Total' to the last of td element }
<div id="na_1" style="border: 1px solid gray;width: 450px;padding:10px;"> <form> <input type="radio" id='radio' value="Sort Them All" onchange="Turnthis();"/>Sort Them All </form> <table id="bt_01" border="1" width="100%"> <thead> <tr><td>head1</td><td>head2</td><td>head3</td><td>head4</td><td>head5</td><td>head6</td><td>head7</td></tr> </thead> <tbody> <tr><td>Subject1</td><td>501</td><td>501</td><td>501</td><td>550</td><td>560</td><td>570</td></tr> <tr><td>Subject2</td><td>620</td><td>640</td><td>605</td><td>650</td><td>600</td><td>604</td></tr> <tr><td>Subject3</td><td>730</td><td>730</td><td>740</td><td>750</td><td>760</td><td>790</td></tr> <tr><td>Subject4</td><td>700</td><td>701</td><td>700</td><td>702</td><td>700</td><td>703</td></tr> <tr><td>Subject5</td><td>220</td><td>201</td><td>202</td><td>222</td><td>210</td><td>203</td></tr> <tr><td>Subject6</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr> <tr><td>Subject7</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr> <tr><td>Subject8</td><td>200</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr> <tr><td>Total</td><td>202</td><td>201</td><td>200</td><td>202</td><td>200</td><td>203</td></tr> </tbody>
如何使用javascript根據動態表各行中的輸入值添加天數
[英]How to add days based on input value in each rows of the dynamic table using javascript
使用Javascript或Jquery根據高/低值為表行着色
[英]Colorizing table rows based on high/ low value with Javascript or Jquery
如何基於ID定位表，以遍歷其td跨度，並更改跨度顏色以及將其值提供給控制台
[英]How to target a table based on ID, in order to iterate through its td-spans, and change spans color aswell as give out its value to console
如何使用javascript根據單元格的值更改背景色？
[英]How to change the background color of a cell based on its value using javascript?
如何使用 javascript 根據其值更改數字的顏色並做出反應？
[英]How to change color for the numbers based on its value using javascript and react?
如何基於鍵值對對對象進行排序和顯示JavaScript
[英]How to sort and display an object based on its key value pairs JavaScript
如何禁用
<option>在一個<select>基於它在 JavaScript 中的值？我有一個帶有多個 <option> 的 <select> 。每一個都有獨特的價值。我需要禁用具有給定定義值（而不是 innerHTML ）的 <option> 。有人知道怎么做嗎？</select></option>
[英]How can I disable an <option> in a <select> based on its value in JavaScript?
如何使用JavaScript根據復選框的多個部分過濾表行
[英]How to use javascript to filter table rows based on multiple sections of checkboxes
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.