无法对HTML表进行排序：并且<a href="">

时间：2018-08-24 18:54:49

标签： javascript html sorting html-table 

<!DOCTYPE html>
<html>

<head>
  <title>Links Test for Stack</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #AllTable {
      border-collapse: collapse;
      /* Collapse borders */
      width: 100%;
      /* Full-width */
      border: 1px solid #ddd;
      /* Add a grey border */
      font-size: 18px;
      /* Increase font-size */
    }
  </style>
</head>



<body>


  <div>
    <input type="button" value="Sort" onclick="sortTable()" ;><br>
  </div>


  <div id="All" class="tabcontent">
    <h3>All Links</h3>
    <table id="AllTable">
      <caption></caption>
      <tr>
        <th>LINK</th>
        <th>DESCRIPTION</th>
        <th>CATEGORY</th>
      </tr>

<tr><td><a href="http://lycos.com" target="_blank" alt="none">Goldie</a></td><td>Goldie description</td><td>Goldie category</td>
<tr><td><a href="http://networkadvertising.org" target="_blank" alt="none">Ericha</a></td><td>Ericha description</td><td>Ericha category</td>
<tr><td><a href="http://google.cn" target="_blank" alt="none">Karel</a></td><td>Karel description</td><td>Karel category</td>
<tr><td><a href="https://addthis.com" target="_blank" alt="none">Jack</a></td><td>Jack description</td><td>Jack category</td>
<tr><td><a href="http://purevolume.com" target="_blank" alt="none">Meredith</a></td><td>Meredith description</td><td>Meredith category</td>
<tr><td><a href="https://chicagotribune.com" target="_blank" alt="none">Emilia</a></td><td>Emilia description</td><td>Emilia category</td>
<tr><td><a href="https://cnn.com" target="_blank" alt="none">Jenifer</a></td><td>Jenifer description</td><td>Jenifer category</td>
<tr><td><a href="https://indiatimes.com" target="_blank" alt="none">Wolfy</a></td><td>Wolfy description</td><td>Wolfy category</td>
<tr><td><a href="http://multiply.com" target="_blank" alt="none">Jaynell</a></td><td>Jaynell description</td><td>Jaynell category</td>
<tr><td><a href="https://mail.ru" target="_blank" alt="none">Melissa</a></td><td>Melissa description</td><td>Melissa category</td>
<tr><td><a href="https://archive.org" target="_blank" alt="none">Constantine</a></td><td>Constantine description</td><td>Constantine category</td>
<tr><td><a href="https://icio.us" target="_blank" alt="none">Dulsea</a></td><td>Dulsea description</td><td>Dulsea category</td>
<tr><td><a href="http://statcounter.com" target="_blank" alt="none">Serene</a></td><td>Serene description</td><td>Serene category</td>
<tr><td><a href="https://cyberchimps.com" target="_blank" alt="none">Chad</a></td><td>Chad description</td><td>Chad category</td>
<tr><td><a href="https://wikia.com" target="_blank" alt="none">Jeana</a></td><td>Jeana description</td><td>Jeana category</td>
<tr><td><a href="https://ow.ly" target="_blank" alt="none">Jody</a></td><td>Jody description</td><td>Jody category</td>
<tr><td><a href="https://xrea.com" target="_blank" alt="none">Blinnie</a></td><td>Blinnie description</td><td>Blinnie category</td>
<tr><td><a href="http://etsy.com" target="_blank" alt="none">Rene</a></td><td>Rene description</td><td>Rene category</td>
<tr><td><a href="https://ocn.ne.jp" target="_blank" alt="none">Pegeen</a></td><td>Pegeen description</td><td>Pegeen category</td>
<tr><td><a href="http://redcross.org" target="_blank" alt="none">Shep</a></td><td>Shep description</td><td>Shep category</td>
<tr><td><a href="https://nature.com" target="_blank" alt="none">Alasdair</a></td><td>Alasdair description</td><td>Alasdair category</td>
<tr><td><a href="http://symantec.com" target="_blank" alt="none">Vanni</a></td><td>Vanni description</td><td>Vanni category</td>
<tr><td><a href="https://hibu.com" target="_blank" alt="none">Adamo</a></td><td>Adamo description</td><td>Adamo category</td>
<tr><td><a href="http://marketwatch.com" target="_blank" alt="none">Rahal</a></td><td>Rahal description</td><td>Rahal category</td>
<tr><td><a href="http://foxnews.com" target="_blank" alt="none">Elbertina</a></td><td>Elbertina description</td><td>Elbertina category</td>
<tr><td><a href="https://mtv.com" target="_blank" alt="none">Lauree</a></td><td>Lauree description</td><td>Lauree category</td>
<tr><td><a href="https://newyorker.com" target="_blank" alt="none">Elnora</a></td><td>Elnora description</td><td>Elnora category</td>
<tr><td><a href="http://rediff.com" target="_blank" alt="none">Mahmud</a></td><td>Mahmud description</td><td>Mahmud category</td>
<tr><td><a href="https://last.fm" target="_blank" alt="none">Bette</a></td><td>Bette description</td><td>Bette category</td>
<tr><td><a href="http://macromedia.com" target="_blank" alt="none">Sayres</a></td><td>Sayres description</td><td>Sayres category</td>
<tr><td><a href="https://bandcamp.com" target="_blank" alt="none">Darci</a></td><td>Darci description</td><td>Darci category</td>
<tr><td><a href="https://chronoengine.com" target="_blank" alt="none">Stanley</a></td><td>Stanley description</td><td>Stanley category</td>
<tr><td><a href="http://sciencedaily.com" target="_blank" alt="none">Anthony</a></td><td>Anthony description</td><td>Anthony category</td>
<tr><td><a href="https://java.com" target="_blank" alt="none">Pryce</a></td><td>Pryce description</td><td>Pryce category</td>
<tr><td><a href="http://arstechnica.com" target="_blank" alt="none">Ezmeralda</a></td><td>Ezmeralda description</td><td>Ezmeralda category</td>
<tr><td><a href="http://google.de" target="_blank" alt="none">Bliss</a></td><td>Bliss description</td><td>Bliss category</td>
<tr><td><a href="https://meetup.com" target="_blank" alt="none">Leigh</a></td><td>Leigh description</td><td>Leigh category</td>
<tr><td><a href="http://earthlink.net" target="_blank" alt="none">Merrie</a></td><td>Merrie description</td><td>Merrie category</td>
<tr><td><a href="https://comcast.net" target="_blank" alt="none">Dewain</a></td><td>Dewain description</td><td>Dewain category</td>
<tr><td><a href="http://nifty.com" target="_blank" alt="none">Dorothee</a></td><td>Dorothee description</td><td>Dorothee category</td>
<tr><td><a href="https://springer.com" target="_blank" alt="none">Glennis</a></td><td>Glennis description</td><td>Glennis category</td>
<tr><td><a href="http://dailymotion.com" target="_blank" alt="none">Tripp</a></td><td>Tripp description</td><td>Tripp category</td>
<tr><td><a href="https://cisco.com" target="_blank" alt="none">Clyve</a></td><td>Clyve description</td><td>Clyve category</td>
<tr><td><a href="http://nbcnews.com" target="_blank" alt="none">Corny</a></td><td>Corny description</td><td>Corny category</td>
<tr><td><a href="http://t.co" target="_blank" alt="none">Robena</a></td><td>Robena description</td><td>Robena category</td>
<tr><td><a href="https://netscape.com" target="_blank" alt="none">Nikolaus</a></td><td>Nikolaus description</td><td>Nikolaus category</td>
<tr><td><a href="https://walmart.com" target="_blank" alt="none">Cassie</a></td><td>Cassie description</td><td>Cassie category</td>
<tr><td><a href="http://youtube.com" target="_blank" alt="none">Merrilee</a></td><td>Merrilee description</td><td>Merrilee category</td>
<tr><td><a href="http://vistaprint.com" target="_blank" alt="none">Kalinda</a></td><td>Kalinda description</td><td>Kalinda category</td>
<tr><td><a href="https://hubpages.com" target="_blank" alt="none">Carny</a></td><td>Carny description</td><td>Carny category</td>

    </table>
  </div>


  <script>
    function sortTable() {
      var table, rows, switching, i, x, y, shouldSwitch;
      table = document.getElementById("AllTable");
      switching = true;
      /*Make a loop that will continue until
      no switching has been done:*/
      while (switching) {
        //start by saying: no switching is done:
        switching = false;
        rows = table.rows;
        /*Loop through all table rows (except the
        first, which contains table headers):*/
        for (i = 1; i < (rows.length - 1); i++) {
          //start by saying there should be no switching:
          shouldSwitch = false;
          /*Get the two elements you want to compare,
          one from current row and one from the next:*/
          x = rows[i].getElementsByTagName("TD")[0];
          y = rows[i + 1].getElementsByTagName("TD")[0];
          //check if the two rows should switch place:
          if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
            //if so, mark as a switch and break the loop:
            shouldSwitch = true;
            break;
          }
        }
        if (shouldSwitch) {
          /*If a switch has been marked, make the switch
          and mark that a switch has been done:*/
          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
          switching = true;
        }
      }
    }
  </script>


</body>

</html>

I would like to sort an HTML table - and I have the below script. The trouble is the first column is generated like this, which (bc the script is pointed at the td element) it doesn't sort properly. 

<td><a href="URL" target="_blank">VALUE_TO_SORT_BY</a></td>

Where var x and y are defined, I tried changing td to a, but it didn't work (no sorting at all occurred as far as I could tell) 

<script>
function sortTable() {
    var table, rows, switching, i, x, y, shouldSwitch;
    table = document.getElementById("myTable");
    switching = true;
    /*Make a loop that will continue until
    no switching has been done:*/
    while (switching) {
        //start by saying: no switching is done:
        switching = false;
        rows = table.rows;
        /*Loop through all table rows (except the
        first, which contains table headers):*/
        for (i = 1; i < (rows.length - 1); i++) {
            //start by saying there should be no switching:
            shouldSwitch = false;
            /*Get the two elements you want to compare,
            one from current row and one from the next:*/
            //I think the issue is here, but unsure how to solve
            x = rows[i].getElementsByTagName("TD")[0];
            y = rows[i + 1].getElementsByTagName("TD")[0];
            //check if the two rows should switch place:
            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                //if so, mark as a switch and break the loop:
                shouldSwitch = true;
                break;
            }
        }
        if (shouldSwitch) {
            /*If a switch has been marked, make the switch
            and mark that a switch has been done:*/
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
        }
    }
}
</script>

1 个答案:

答案 0 :(得分：0)

一切看起来都很不错，但是以下这一行有所不同：if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase())在这里，您正在比较元素内部的所有HTML，而不仅仅是要在结尾处比较的文本。因此，我们应该依靠textContent属性而不是innerHTML属性，上面的行变为：if(x.textContent.toLowerCase() > y.textContent.toLowerCase())。

function sortTable() {
    var table, rows, switching, i, x, y, shouldSwitch;
    table = document.getElementById("AllTable");
    switching = true;
    /*Make a loop that will continue until
    no switching has been done:*/
    while (switching) {
        //start by saying: no switching is done:
        switching = false;
        rows = table.rows;
        /*Loop through all table rows (except the
        first, which contains table headers):*/
        for (i = 1; i < (rows.length - 1); i++) {
            //start by saying there should be no switching:
            shouldSwitch = false;
            /*Get the two elements you want to compare,
            one from current row and one from the next:*/
            //I think the issue is here, but unsure how to solve
            x = rows[i].getElementsByTagName("TD")[0];
            y = rows[i + 1].getElementsByTagName("TD")[0];
            //check if the two rows should switch place:
            if (x.textContent.toLowerCase() > y.textContent.toLowerCase()) {
                //if so, mark as a switch and break the loop:
                shouldSwitch = true;
                break;
            }
        }
        if (shouldSwitch) {
            /*If a switch has been marked, make the switch
            and mark that a switch has been done:*/
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
        }
    }
}
<!DOCTYPE html>
<html>

<head>
  <title>Links Test for Stack</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #AllTable {
      border-collapse: collapse;
      /* Collapse borders */
      width: 100%;
      /* Full-width */
      border: 1px solid #ddd;
      /* Add a grey border */
      font-size: 18px;
      /* Increase font-size */
    }
  </style>
</head>



<body>


  <div>
    <input type="button" value="Sort" onclick="sortTable()" ;><br>
  </div>


  <div id="All" class="tabcontent">
    <h3>All Links</h3>
    <table id="AllTable">
      <caption></caption>
      <tr>
        <th>LINK</th>
        <th>DESCRIPTION</th>
        <th>CATEGORY</th>
      </tr>

<tr><td><a href="http://lycos.com" target="_blank" alt="none">Goldie</a></td><td>Goldie description</td><td>Goldie category</td>
<tr><td><a href="http://networkadvertising.org" target="_blank" alt="none">Ericha</a></td><td>Ericha description</td><td>Ericha category</td>
<tr><td><a href="http://google.cn" target="_blank" alt="none">Karel</a></td><td>Karel description</td><td>Karel category</td>
<tr><td><a href="https://addthis.com" target="_blank" alt="none">Jack</a></td><td>Jack description</td><td>Jack category</td>
<tr><td><a href="http://purevolume.com" target="_blank" alt="none">Meredith</a></td><td>Meredith description</td><td>Meredith category</td>
<tr><td><a href="https://chicagotribune.com" target="_blank" alt="none">Emilia</a></td><td>Emilia description</td><td>Emilia category</td>
<tr><td><a href="https://cnn.com" target="_blank" alt="none">Jenifer</a></td><td>Jenifer description</td><td>Jenifer category</td>
<tr><td><a href="https://indiatimes.com" target="_blank" alt="none">Wolfy</a></td><td>Wolfy description</td><td>Wolfy category</td>
<tr><td><a href="http://multiply.com" target="_blank" alt="none">Jaynell</a></td><td>Jaynell description</td><td>Jaynell category</td>
<tr><td><a href="https://mail.ru" target="_blank" alt="none">Melissa</a></td><td>Melissa description</td><td>Melissa category</td>
<tr><td><a href="https://archive.org" target="_blank" alt="none">Constantine</a></td><td>Constantine description</td><td>Constantine category</td>
<tr><td><a href="https://icio.us" target="_blank" alt="none">Dulsea</a></td><td>Dulsea description</td><td>Dulsea category</td>
<tr><td><a href="http://statcounter.com" target="_blank" alt="none">Serene</a></td><td>Serene description</td><td>Serene category</td>
<tr><td><a href="https://cyberchimps.com" target="_blank" alt="none">Chad</a></td><td>Chad description</td><td>Chad category</td>
<tr><td><a href="https://wikia.com" target="_blank" alt="none">Jeana</a></td><td>Jeana description</td><td>Jeana category</td>
<tr><td><a href="https://ow.ly" target="_blank" alt="none">Jody</a></td><td>Jody description</td><td>Jody category</td>
<tr><td><a href="https://xrea.com" target="_blank" alt="none">Blinnie</a></td><td>Blinnie description</td><td>Blinnie category</td>
<tr><td><a href="http://etsy.com" target="_blank" alt="none">Rene</a></td><td>Rene description</td><td>Rene category</td>
<tr><td><a href="https://ocn.ne.jp" target="_blank" alt="none">Pegeen</a></td><td>Pegeen description</td><td>Pegeen category</td>
<tr><td><a href="http://redcross.org" target="_blank" alt="none">Shep</a></td><td>Shep description</td><td>Shep category</td>
<tr><td><a href="https://nature.com" target="_blank" alt="none">Alasdair</a></td><td>Alasdair description</td><td>Alasdair category</td>
<tr><td><a href="http://symantec.com" target="_blank" alt="none">Vanni</a></td><td>Vanni description</td><td>Vanni category</td>
<tr><td><a href="https://hibu.com" target="_blank" alt="none">Adamo</a></td><td>Adamo description</td><td>Adamo category</td>
<tr><td><a href="http://marketwatch.com" target="_blank" alt="none">Rahal</a></td><td>Rahal description</td><td>Rahal category</td>
<tr><td><a href="http://foxnews.com" target="_blank" alt="none">Elbertina</a></td><td>Elbertina description</td><td>Elbertina category</td>
<tr><td><a href="https://mtv.com" target="_blank" alt="none">Lauree</a></td><td>Lauree description</td><td>Lauree category</td>
<tr><td><a href="https://newyorker.com" target="_blank" alt="none">Elnora</a></td><td>Elnora description</td><td>Elnora category</td>
<tr><td><a href="http://rediff.com" target="_blank" alt="none">Mahmud</a></td><td>Mahmud description</td><td>Mahmud category</td>
<tr><td><a href="https://last.fm" target="_blank" alt="none">Bette</a></td><td>Bette description</td><td>Bette category</td>
<tr><td><a href="http://macromedia.com" target="_blank" alt="none">Sayres</a></td><td>Sayres description</td><td>Sayres category</td>
<tr><td><a href="https://bandcamp.com" target="_blank" alt="none">Darci</a></td><td>Darci description</td><td>Darci category</td>
<tr><td><a href="https://chronoengine.com" target="_blank" alt="none">Stanley</a></td><td>Stanley description</td><td>Stanley category</td>
<tr><td><a href="http://sciencedaily.com" target="_blank" alt="none">Anthony</a></td><td>Anthony description</td><td>Anthony category</td>
<tr><td><a href="https://java.com" target="_blank" alt="none">Pryce</a></td><td>Pryce description</td><td>Pryce category</td>
<tr><td><a href="http://arstechnica.com" target="_blank" alt="none">Ezmeralda</a></td><td>Ezmeralda description</td><td>Ezmeralda category</td>
<tr><td><a href="http://google.de" target="_blank" alt="none">Bliss</a></td><td>Bliss description</td><td>Bliss category</td>
<tr><td><a href="https://meetup.com" target="_blank" alt="none">Leigh</a></td><td>Leigh description</td><td>Leigh category</td>
<tr><td><a href="http://earthlink.net" target="_blank" alt="none">Merrie</a></td><td>Merrie description</td><td>Merrie category</td>
<tr><td><a href="https://comcast.net" target="_blank" alt="none">Dewain</a></td><td>Dewain description</td><td>Dewain category</td>
<tr><td><a href="http://nifty.com" target="_blank" alt="none">Dorothee</a></td><td>Dorothee description</td><td>Dorothee category</td>
<tr><td><a href="https://springer.com" target="_blank" alt="none">Glennis</a></td><td>Glennis description</td><td>Glennis category</td>
<tr><td><a href="http://dailymotion.com" target="_blank" alt="none">Tripp</a></td><td>Tripp description</td><td>Tripp category</td>
<tr><td><a href="https://cisco.com" target="_blank" alt="none">Clyve</a></td><td>Clyve description</td><td>Clyve category</td>
<tr><td><a href="http://nbcnews.com" target="_blank" alt="none">Corny</a></td><td>Corny description</td><td>Corny category</td>
<tr><td><a href="http://t.co" target="_blank" alt="none">Robena</a></td><td>Robena description</td><td>Robena category</td>
<tr><td><a href="https://netscape.com" target="_blank" alt="none">Nikolaus</a></td><td>Nikolaus description</td><td>Nikolaus category</td>
<tr><td><a href="https://walmart.com" target="_blank" alt="none">Cassie</a></td><td>Cassie description</td><td>Cassie category</td>
<tr><td><a href="http://youtube.com" target="_blank" alt="none">Merrilee</a></td><td>Merrilee description</td><td>Merrilee category</td>
<tr><td><a href="http://vistaprint.com" target="_blank" alt="none">Kalinda</a></td><td>Kalinda description</td><td>Kalinda category</td>
<tr><td><a href="https://hubpages.com" target="_blank" alt="none">Carny</a></td><td>Carny description</td><td>Carny category</td>

    </table>
  </div>
</body>

</html>

希望我进一步推动了你。

相关问题
最新问题