Javascript 尝试通过单击表的标题对表列进行排序
我试图通过使用Javascript、html和PHP单击标题对表列值进行排序，下面是我的代码：Javascript 尝试通过单击表的标题对表列进行排序,javascript,php,css,mysql,html-table,Javascript,Php,Css,Mysql,Html Table,我试图通过使用Javascript、html和PHP单击标题对表列值进行排序，下面是我的代码： <?php $rows=array(); $query = "SELECT CONCAT(usrFirstname,'',usrSurname) As FullName,usrNickname AS Nickname,"; $query.= "usrEmail As EmailAddress,usrGender AS Gender,DATE_FORMAT(usrDOB,'%d%m%y') As
<?php
$rows=array();
$query = "SELECT CONCAT(usrFirstname,'',usrSurname) As FullName,usrNickname AS Nickname,";
$query.= "usrEmail As EmailAddress,usrGender AS Gender,DATE_FORMAT(usrDOB,'%d%m%y') As DOB,usrBelt AS BeltId";
$query.= " FROM user";
$result = mysql_query($query);
echo mysql_error();
if($result)
{
while($row=mysql_fetch_assoc($result))
{
$rows[] = $row;
}
}
?>
<script type="text/javascript">
function setDataType(cValue)
{
// THIS FUNCTION CONVERTS DATES AND NUMBERS FOR PROPER ARRAY
// SORTING WHEN IN THE SORT FUNCTION
var isDate = new Date(cValue);
if (isDate == "NaN")
{
if (isNaN(cValue))
{
// THE VALUE IS A STRING, MAKE ALL CHARACTERS IN
// STRING UPPER CASE TO ASSURE PROPER A-Z SORT
cValue = cValue.toUpperCase();
return cValue;
}
else
{
// VALUE IS A NUMBER, TO PREVENT STRING SORTING OF A NUMBER
// ADD AN ADDITIONAL DIGIT THAT IS THE + TO THE LENGTH OF
// THE NUMBER WHEN IT IS A STRING
var myNum;
myNum = String.fromCharCode(48 + cValue.length) + cValue;
return myNum;
}
}
else
{
// VALUE TO SORT IS A DATE, REMOVE ALL OF THE PUNCTUATION AND
// AND RETURN THE STRING NUMBER
//BUG - STRING AND NOT NUMERICAL SORT .....
// ( 1 - 10 - 11 - 2 - 3 - 4 - 41 - 5 etc.)
var myDate = new String();
myDate = isDate.getFullYear() + " " ;
myDate = myDate + isDate.getMonth() + " ";
myDate = myDate + isDate.getDate(); + " ";
myDate = myDate + isDate.getHours(); + " ";
myDate = myDate + isDate.getMinutes(); + " ";
myDate = myDate + isDate.getSeconds();
//myDate = String.fromCharCode(48 + myDate.length) + myDate;
return myDate ;
}
}
function sorttable(col, tabletosort)
{
var iCurCell = col + tableToSort.cols;
var totalRows = tableToSort.rows.length;
var bSort = 0;
var colArray = new Array();
var oldIndex = new Array();
var indexArray = new Array();
var bArray = new Array();
var newRow;
var newCell;
var i;
var c;
var j;
for (i=1; i < tableToSort.rows.length; i++)
{
colArray[i - 1] = setDataType(tableToSort.cells(iCurCell).innerText);
iCurCell = iCurCell + tableToSort.cols;
}
for (i=0; i < colArray.length; i++)
{
bArray[i] = colArray[i];
}
colArray.sort();
for (i=0; i < colArray.length; i++)
{ // LOOP THROUGH THE NEW SORTED ARRAY
indexArray[i] = (i+1);
for(j=0; j < bArray.length; j++)
{ // LOOP THROUGH THE OLD ARRAY
if (colArray[i] == bArray[j])
{
for (c=0; c<i; c++)
{
if ( oldIndex[c] == (j+1) )
{
bSort = 1;
}
}
if (bSort == 0)
{
oldIndex[i] = (j+1);
}
bSort = 0;
}
}
}
for (i=0; i<oldIndex.length; i++)
{
newRow = tableToSort.insertRow();
for (c=0; c<tableToSort.cols; c++)
{
newCell = newRow.insertCell();
newCell.innerHTML = tableToSort.rows(oldIndex[i]).cells(c).innerHTML;
}
}
for (i=1; i<totalRows; i++)
{
tableToSort.moveRow((tableToSort.rows.length -1),1);
}
for (i=1; i<totalRows; i++)
{
tableToSort.deleteRow();
}
}
</script>
Full Name NickName EmailAddress Gender DateofBirth BELT ID
xxxxxxx xxxxx xxxxxx xxxxx xxxxxx xxxxx
xxxxx xxxxx xxxxx xxxx xxxxxx xxxxx
您还需要Jquery才能使用它。您可以通过两种方式解决此问题：使用mysql或JS对数据进行排序。如果要使用mysql对它们进行排序，则必须重新加载页面或使用ajax调用并替换表。为此，请使用jqueryajax功能。如果您想使用JS对表进行排序，请使用现有脚本执行此操作。请参阅Catalin链接此用例非常常见，因此有许多现成的解决方案：-您可以通过两种方式解决此问题：使用mysql或JS对数据进行排序。如果要使用mysql对它们进行排序，则必须重新加载页面或使用ajax调用并替换表。为此，请使用jqueryajax功能。如果要使用JS对表进行排序，请使用现有脚本执行此操作参见Catalin链接此用例非常常见，因此有许多现成的解决方案：-以下是我使用的表排序器函数： 工作演示：
以下是我使用的表格分拣机功能： 工作演示：
尝试而不是尝试滚动你自己的。尝试而不是尝试滚动你自己的。我认为你可以覆盖表标题中的类而不显示图像：你在问如何更改列格式或列设计吗？是的，我想要上面提到的表格式，但它是像我提到的那样显示的上面…我想你可以覆盖表格标题中的类而不显示图像：你在问如何更改列格式或列设计吗？是的，我想要上面提到的表格格式，但它显示的是上面提到的…嗨，你知道吗。。。我想要上面提到的表格格式，但它的显示方式就像我上面提到的一样。您好，您对此有什么想法吗。。。我想要上面提到的表格格式，但它的显示方式和我上面提到的一样，Q非常多…gilly3，但我已经尝试了很多方法来删除表格中行和列之间的空格，请您对此有什么想法吗？代码在上面，我已经提到了…@User6-我无法重现您显示的空格问题。你能证明你的间距问题吗。只需查看页面上的源代码，并将表的HTML复制到JSFIDLE中。然后发布一个新问题。单独的问题应该有单独的问题。@User6-排序函数可以很好地处理日期。我更新了样本数据以包括数字和日期。如果JavaScript可以将其解析为日期，则它将被排序为日期。您唯一的问题是，如果您的日期格式是MMddyyyy，即不带分隔符的月初。这将导致排序错误。yyyyMMdd和MM/dd/yyyy或MM-dd-yyyy或类似的变体一样可以正常工作。Thanq非常…gilly3但是我已经尝试了很多方法来删除表中行和列之间的空格。请您对此有什么想法吗？代码在上面我已经提到了…@User6-我无法重现您显示的空格问题。你能证明你的间距问题吗。只需查看页面上的源代码，并将表的HTML复制到JSFIDLE中。然后发布一个新问题。单独的问题应该有单独的问题。@User6-排序函数可以很好地处理日期。我更新了样本数据以包括数字和日期。如果JavaScript可以将其解析为日期，则它将被排序为日期。您唯一的问题是，如果您的日期格式是MMddyyyy，即不带分隔符的月初。这将导致排序错误。yyyyMMdd将与MM/dd/yyyy或MM-dd-yyyy或类似变体一样正常工作。
Full Name NickName EmailAddress Gender DateofBirth BELT ID
xxxxxxx xxxxx xxxxxx xxxxx xxxxxx xxxxx
xxxxxx xxxx xxxxxx xxxxx xxxx xxxxx
Full Name NickName EmailAddress Gender DateofBirth BELT ID
xxxxxxx xxxxx xxxxxx xxxxx xxxxxx xxxxx
xxxxx xxxxx xxxxx xxxx xxxxxx xxxxx
function sortTable(table, cellIndex, isAscending) {
sortElements([].slice.call(table.rows, 1), function(r1, r2) {
return compareRows(cellIndex, isAscending, r1, r2);
});
}
function sortElements(elements, sortFn) {
if (!elements instanceof Array) {
elements = toArray(elements);
}
var parent = elements[0].parentNode;
elements = elements.sort(sortFn);
for (var i = 0; i < elements.length; i++) {
parent.appendChild(elements[i]);
}
}
function compareRows(cellIndex, isAscending, r1, r2) {
var sortOperator = isAscending ? 1 : -1;
var s1 = getText(r1.cells[cellIndex]).toLowerCase();
var s2 = getText(r2.cells[cellIndex]).toLowerCase();
var i1 = parseFloat(s1);
var i2 = parseFloat(s2);
var d1 = new Date(s1);
var d2 = new Date(s2);
var c1 = s1;
var c2 = s2;
if (!isNaN(d1) && !isNaN(d2)) {
c1 = d1.valueOf();
c2 = d2.valueOf();
}
else if (!isNaN(i1) && !isNaN(i2)) {
c1 = i1;
c2 = i2;
}
var result = c1 > c2 ? 1 : c1 < c2 ? -1 : 0;
return sortOperator * result;
}
function toArray(list) {
if (list instanceof Array) return list;
var a = [];
for (var i = 0; i < list.length; i++) {
a.push(list[i]);
}
return a;
}
function getText(el) {
var text = "";
for (var i = 0; el && el.childNodes && i < el.childNodes.length; i++) {
var node = el.childNodes[i];
text += node.nodeType == 3 ? node.data : getText(node);
}
return text;
}