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

最新推荐文章于 2023-09-26 01:24:08 发布

原创最新推荐文章于 2023-09-26 01:24:08 发布 · 4.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jquery 同时被 2 个专栏收录

10 篇文章

订阅专栏

问题总结

7 篇文章

订阅专栏

这篇博客介绍了如何使用Jquery对动态添加的表格元素进行点击样式更改和内容编辑。重点提到了live方法、后代元素选择器、属性选择器的使用，以及.html()、.val()和.text()的区别。特别指出，对于select标签的动态添加，不能直接更改innerHTML，应使用DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　今天写了一点jquery的代码，姑且先存放的博客上吧。

　　默认样式是这样的，需要的是click其中的td时实现对其内容的修改，而blur后显示的是修改后的内容：
　　　　　　这里写图片描述

　　单击url 的td元素之后是这样的：
　　　　　　　　这里写图片描述

　　单击method的td元素之后是这样的：
　　　　　　　　这里写图片描述
　　需求很简单，是对动态添加的表格进行样式处理，这里是对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);       
});

//method修改
$("#tablelist > tr > td[class = 'api_method']").live("click", function () {
    if(flag1 == 0)
    //flag=0说明是第一次单击
    {
        url = $(this).text();
        flag1 =1;
        var selector = $("<select></select>");  
        selector.className = "ui dropdown";
        selector.id = "method";
        selector.name = "method";
        selector.append('<option value="post">post</option>');     
        selector.append('<option value="get">get</option>');  
        selector.append('<option value="put">put</option>');  
        selector.append('<option value="delete">delete</option>');  
        $(this).html(selector);
        $(this).find("select").val(url);
       $(this).find("select").focus();
    }
});
$("#tablelist > tr > td[class = 'api_method']").live("blur", function () {
    flag1 = 0;
    var newurl = $(this).find("select").val();
    $(this).html(newurl);       
});