0

我有一些表格数据，产品列表。

id | name | description | options
1  | foo  | bar         | [delete]

现在通常我只是在删除按钮上设置一个类，如 .delete-item 并执行

$('.delete-item').click(function(e) {
     e.preventDefault();
     // do something/ajax etc
});

但是有了这个，我将添加一些其他功能，例如描述的内联编辑。现在我可以绑定另一个函数，比如我的删除函数，但我想知道是否有更多的 jquery 方式来执行此操作，因为我以后可能会通过自动计算总计来添加产品价格和数量，它可能会变得很麻烦。

也许是一个插件，或者某种对象？

$('table').productEditor();

那有意义吗？有什么我去阅读更多关于这类事情的东西吗？

4

2 回答 2

1

你可以编写一个小 jQuery 插件来做到这一点：

//tableEditor.js
;(function($){
    $.fn.tableEditor = function(settings) {
        var defaults = {stuff: 1, etc: true};
        settings = $.extend(defaults, settings || {});

        //using "on" so we wouldn't have to use multiple handlers for each link
        this.on('click', '.delete-item', function() { 
            e.preventDefault();
            var this_row = $(this).closest('tr');
            // do stuff
        });

        this.on('click', '.edit-item', function() { 
            e.preventDefault();
            var this_row = $(this).closest('tr');
            // do stuff
        });

        return this;
    };
})(jQuery);

然后像这样称呼它：

//main.js
$(function() { 
    $('#table').tableEditor({etc: false}); 
});
于 2013-09-05T01:53:32.560 回答
0

你可以这样做：

编辑：对于动态添加的行，.on()以委托形式使用：

$("#myTable").on("click", "td", function (event) {
    var thisID = $(this).siblings("td").eq(0).text(); // get ID of clicked row
    switch (event.target.className) {
        case "delete":
            //delete              
            alert("delete this ID = " + thisID);
            break;
        case "edit":
            // edit
            alert("edit this ID = " + thisID);
            break;
        default:
            return false;
    }
}); // on click

您仍然需要为每个可点击添加一个类td

请参阅包含添加行的方法的新JSFIDDLE 。

注意：.on()需要 jQuery v1.7+

于 2013-09-05T01:18:29.777 回答