1

我有一个多维并试图切换但没有按预期工作我的问题是

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

1 回答 1

2

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逻辑。

你的代码很好，只是稍微改进一下！

于 2013-05-15T22:25:53.327 回答