我有一个多维，并试图切换，但不工作的预期我的问题是
1)当用户再次单击标题和列之间时，我如何在升序和降序之间切换?
2)传递每个列到排序函数以重用该函数的更好方法是什么?
3)如果我的"th"名是相同的，我该怎么办?
下面是我的代码。
<html>
<table id="UntilityDataTable" border="1" width="100%">
<thead>
<tr>
<th><a href="#" title="Sort by Description"
onclick="return sortTable(this)">Utilities</a></th>
<th><a href="#" title="Sort 2012"
onclick="return sortTable(this)">2012</a></th>
<th><a href="#" title="Sort 2011"
onclick="return sortTable(this)">2011</a></th>
<th><a href="#" title="Sort Variance"
onclick="return sortTable(this)">Var</a></th>
<th><a href="#" title="Sort 2010"
onclick="return sortTable(this)">2010</a></th>
</tr>
</thead>
<tbody id="contentsTable"></tbody>
</table>
<script >
var desc = ["Water", "Heating", "Electric", "Gas"];
var price12 = ["824", "325", "0", "245"];
var price11 = ["500", "225", "30", "429"];
var price10 = ["622", "165", "90", "529"];
var pricevar = [];
var UtilityData = [];
for (i = 0; i < desc.length; ++i) {
pricevar[i] = price12[i] - price11[i];
if (price12[i] !== 0 && price11[i] !== 0 && price10[i] !== 0) {
UtilityData.push([desc[i], price12[i], price11[i], pricevar[i], price10[i]]);
}
}
var descending = false;
function sortTable(link) {
if (link.firstChild.nodeValue == "Utilities" && !descending) {
UtilityData.sort(sortutildesnd);
descending = true;
} else if (link.firstChild.nodeValue == "Utilities" && descending) {
UtilityData.sort(sortutilaesnd);
descending = false;
}
if (link.firstChild.nodeValue == "2012" && descending) {
UtilityData.sort(sortdesnd12);
descending = false;
} else if (link.firstChild.nodeValue == "2012" && !descending) {
UtilityData.sort(sortaesnd12);
descending = true;
}
drawUtilTable("contentsTable");
return false
}
function sortdesnd12(a, b) { return b[1] - a[1]; }
function sortaesnd12(a, b) { return a[1] - b[1]; }
// sort ascending
function sortutilaesnd(a, b) {
var sortdescA = a[0].toLowerCase(),
sortdescB = b[0].toLowerCase()
if (sortdescA < sortdescB) return -1
if (sortdescA > sortdescB) return 1
return 0
}
// sort descending
function sortutildesnd(a, b) {
var sortdescA = a[0].toLowerCase(),
sortdescB = b[0].toLowerCase()
if (sortdescB < sortdescA) return -1
if (sortdescB > sortdescA) return 1
return 0
}
function clearTable(tbody) {
while (tbody.rows.length > 0) {
tbody.deleteRow(0);
}
}
function drawUtilTable(tbody) {
var tr, td;
tbody = document.getElementById(tbody);
clearTable(tbody);
// loop through data source
for (var i = 0; i < UtilityData.length; i++) {
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "left");
td.setAttribute("width", "25%");
td.innerHTML = UtilityData[i][0];
td = tr.insertCell(tr.cells.length);
td.setAttribute("width", "11%");
td.innerHTML = UtilityData[i][1];
td = tr.insertCell(tr.cells.length);
td.setAttribute("width", "11%");
td.innerHTML = UtilityData[i][2];
td = tr.insertCell(tr.cells.length);
td.setAttribute("width", "11%");
td.innerHTML = UtilityData[i][3];
td = tr.insertCell(tr.cells.length);
td.setAttribute("width", "10%");
td.innerHTML = UtilityData[i][4];
}
}
drawUtilTable("contentsTable");
</script>
jQuery使Javascript变得简单。它还极大地清理了代码，使其更易于阅读和理解。
<html>
<table id="UntilityDataTable" border="1" width="100%">
<thead>
<tr>
<th><a href="#" title="Sort by Description">Utilities</a></th>
<th><a href="#" title="Sort 2012">2012</a></th>
<th><a href="#" title="Sort 2011">2011</a></th>
<th><a href="#" title="Sort Variance">Var</a></th>
<th><a href="#" title="Sort 2010">2010</a></th>
</tr>
</thead>
<tbody id="contentsTable"></tbody>
</table>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var desc = ["Water","Heating","Electric","Gas"];
var price12 = ["824","325","0","245"];
var price11 = ["500","225","30","429"];
var price10 = ["622","165","90","529"];
var pricevar =[];
var UtilityData = [];
var descending = false;
for (i = 0; i < desc.length; ++ i) {
pricevar[i] = price12[i]- price11[i];
if(price12[i] !== 0 && price11[i] !== 0 && price10[i] !== 0) {
UtilityData.push([desc[i], price12[i], price11[i], pricevar[i], price10[i]]);
}
}
$('th').click(function() {
var columnTitle = $(this).find('a').html();
var direction = '';
switch (columnTitle) {
case 'Utilities':
if (descending) {
UtilityData.sort(sortutilaesnd);
descending = false;
} else {
UtilityData.sort(sortutildesnd);
descending = true;
}
break;
case '2012':
if (descending) {
UtilityData.sort(sortdesnd12);
descending = false;
} else {
UtilityData.sort(sortaesnd12);
descending = true;
}
break;
case '2011':
// code goes here
break;
case 'Var':
// code goes here
break;
case '2010':
// code goes here
break;
}
drawUtilTable("contentsTable");
return false;
});
function sortdesnd12(a,b){return b[1] - a[1];}
function sortaesnd12(a,b){return a[1] - b[1];}
// sort ascending
function sortutilaesnd(a,b){
var sortdescA=a[0].toLowerCase(), sortdescB=b[0].toLowerCase();
if (sortdescA < sortdescB) {
return -1;
}
if (sortdescA > sortdescB) {
return 1;
}
return 0;
}
// sort descending
function sortutildesnd(a,b){
var sortdescA=a[0].toLowerCase(), sortdescB=b[0].toLowerCase()
if (sortdescB < sortdescA) {
return -1;
}
if (sortdescB > sortdescA) {
return 1;
}
return 0;
}
function clearTable(tbody) {
while (tbody.rows.length > 0) {
tbody.deleteRow(0);
}
}
function drawUtilTable(tbody) {
var tr, td;
tbody = document.getElementById(tbody);
clearTable(tbody);
// loop through data source
for (var i = 0; i < UtilityData.length; i++) {
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
td.setAttribute("align", "left");
td.setAttribute("width", "25%");
td.innerHTML = UtilityData[i][0];
td = tr.insertCell(tr.cells.length);
td.setAttribute("width", "11%");
td.innerHTML = UtilityData[i][1];
td = tr.insertCell(tr.cells.length);
td.setAttribute("width", "11%");
td.innerHTML = UtilityData[i][2];
td = tr.insertCell(tr.cells.length);
td.setAttribute("width", "11%");
td.innerHTML = UtilityData[i][3];
td = tr.insertCell(tr.cells.length);
td.setAttribute("width", "10%");
td.innerHTML = UtilityData[i][4];
}
}
drawUtilTable("contentsTable");
});
</script>
</html>
如果你仍然不使用jQuery，我建议给每个<th>一个ID, getElementById和使用类似的switch逻辑。
你的代码很好，只是稍微改进一下!