1

私は多次元でトグルしようとしていますが、意図したとおりに機能していません

1) ユーザーがタイトルと列の間をもう一度クリックしたときに、昇順と降順を切り替えるにはどうすればよいですか?

2)各列をソート関数に渡してその関数を再利用するより良い方法は何ですか?

3) 「番目」の名前が同じ場合はどうすればよいですか?

以下は私のコードです..

<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>
4

1 に答える 1