跟踪html表格/表格中的变化

时间:2013-03-30 13:29:12

标签: javascript jquery html

我想要实现的是跟踪<table> - 元素内的任何变化(例如用户输入,字段添加,......)。 在我的特定场景中,用户可以编辑字段,添加行,添加字段,删除字段和行,在<select> - 元素等中选择一些内容。

当然我可以将我的“改变”-listener附加到所有这些动作上,但我认为必须有更好的方法。

我尝试将$('#myTable tbody').change() - 听众附加到其中,但这并不会触发...

也许有些人知道如何跟踪表格更改而无需手动订阅每个可能的用户操作?

3 个答案:

答案 0 :(得分:0)

编辑:据我所知,jQuery 1.4+实际上应该支持所描述的行为。我将留下余下的帖子作为参考。

您可以将事件添加到每个可更改元素,因为这是触发它们的位置。但是,您不必手动执行此操作:

$('#myTable input, #myTable select, ...).change(...)

如果正如您所说,稍后添加了元素,您可能需要查看允许您将事件侦听器绑定到稍后要创建的元素的.live方法。

答案 1 :(得分:0)

您可以使用Jquery liveQuery Plugin

以下是鼠标悬停和鼠标移出的示例。你也可以为所有活动做这件事

 $('table') 
    .livequery(function(){ 
    // use the helper function hover to bind a mouseover and mouseout event 
        $(this) 
            .hover(function() { 
                $(this).addClass('hover'); 
            }, function() { 
                $(this).removeClass('hover'); 
            }); 
    }, function() { 
        // unbind the mouseover and mouseout events 
        $(this) 
            .unbind('mouseover') 
            .unbind('mouseout'); 
    }); 

答案 2 :(得分:0)

回答我自己的问题:

我决定这样做有点像@mdsl建议:

我现在听这样的变化:

$('#myTable tbody').on('focusout', 'input, select, checkbox', myListener);