Question

很抱歉，但我完全不熟悉js和jquery。

我得到了动态表，其值在localstorage中。我可以添加新行，删除行和编辑单元格。这很有效。

我想通过点击的列来添加对此表的排序。我在这里找到了代码并试了一下。它只是在我写表时工作而不是使用我的javascript从localstorage添加行。两种情况下的表在html代码中看起来相同。我没有理由为什么排序不能使用动态表。

这是来自localstore的动态表，排序为： http://jsfiddle.net/eW8Kg/1/

这是来自localstorage的表（不是在jsfiddle中工作？）在我的comupter上这很好用，但是表没有排序！（我留下了这个静态值）： http://jsfiddle.net/XAu5G/

我认为我的问题可能在于创建表格内容：

var Html = "<tbody>";
for (var i = 1; i < localStorage.length; i++) {
    var input = "<td><input style='border:hidden' class=\"fields\" name = " + localStorage.key(i) + " type='text' onchange='change(\"" + localStorage.key(i) + "\")' /></td>"
    Html += "<tr class=\"field\">";
    for (var j = 0; j < 4; ++j) {                    
        Html += input;
    }
    var button = "<td><input type='button' value = 'Usuń' onclick='Remove(\"" + localStorage.key(i) + "\")'></td>";

    Html += button + "</tr>";
}
Html += "<tr id=\"actions\"></tr></tbody>"

document.getElementById("list").innerHTML += Html;

这个jquery代码做了排序：

$(document).ready(function() {

var table = $('#list');

jQuery.fn.sortElements = (function() {
var sort = [].sort;

return function(comparator, getSortable) {
    getSortable = getSortable || function() {return this;};

    var placements = this.map(function() {

        var sortElement = getSortable.call(this),
            parentNode = sortElement.parentNode,

            // Since the element itself will change position, we have
            // to have some way of storing it's original position in
            // the DOM. The easiest way is to have a 'flag' node:
            nextSibling = parentNode.insertBefore(
                document.createTextNode(''),
                sortElement.nextSibling
            );

        return function() {
            if (parentNode === this) {
                throw new Error(
                    "You can't sort elements if any one is a descendant of another."
                );
            }

            // Insert before flag:
            parentNode.insertBefore(this, nextSibling);
            // Remove flag:
            parentNode.removeChild(nextSibling);
        };

    });

    return sort.call(this, comparator).each(function(i) {
        placements[i].call(getSortable.call(this));
    });
};
})();

$('#x').click(function(){

    $('#list').hide();


});

$('#nazwa-header').wrapInner('<span title="sort this column"/>').each(function() {

    var th = $(this),
        thIndex = th.index(),
        inverse = false;

    th.on('click', function() {
        table.find('td').filter(function() {
            return $(this).index() === thIndex;
        }).sortElements(function(a, b) {
            console.log($(a).find('input').val(),$(b).find('input').val());
            return $(a).find('input').val() > $(b).find('input').val() ?
                inverse ? -1 : 1
                : inverse ? 1 : -1;
        }, function() {
            // parentNode is the element we want to move
            return this.parentNode; 
        });
        inverse = !inverse;
    });
});
});

在jquery中对动态表进行排序

0 个答案: