jquery新手练习--------点table，form也跟着变

新手实战篇，高手跳过啦。

近段时间一直在寻找一个小巧玲珑的js框架,jquery完全符合。闲着没事，做了个 jquery的新手练习。 在网站的一些小功能上，比如修改 blog友情连接 ，修改 文章收藏。这些内容完全可以在一个表格里全部显示，一种常见古老的办法，在这个表格的最后面加 “编辑” 2个字，编辑的远程地址附带了此条记录的id的链接(修改新闻那些数据量比较大的,当然只有这样咯)。 通过jquery 可以实现一个稍微舒爽点的办法. 首先表格将内容全部显示,点击某一行 在提交表单内就出现此行数据。 那整个过程就简单多了，首先选择一行数据，然后修改再提交。 当然这个方法只可以一次提交一条数据，比起一个表格放2个div一个保存一个显示 所进行的批量是稍微逊点点，但是我们只要几句代码就可以啦。 废话那么多，那看看jquery怎么样实现它。


全部js代码，由于mouseover ，mouseout，click是针对同一类对象，所以可以直接在后面加个点号不用分开写就可以了。

 $(function(){ $(".fillform tr").mouseover(function(){ $(this).addClass("over");}).mouseout(function(){ $(this).removeClass("over");}).click(function(){ $(this).find("td").each(function(i){ $("form>input").eq(i).val($(this).text()); } );}) $(".fillform tr:even").addClass("alt"); }); 

这几句就是跟jquery给的例子了，当鼠标移过带有fillform样式的table中的tr标签时增加一个样式，移开时候再增加一个样式。

 $(".fillform tr").mouseover(function(){ $(this).addClass("over");}).mouseout(function(){ $(this).removeClass("over");}).

这几句就是关键啦

click(function(){ $(this).find("td").each(function(i){ $("form>input").eq(i).val($(this).text()); } );}) 

$(".fillform tr") 产生一个点击事件

$(this).find("td").each(function(i){  就寻找属于产生这个事件的tr(你怎么知道是tr？这说啦,$("fillform tr"))  并以"td"元素作为条件查找,并再调用each方法遍历经过塞选出来的元素。each可以带一个参数，此参数就是当前元素的顺序号。


form>input 就是选择 form下面的input标签，调用eq方法比较，即对应的第一个input对应表格第一列

$("form>input").eq(i).val($(this).text());

最后这句也是很多例子的啦，表格双行换一个样式

$(".fillform tr:even").addClass("alt"); 

挺简单吧，就是这样一个效果，只要几句代码，我想想我以前的做法还真不是滋味。

当然这个例子本身就不是很完善，只是写来熟悉一下jquery的而已，如果要换成js去写的话parentNode.parentNode.cells[1] 这些肯定看得眼花缭乱了。

例子我传上来了。。。很新手的练习，高手别笑哦。

ps:最主要是看见ext有个例子是grid跟form联动的，所以也就想拿传统的table跟form也来联动一把。

评论

3 楼 afcn0 2008-01-06  

可选择很多,红的也很多,jQ已经稳定了,但是Prototype正在不断创新中

2 楼 夜枫舞影 2008-01-06  

afcn0 写道

很多人就是喜欢.click .mouseout .mouseover这样.下去,再来个.each,看起来很不爽,所以我认为jQ不能说是很好OO,更习惯一般方式,这么多.看着很郁闷

毕竟他是js框架，
现在又没有更好吃的“苹果”，我也只能找最红的吃咯。
不管怎么样比没得吃好吧。

1 楼 afcn0 2008-01-06  

很多人就是喜欢.click .mouseout .mouseover这样.下去,再来个.each,看起来很不爽,所以我认为jQ不能说是很好OO,更习惯一般方式,这么多.看着很郁闷