0

我正在将 localstorage 用于项目,并尝试使用 tablesorter2 jquery 插件对表进行排序。我不断收到以下错误:

未捕获的类型错误:无法读取未定义的属性“行”

我有一个在提交按钮单击时运行的函数,它从我友好的 javascript 控制台认为不存在的本地存储中添加这些行。

有没有办法调用从本地存储而不是原始标记中添加的行?

这是添加表格行的代码:

$(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

为了运行排序功能,我运行了:

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

当我手动将表行添加到我的标记中时,该函数起作用,但是当它们是使用上面的函数从本地存储中添加时。

请让我知道这是否有意义。我是新开发人员,所以请原谅含糊不清。

4

1 回答 1

0

我看到的最明显的问题是代码为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 - 请参阅此演示

$("table").trigger("update");
于 2012-08-10T23:49:28.443 回答