![](/img/trans.png)
[英]how do I structure a jquery .after statement with a table and multiple classes?
[英]How do I sort a div structure as a table using JQuery?
我是JQuery的新手,我正在尋找一種對表進行排序的方法,該表是我完全使用div創建的並且沒有表結構。 我對行有相同的ID,因為我認為可以找到一種方法。 這是我的代碼:
<div class="column_title">Column 1</div>
<div class="column1">
<div class="each_column">
<span class="column1_class" id="row1">Value 1</span>
</div>
<div class="each_column">
<span class="column1_class" id="row2">Value 2</span>
</div>
<div class="each_column">
<span class="column1_class" id="row3">Value 3</span>
</div>
<div class="each_column">
<span class="column1_class" id="row4">Value 4</span>
</div>
</div>
</div>
<div class="column_title">Column 2</div>
<div class="column2">
<div class="each_column">
<span class="column2_class" id="row1">Value A</span>
</div>
<div class="each_column">
<span class="column2_class" id="row2">Value B</span>
</div>
<div class="each_column">
<span class="column2_class" id="row3">Value C</span>
</div>
<div class="each_column">
<span class="column2_class" id="row4">Value D</span>
</div>
</div>
<div class="column_title">Column 3</div>
<div class="column1">
<div class="each_column">
<span class="column3_class" id="row1">Value AA</span>
</div>
<div class="each_column">
<span class="column3_class" id="row2">Value AB</span>
</div>
<div class="each_column">
<span class="column3_class" id="row3">Value AC</span>
</div>
<div class="each_column">
<span class="column3_class" id="row4">Value AD</span>
</div>
</div>
對此我是陌生的,我不確定該如何解決。 我必須使用div結構,因此如何進行此操作的任何指導?
也許您可以使用display : table
。 看到這個鏈接
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
我不是這個的忠實擁護者,但是對於您來說,這可能會有所幫助。
為了將來參考,我遇到了類似的問題,最終編寫了一個自定義函數來對使用純Javascript在<div>
構建的表進行排序。
JSFiddle示例 : https : //fiddle.jshell.net/L4s73n44/43/
實際上,如果所有<div>
都具有ID,則編程非常簡單(在我的情況下,我使用的是幫助器類來動態生成表)。 為了使用我的簡單功能,您需要使用以下語法:
<th>
:[table_name] _HEADER_COL_ [COLUMN_NUMBER] <div class="VISIBLE_HEADER SIZE_LIMITER XS_AJUSTMENT " name="RESOURCE_TABLE_HEADER_COL_2" id="RESOURCE_TABLE_HEADER_COL_2">
<tbody>
:[table_name] _TBODY <div id="RESOURCE_TABLE_TBODY" class="tbody">
<tr>
:[table_name] TR [ROW_NUMBER] <form class="VISIBLE_TR_ODD" name="RESOURCE_TABLE_TR_1" id="RESOURCE_TABLE_TR_1">
表格單元格中的<span>
:[table_name] COL [COLUMN_NUMBER] _SPAN <span name="RESOURCE_TABLE_COL_2_ROW_1_SPAN" id="RESOURCE_TABLE_COL_2_ROW_1_SPAN">MAXIME</span>
注意 :注意命名約定,Javascript getElementById()
函數區分大小寫。
在標題單元格中,您可以使用glyphicon(在此示例中為font-awesome glyphicon)內的排序功能,如下所示:
<div style="float:right;">
<i class="fa fa-sort-asc fa-lg" aria-hidden="true" onclick="sortDivTableColumn('RESOURCE_TABLE_HEADER_COL_2', true);"></i>
<i class="fa fa-sort-desc fa-lg" aria-hidden="true" onclick="sortDivTableColumn('RESOURCE_TABLE_HEADER_COL_2', false);"></i>
</div>
完整的功能代碼 :
/**
* Sort a specified column in a table (or <div> table) by using the tag IDs.
*
* @param columnID String ID of the column that we want to sort.
*
* @param asc Bool
* False: Sort in descending order.
* True: Sort in ascending order.
*/
function sortDivTableColumn(columnID, asc)
{
var match;
if (typeof columnID === "string" &&
(match = columnID.match(/^(\w+)_HEADER_(COL_[\d]+)$/))
) {
var body;
var html = [];
var index = 1;
var row;
var span;
var total;
while ((span = document.getElementById(
match[1] + '_' + match[2] + '_ROW_' + index + '_SPAN')
)) {
if ((row = document.getElementById(match[1] + '_TR_' + index))) {
html.push({
"data" : span.innerHTML,
"row" : row.outerHTML
});
} else { //can't fetch the whole row
html.length = 0;
break;
}
index++;
}
row = null;
span = null;
if ((total = html.length) > 0) {
if (Boolean(asc)) {
html.sort(function(a, b) {
return a.data.localeCompare(b.data);
});
} else {
html.sort(function(a, b) {
return a.data.localeCompare(b.data) * -1;
});
}
var buffer = "";
for (index = 0; index < total; index++) {
buffer += html[index].row;
}
html.length = 0;
document.getElementById(match[1] + '_TBODY').innerHTML = buffer;
buffer = null;
}
}
}
最后說明 :如果您不在表格單元格中使用<span>
,請替換此行:
while ((span = document.getElementById(
match[1] + '_' + match[2] + '_ROW_' + index + '_SPAN')
)) {
創建人:
while ((span = document.getElementById(
match[1] + '_' + match[2] + '_ROW_' + index)
)) {
互聯網取得成功
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.