您的位置：首页 > Web前端 > JavaScript

js 表格排序

2011-11-23 22:44 381 查看 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function reSort()
{
var sortColNum = document.getElementById("selColNum").value;
var sortType = document.getElementById("selSortType").value;
var table = document.getElementById("tbl");
var tbodys = table.tBodies;
var rows = [];
var tblRows = tbodys[0].rows;
for (var i = 0; i < tblRows.length; i++) {
rows[i] = tblRows[i];
}
var sortFun = function (type) {
return function (r1, r2) {
var v1 = getCellValue(r1.cells[sortColNum]);
var v2 = getCellValue(r2.cells[sortColNum]);
if (!isNaN(v1) && !isNaN(v2))
{
r1 = parseFloat(v1);
r2 = parseFloat(v2);
}
if (type == "asc") {
return r1 < r2 ? -1: 1;
} else {
return r1 < r2 ? 1 : -1;
}
};
};
rows.sort(sortFun(sortType));
for (var i = 0; i < rows.length; i++) {
tbodys[0].appendChild(rows[i]);
}
}
function getCellValue(cell)
{
if (cell.value && cell.value != "")
{
return cell.value;
}
else if (cell.getElementsByTagName("INPUT").length > 0)
{
return cell.getElementsByTagName("INPUT")[0].value;
}
else
{
return cell.innerHTML;
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="">
<SELECT ID="selColNum" NAME="selColNum">
<OPTION VALUE="0" SELECTED>列一</OPTION>
<OPTION VALUE="1">列二</OPTION>
<OPTION VALUE="2">列三</OPTION>
<OPTION VALUE="3">列四</OPTION>
</SELECT>
<SELECT ID="selSortType" NAME="selSortType">
<OPTION VALUE="asc" SELECTED>升序</OPTION>
<OPTION VALUE="desc">降序</OPTION>
</SELECT>
<INPUT TYPE="button" NAME="btnSort" VALUE="排序" ONCLICK="reSort()">
<TABLE id="tbl" width="300px" height="200px" border="1">
<THEAD>
<TR>
<TD bgcolor="#66CC66">列一</TD>
<TD bgcolor="#66CC66">列二</TD>
<TD bgcolor="#66CC66">列三</TD>
<TD bgcolor="#66CC66">列四</TD>
</TR>
<TR>
</THEAD>
<TBODY>
<TR>
<TD>1</TD>
<TD>9</TD>
<TD value="1">a</TD>
<TD>九<input type="hidden" value="9"/></TD>
</TR>
<TR>
<TD>2</TD>
<TD>8</TD>
<TD value="2">b</TD>
<TD>八<input type="hidden" value="8"/></TD>
</TR>
<TR>
<TD>3</TD>
<TD>7</TD>
<TD value="3">c</TD>
<TD>七<input type="hidden" value="7"/></TD>
</TR>
<TR>
<TD>4</TD>
<TD>6</TD>
<TD value="4">d</TD>
<TD>六<input type="hidden" value="6"/></TD>
</TR>
<TR>
<TD>5</TD>
<TD>5</TD>
<TD value="5">e</TD>
<TD>五<input type="hidden" value="5"/></TD>
</TR>
<TR>
<TD>6</TD>
<TD>4</TD>
<TD value="6">f</TD>
<TD>四<input type="hidden" value="4"/></TD>
</TR>
<TR>
<TD>7</TD>
<TD>3</TD>
<TD value="7">g</TD>
<TD>三<input type="hidden" value="3"/></TD>
</TR>
<TR>
<TD>8</TD>
<TD>2</TD>
<TD value="8">h</TD>
<TD>二<input type="hidden" value="2"/></TD>
</TR>
<TR>
<TD>9</TD>
<TD>1</TD>
<TD value="9">i</TD>
<TD>一<input type="hidden" value="1"/></TD>
</TR>
</TBODY>
</TABLE>
</FORM>
</BODY>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  input function html javascript table button
相关文章推荐
新的分享
章节导航