zoukankan      html  css  js  c++  java
  • 用JQUERY增删元素

    用JQUERY增删元素
    JQuery有增加和删除元素的方法。
    主要分为内部插入,外部插入,包裹,替换,删除。
    内部插入主要方法:
    append(content) 向每个匹配的元素内部追加内容。
    prepend(content) 向每个匹配的元素内部前置内容。
    外部插入:
    after(content) 在每个匹配的元素之后插入内容。
    before(content) 在每个匹配的元素之前插入内容。
    删除:
    empty() 删除匹配的元素集合中所有的子节点。
    remove([expr]) 从DOM中删除所有匹配的元素。

    下面的例子是点击增加按钮表格就会在最后一行插入新的一行
    再点击删除按钮删除最后一行


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <title>表格元素增删</title>
            <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
            <style type="text/css">
                body{ font-size:12px;}
            </style>

            <script type="text/javascript">
        
    /* 添加预测 */
    function add_tr() {
        $("#table1").append("<tr>" + $("#table1 tr").eq(0).html() + "</tr>");
    }
    /* 删除预测 */
    function remove_tr() {
        //alert($("#table1 tr").last().html());
        if ($("#table1 tr").size() > 1) {
            $("#table1 tr:last-child").remove();
        }
        else
            alert("这是最后一行,无法再删除");
    }
          </script>
        </head>
        <body align='center'>
    <center>
                    <table id='table1'>
                     <tr>
                     <td width='150'>第一格</td>
                     <td width='250'><input type='text'/></td>
                     </tr>
                   </table>
        <br/>
        <input type='button' value='增加一行' onclick='add_tr()'  />
        <input type='button' value='删除最后一行' onclick='remove_tr()'  />
          </center>  
        </body>
    </html>



  • 相关阅读:
    IDEA 工具使用报错总结
    Struts2 值栈总结(ValueStack)
    hibernate 中映射关系配置
    Java 注解之总结
    ssh_整合总结
    Ajax 请求之_请求类型详解
    C++的重载赋值运算符
    vector容器使用reserve预留空间
    C++中的内存分配
    C++ const修饰指针
  • 原文地址:https://www.cnblogs.com/haiconc/p/2351759.html
Copyright © 2011-2022 走看看