Zerlinda's Blog

利用Jquery对动态元素进行操作

今天写了一点jquery的代码,姑且先存放的博客上吧。
默认样式是这样的,需要的是click其中的td时实现对其内容的修改,而blur后显示的是修改后的内容:
利用Jquery对动态元素进行操作
单击url 的td元素之后是这样的:
利用Jquery对动态元素进行操作
单击method的td元素之后是这样的:
利用Jquery对动态元素进行操作
需求很简单,是对动态添加的表格进行样式处理,这里是对URL和method的区域进行样式的更改,因为元素本身是动态添加上,所以很多地方需要注意。

对于未来元素的监听,这里是用到了live, 另外用delegate和on也是可以,这里不赘述。
“>”这个选择器可是发挥了大用处,这里选的是父元素的所有后代元素,因为要为所有的子元素添加监听。所以说对于关系比较复杂的布局,用一些比较明确的选择器还是必要的。另外对于属性选择器记得属性的值要加‘’而不是“”,单双引号可谓失之毫厘,差之千里。
jquery对于添加DOM元素跟js异曲同工。
.html()跟js的innerHTML是一样的作用,可以直接个更改dom结构。.val()获取的是input与select的value值。text()获取的则是内部的文本不包含标签的值。这三个方法都可以对相应的内容进行更改。
整个部分最令人纠结的莫过于select标签的添加,提醒一句,select添加是不能直接更改元素的innerHTML来实现,即使这样更改,option根本不能算是option的子元素,浏览器提示报错。就乖乖的用DOM来操作吧。
看代码吧:

var flag = 0, flag1 = 0;
$("#tablelist > tr > td[class = 'api_url']").live("click", function () {
    if(flag == 0)
    //flag=0说明是第一次单击
    {
    flag =1;
    url = $(this).text();
    var str = "<div class='ui form'><div class='field'><textarea rows='2' class='api_url' ></textarea></div></div>"
    $(this).html(str);
    $(this).find("textarea").val(url);
    $(this).find("textarea").focus();
    }
});
$("#tablelist > tr > td[class = 'api_url']").live("blur", function () {
    flag = 0;
    var newurl = $(this).find("textarea").val();
    $(this).html(newurl);       
});

发表评论

电子邮件地址不会被公开。 必填项已用*标注