如何解决使用JavaScript字母数字对HTML表格列进行排序
我在对HTML表进行排序时遇到问题。标头是可单击的,并且会进行排序,但是无法正确地对表进行排序。我正在使用ACF Pro和FacetWP。该表是用PHP动态创建的,需要此表才能按字母数字排序。从理论上讲,这种排序算法应该可以工作,但是我不理解为什么它无法正确排序。任何帮助将不胜感激。谢谢!
cPrev = -1; // global var saves the prevIoUs c,used to
// determine if the same column is clicked again
function sortBy(c) {
rows = document.getElementById("sortable").rows.length; // num of rows
columns = document.getElementById("sortable").rows[0].cells.length; // num of columns
arrTable = [...Array(rows)].map(e => Array(columns)); // create an empty 2d array
for (ro = 0; ro < rows; ro++) { // cycle through rows
for (co = 0; co < columns; co++) { // cycle through columns
// assign the value in each row-column to a 2d array by row-column
arrTable[ro][co] = document.getElementById("sortable").rows[ro].cells[co].innerHTML;
}
}
th = arrTable.shift(); // remove the header row from the array,and save it
if (c !== cPrev) { // different column is clicked,so sort by the new column
arrTable.sort(
function(a,b) {
if (a[c] === b[c]) {
return 0;
} else {
return (a[c] < b[c]) ? -1 : 1;
}
}
);
} else { // if the same column is clicked then reverse the array
arrTable.reverse();
}
cPrev = c; // save in prevIoUs c
arrTable.unshift(th); // put the header back in to the array
// cycle through rows-columns placing values from the array back into the html table
for (ro = 0; ro < rows; ro++) {
for (co = 0; co < columns; co++) {
document.getElementById("sortable").rows[ro].cells[co].innerHTML = arrTable[ro][co];
}
}
}
<body>
<div style="overflow-x:auto;">
<table id="sortable" style="width:100%;">
<thead>
<tr style="cursor:pointer">
<th align="left">Address</th>
<th onclick="sortBy(1)" align="left">City</th>
<th onclick="sortBy(2)" align="left">State</th>
<th onclick="sortBy(3)" align="left">Type</th>
<th onclick="sortBy(4)" align="right">Available SF</th>
</tr>
</thead>
<tbody id="table-body">
<?PHP while ( have_posts() ): the_post(); ?>
<tr>
<td align="left">
<a href="<?PHP the_permalink(); ?>">
<?PHP the_field('building_address'); ?>
</a>
</td>
<td align="left">
<a href="<?PHP the_permalink(); ?>">
<?PHP the_field('city'); ?>
</a>
</td>
<td align="left">
<a href="<?PHP the_permalink(); ?>">
<?PHP the_field('state'); ?>
</a>
</td>
<td align="left">
<?PHP echo get_the_term_list($post->ID,'property_type','',','); ?>
</td>
<td align="right">
<a href="<?PHP the_permalink(); ?>">
<?PHP the_field('max_available_size'); ?>
</a>
</td>
</tr>
<?PHP endwhile; ?>
</tbody>
</table>
</div>
</body>
解决方法
您可以在此处使用此功能,下面我将解释传递的函数参数的代码:colNo
是列数据明智排序数据的通过次数。tableId
与表ID sortable
相同。IsAsc
的变量值为true
,然后行设置升序,否则行设置降序。
函数调用sortTable(1,"sortable",true)
的示例。
function sortTable(colNo,tableId,IsAsc) {
var table,rows,switching,i,x,y;
table = document.getElementById(tableId);
switching = true;
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
if(rows[i].getElementsByTagName("TD")[colNo] != undefined && rows[i + 1].getElementsByTagName("TD")[colNo] != undefined)
{
x = rows[i].getElementsByTagName("TD")[colNo].innerHTML.toLowerCase();
y = rows[i + 1].getElementsByTagName("TD")[colNo].innerHTML.toLowerCase();
if ((x < y && IsAsc == false) || (x > y && IsAsc == true)) {
rows[i].parentNode.insertBefore(rows[i+1],rows[i]);
switching = true;
break;
}
}
}
}
}
此功能还用于按日期,时间,数字,字母顺序对数据进行排序。
我随便给您的解决方案添加了一个代码段。
function sortTable(colNo,rows[i]);
switching = true;
break;
}
}
}
}
}
<table id="theTable" border="1">
<thead>
<tr>
<th>
<span>Header 1</span>
<button onclick="sortTable(0,'theTable',true)">Asc</button>
<button onclick="sortTable(0,false)">Dsc</button>
</th>
<th>
<span>Header 2</span>
<button onclick="sortTable(1,true)">Asc</button>
<button onclick="sortTable(1,false)">Dsc</button>
</th>
<th>
<span>Header 3</span>
<button onclick="sortTable(2,true)">Asc</button>
<button onclick="sortTable(2,false)">Dsc</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Heavens</td>
<td>and</td>
<td>the</td>
</tr><tr>
<td>I</td>
<td>created</td>
<td>the</td>
</tr><tr>
<td>Took</td>
<td>a</td>
<td>nap</td>
</tr><tr>
<td>Earth</td>
<td>Then</td>
<td>I</td>
</tr><tr>
<td>At</td>
<td>the</td>
<td>begining</td>
</tr>
</tbody>
</table>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。