Question

我正在尝试编写代码以使用ajax调用显示表，并在单击按钮时对列进行排序。好像我在sort函数中出错但无法解决它，整个列被替换为age的最小值。我也对显示部分有疑问。

这是我的代码

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <link rel="stylesheet" href="http.css" >
    </head>
    <title>
    </title>
    <body>
        <table id="link" border="1">
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Age</td>
                    <td>Place</td>
                </tr>
            </thead>
        </table>
        <script>
            var req = new XMLHttpRequest();
            req.onreadystatechange = function() {
                if (req.readyState == 4 && req.status == 200) {
                    var obj = JSON.parse(req.responseText);
                    parsedfun(obj);
                }
            };
            req.open("GET", "xml.txt");
            req.send();

            function parsedfun(obj) {
                var out = "";
                for (var i = 0; i < obj.length; i++) {
                    out = out + '<tr><td class="namesort">' + obj[i].name + '</td><td class="agesort">' + obj[i].age + '</td><td class="placesort">' + obj[i].place + '</td></tr>';
                    $("#link").html(out);
                    $(".clk").click(function() {
                        $.getJSON("xml.txt", function(obj) {
                            $("td").each(function(index, value) {
                                obj.sort(function(a, b) {
                                    if (a.age < b.age) {
                                        return 1;
                                    } else {
                                        return -1;
                                    }
                                });
                                $(".agesort").html(obj[index].age);
                            });
                        });
                    });
                }
            }
        </script> 
        <button class="clk">sort the age</button>
        <div class="division">
        </div>
    </body>
</html>

这是＆＃34; xml.txt＆＃34;文件

[{
    "name": "x",
    "age": 21,
    "place": "Hyderabad"
}, {
    "name": "y",
    "age": 28,
    "place": "Chennai"
}, {
    "name": "z",
    "age": 20,
    "place": "Coimbatore"
}, {
    "name": "a",
    "age": 19,
    "place": "Kolkata"
}, {
    "name": "b",
    "age": 22,
    "place": "Mumbai"
}, {
    "name": "c",
    "age": 16,
    "place": "Mangalore"
}]

Answer 1

这里有几个问题。首先，您要设置消除html()行的table的{{1}}。请改用thead。

您还可以在按钮上使用单个委派事件处理程序。您当前的代码会为阵列中的每个对象附加一个新事件到该按钮，这是多余的。

最后，当您进行排序时，您不需要再制作另一个AJAX请求，因为您可以简单地获取表格中的数据并对其进行排序。试试这个：

append()

Working example

另请注意，您的function parsedfun(obj) { var out = ""; for (var i = 0; i < obj.length; i++) { out = out + '<tr><td class="namesort">' + obj[i].name + '</td><td class="agesort">' + obj[i].age + '</td><td class="placesort">' + obj[i].place + '</td></tr>'; } $("#link").append(out); } $(document).on('click', '.clk', function() { $('#link tr').sort(function(a, b) { var aAge = parseInt($(a).find('td:eq(1)').text(), 10); var bAge = parseInt($(b).find('td:eq(1)').text(), 10); return aAge < bAge ? -1 : aAge > bAge ? 1 : 0; }).appendTo('#link') });标记也应放在<script>或<head>之前，调用文件{{1}有点奇怪当它返回JSON时。

为了简单起见，您可以将jQuery用于AJAX请求，因为您已经将它用于元素事件和选择。

</body>

javascript中的sort函数不起作用

1 个答案: