Question

我使用localstorage作为项目，并尝试使用tablesorter2 jquery插件对表进行排序。我一直收到以下错误：

未捕获的TypeError：无法读取属性＆＃39;行＆＃39;未定义的

我有一个在提交按钮单击上运行的函数，它添加了我的友好的javascript控制台认为不存在的localstorage中的这些行。

有没有办法调用从localstorage添加的行而不是原始标记中添加的行？

这是添加表格行的代码：

$(document).ready(function(){

    $.extend($.fn, {
        storeitem: function() {

            //add a new id for each array
            $newTeam = $('#team');

            //set up unique ids for each array
            var i = Number(localStorage.getItem('team-counter')) + 1;

            // create condition to add or loop through new entry
            if ($newTeam.val() !== "") {
                // Take the value of the input field and save it to localStorage
                localStorage.setItem("team-" + i, $newTeam.val());

                // Set the to-do max counter so on page refresh it keeps going up instead of reset
                localStorage.setItem('team-counter', i);
            }

            //use serializeArray to simplify array creation
            //  var teaminfo = $("#newTeamForm").serializeArray();

            var teaminfo = {};
            var givemethat = $.each($('#newTeamForm').serializeArray(), function() {
                teaminfo[this.name] = this.value;
            });
            //alert(teaminfo.teamname);
            //$('div.second').replaceWith('<h2>New heading</h2>');
            $("#standings tr:last-child").after('<tbody><tr><td>' + teaminfo.teamname + '</td> <td></td><td></td> <td></td></tr></tbody>' );
            $("#standings").tablesorter();
            //$("#standings > tbody:last").after("<tr>" +  + "</tr>");
            //store data in key value pair and stringify
            localStorage.setItem("team-" + i, JSON.stringify(teaminfo));

            //  var neat = localStorage.setItem('teamname')

            var teamName = JSON.parse(localStorage.getItem("team-" + i));

        }//storeitem

    });//extend

});//doc ready

为了运行sort函数，我跑了：

$('#standings').tablesorter();

当我将表行手动添加到我的标记时，该函数有效，但是当使用上述函数从localstorage添加它们时。

如果这有意义，请告诉我。我是一名新开发人员，请原谅我的模糊性。

Answer 1

我看到的最明显的问题是代码为它添加的每一行添加了新的tbody：

$("#standings tr:last-child").after('<tbody><tr><td>' + teaminfo.teamname + '</td> <td></td><td></td> <td></td></tr></tbody>' );

这应该是这样的：

$("#standings tr:last-child").after('<tr><td>' + teaminfo.teamname + '</td> <td></td><td></td> <td></td></tr>' );

虽然，我看不到你是如何循环并将新数据添加到空表格单元格中。

缺少的部分是，一旦添加了所有行，您就需要更新tablesorter - 请参阅this demo。

$("table").trigger("update");

对从Localstorage添加的表行进行排序

1 个答案: