zoukankan      html  css  js  c++  java
  • JQ 动态添加节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            .listyle
            {
                background-color: Red;
            }
        </style>
        <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                var link = $("<a href='http://www.baidu.com'>百度</a>");
                $("div:first").append(link);
            })
    
            $(function () {
                var data = { "百度": "http://www.baidu.com", "新浪": "http://www.sina.com" };
                $.each(data, function (key, value) {
                    var tr = $("<tr><td>" + key + "</td><td><a href=" + value + ">" + key + "</a></td></tr>");
                    $("#tablesites").append(tr);
                });
    
            })
            $(function () {
                $("#RemoveUL").click(function () {
                    // $("ul li.listyle").remove();
                    $("ul li[class=listyle]").remove(); //返回被删除的项
                });
            });
            $(function () {
                $("#btntoright").click(function () {
                    var opt = $("#sl1 option:selected").remove();
                    $("#sl2").append(opt);
                });
            });
        </script>
    </head>
    <body>
        <div>
        </div>
        <table id="tablesites">
        </table>
        <ul>
            <li>sdfsdfsdf</li>
            <li class="listyle">sdfsdfsdf</li>
            <li>sdfsdfsdf</li>
            <li class="listyle ">sdfsdfsdf</li>
            <li>sdfsdfsdf</li>
            <li class="listyle">sdfsdfsdf</li>
        </ul>
        <br />
        <input type="button" id="RemoveUL" value="删除" /><br />
        <select id="sl1" multiple="multiple" size="6">
            <option>山东</option>
            <option>山东</option>
            <option>山东</option>
            <option>山东</option>
            <option>山东</option>
            <option>山东</option>
        </select>
        <input type="button" value="》》" id="btntoright" />
        <select id="sl2" multiple="multiple" size="6">
        </select>
    </body>
    </html>
  • 相关阅读:
    springboot整合log4j2
    document解析html
    关于字符串读写乱码的解决方法浅谈
    BOM知识整理
    es6的Map()构造函数
    es6的Set()构造函数
    关于node的path模块
    java总结(方法与对象)
    webpack3.0+总结
    java总结(二)(运算符)
  • 原文地址:https://www.cnblogs.com/sumg/p/3742733.html
Copyright © 2011-2022 走看看