对多个表的 td 值进行排序答案

【问题标题】：Sort td values on multiple tables对多个表的 td 值进行排序
【发布时间】：2023-03-19 05:13:01
【问题描述】：

我需要对 3 个表的第一个 td 元素进行排序。我必须使用 jQuery 来做，而不是纯 javascript。示例：

<table>
    <tr>
        <td>cx</td>
        <td>xx</td>
    </tr>
</table>
<table>
    <tr>
        <td>bx</td>
        <td>xx</td>
    </tr>
</table>
<table>
    <tr>
        <td>ax</td>
        <td>xx</td>
    </tr>
</table>

我想得到的结果是：

<table>
    <tr>
        <td>ax</td>
        <td>xx</td>
    </tr>
</table>
<table>
    <tr>
        <td>bx</td>
        <td>xx</td>
    </tr>
</table>
<table>
    <tr>
        <td>cx</td>
        <td>xx</td>
    </tr>
</table>

编辑 1：这就是我想要做的：如果你能告诉我如何获取当前的 td 元素值，那对我来说会很好

编辑2：现在结果中的值与排序前相同。对不起我的错误

var table = $("table");
var currentTableTd;
$.each(table, function(k, v) {
  //currentTableTd = v.find("td:first-child");
  //window.console.log(currentTableTd); // will log error v.find() is not a function which I understand because var v isn't a Jquery object.
  //or
  currentTableTd = $(this).find("td:first-child").text();
  window.console.log(currentTableTd); //log undefined
})

【问题讨论】：

请贴出您尝试过的代码。
结果中的值和排序前不一样？
你可以使用可用的 tablesorter 插件 -> tablesorter.com/docs/#Introduction 如果不是问题的话
同时粘贴你的 jquery 代码，如果你有的话，我们可以帮你把它做好
您可以调用一个函数对每个表进行排序。你为什么要循环表格？

标签： javascript jquery jquery-selectors

【解决方案1】：

你可以使用sort，然后替换html:-

var sorted = $('table').sort(function(a, b) {
  return $('td:first', a).text().localeCompare($('td:first', b).text());
}).clone();

sorted.each(function(i, e) {
  $('table').eq(i).html($(e).html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>cx</td>
    <td>xx</td>
  </tr>
</table>
<table>
  <tr>
    <td>bx</td>
    <td>xx</td>
  </tr>
</table>
<table>
  <tr>
    <td>ax</td>
    <td>xx</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

在 24 小时内解决这个问题后，我终于找到了自己的解决方案。我把它贴在这里。也许它可以帮助其他人。

特别感谢那些在没有帮助我的情况下对我的问题“投反对票”的人。他们给了我找到自己解决方案的意志力。

    var table = $("table");
    $.each(table, function (k, v) {
        var $currentTable = $("table").eq(k);
        var $tr = $currentTable.find("tr").not(":first");
        var $tdAll = $tr.find("td:first");
        var textNodes = []; //collecting textNodes of td elements 
        var map = {}; //mapping $tdAll
        var result = []; //contains sorted td elements to be added to the dom

        $.each($tdAll, function (k, v) {
            textNodes.push($(v).text());
            map[k] = $(v);
        })
        textNodes.sort();
        for (var i = 0; i < textNodes.length; i++) {
            for (var key in map) {
                if (textNodes[i] === $(map[key]).text())
                    result.push($(map[key]));
            }
        }
        //Dom construction
        $tr.find("td").remove();
        for (var i = 0; i < textNodes.length; i++) {
            $tr.eq(i).find("td:first").before($(result[i]));
        }
    })

【讨论】：