javascript - 按字母顺序对动态生成的表进行排序

Question

我正在尝试按字母顺序对表格进行排序。这是基于每行的第二列(在标题“标题”下)。当隔离在 html 文件中时，我的代码工作得很好。 Located here...

当我试图让它与动态构建的表一起工作时，问题就出现了。我将在下面展示代码的重要部分。

排序表函数...

function sortTable() {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById("manga-tracker").getElementsByTagName('table')[0];
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.getElementsByTagName("tr");
    /* Loop through all table rows (except the
    first, which contains table headers): */
    for (var 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")[1].getElementsByTagName('a')[0].text;
        y = rows[i + 1].getElementsByTagName("td")[1].getElementsByTagName('a')[0].text;
        console.log('x: '+x+', y: '+y);
        // Check if the two rows should switch place:
        if (x.toLowerCase() > y.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;
    }
}

这是通过从服务器接收数据来创建表的。此函数生成的 HTML 看起来就像我在本文顶部的代码笔示例中提供的 HTML。

function populateMangaTracker() {
$('#manga-tracker').html("<table><th> </th><th>Title</th><th>Released</th><th>Owned</th><th>Read</th><th>Last Updated</th><th>Posted By</th></table>");
$.ajax({
    method: 'GET',
    url: 'populate-mangatracker.php',
});
$.getJSON('populate-mangatracker.php', function(data){
    $.each( data, function( key, val ) { 
        $('#manga-tracker table').append("<tr><td><input type='checkbox' name='delete-manga' value='"+val.id+"' /></td><td><a href='?id="+val.id+"'>"+val.title+"</a></td><td>"+val.total+"</td><td>"+val.owned+"</td><td>"+val.volRead+"</td><td>"+val.lastUpdated+"</td><td>"+ val.owner.charAt(0).toUpperCase() + val.owner.substr(1) +"</td></tr>");
    });
    // add onclick event to #manga-tracker links
    $('#manga-tracker a').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        var pathName = $(this).attr('href').split('=');
        pathName = pathName[1];
        if(pathName >= 0) {
            window.location = 'edit-manga.php?id='+pathName;
        }
    });
});

在 tableSort() 函数内部...当我尝试在 for() 循环内部使用 console.log() 时，它不起作用，因为变量“行”的长度仅为 1，因此任何超过索引的内容1 未知。

当我在 for() 循环之前使用 console.log() 'rows' 时，它包含所有 10 个 tr 标签。我不明白数组内容的去向...有人可以帮我解决这个问题吗？

拜托，谢谢!

Answer 1

如果您可以删除表格元素并再次添加它们，请尝试以下操作:

const tbody = document.querySelector('#manga-tracker tbody');
const [trhead, ...trs] = [...tbody.children];
trs.sort((tr1, tr2) => tr1.children[1].textContent.localeCompare(tr2.children[1].textContent));
tbody.textContent = '';
[trhead, ...trs].forEach(tr => tbody.appendChild(tr));

<div id="manga-tracker-wrapper">
  <form action="delete-manga.php" method="POST">
    <div id="manga-tracker">
      <table>
        <tbody>
          <tr>
            <th> </th>
            <th>Title</th>
            <th>Released</th>
            <th>Owned</th>
            <th>Read</th>
            <th>Last Updated</th>
          </tr>
          <tr>
            <td><input type="checkbox" name="delete-manga" value="7"></td>
            <td><a href="?id=7">Arifureta: From Commonplace to World's Strongest</a></td>
            <td>20</td>
            <td>1</td>
            <td>1</td>
            <td>2018-05-14</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="delete-manga" value="6"></td>
            <td><a href="?id=6">Akame ga KILL!</a></td>
            <td>14</td>
            <td>14</td>
            <td>14</td>
            <td>2018-05-13</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="delete-manga" value="11"></td>
            <td><a href="?id=11">Dragonball Super</a></td>
            <td>2</td>
            <td>1</td>
            <td>1</td>
            <td>2018-05-14</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="delete-manga" value="12"></td>
            <td><a href="?id=12">7th Garden</a></td>
            <td>8</td>
            <td>1</td>
            <td>1</td>
            <td>2018-05-14</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="delete-manga" value="13"></td>
            <td><a href="?id=13">Attack on Titan</a></td>
            <td>25</td>
            <td>2</td>
            <td>0</td>
            <td>2018-05-14</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="delete-manga" value="14"></td>
            <td><a href="?id=14">The Ancient Magus' Bride</a></td>
            <td>8</td>
            <td>7</td>
            <td>7</td>
            <td>2018-05-14</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="delete-manga" value="15"></td>
            <td><a href="?id=15">Beasts of Abigaile</a></td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
            <td>2018-05-14</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="delete-manga" value="16"></td>
            <td><a href="?id=16">Berserk</a></td>
            <td>39</td>
            <td>6</td>
            <td>6</td>
            <td>2018-05-14</td>
          </tr>
          <tr>
            <td><input type="checkbox" name="delete-manga" value="17"></td>
            <td><a href="?id=17">Fairy Tale</a></td>
            <td>63</td>
            <td>1</td>
            <td>0</td>
            <td>2018-05-14</td>
          </tr>
        </tbody>
      </table>
    </div>
  </form>
  <div id="delete-response">
  </div>
</div>