• 用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>



  • 相关阅读:
    忘记oracle的sys用户密码怎么修改
    C语言 给字符数组赋值的方法
    linux编译中的常见问题
    Ubuntu下查看linux版本,内核版本,系统位数,gcc版本
    Win7中打开chm文件内容无法显示问题
    exit()与_exit()函数的区别(Linux系统中)
    【BZOJ3456】城市规划(生成函数,多项式运算)
    【BZOJ3028】食物(生成函数)
    【CF438E】The Child and Binary Tree(多项式运算,生成函数)
    【BZOJ3771】Triple(生成函数,多项式运算)
  • 原文地址:https://www.cnblogs.com/haiconc/p/2351759.html
Copyright © 2020-2023  润新知