如何用jquery动态添加楼层

最新推荐文章于 2023-12-18 00:37:39 发布

一颗棒棒糖

最新推荐文章于 2023-12-18 00:37:39 发布

阅读量993

点赞数

分类专栏： asp.net 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_44730759/article/details/122012361

版权

asp.net 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

如何用jquery动态添加楼层：

提示：这是我之前面试遇到的问题：
例如：点击按钮后，可以添加楼层，并且每点一次，就添加一层，层数递增

分析：主要用到jquey的技术，这里记录一下
js代码如下：

<script type="text/javascript">
        function AddFloor(s) {
            var fujis = $(s).parent(); var li = fujis.find("ul>li");

            var ulys = fujis.find("ul");
            var num = (parseInt(li.length) + 1);
            //  alert(num);
            var str = "";
            if (li.length == 0) {
                str = "<li id=\"li" + num + "\" ><span style=\"font-size:30px\">第<span style=\"color:red\">" + num + "</span>层:</span><input type=\"text\" id=\"zhi\" />平方米</li>";
                //元素的里面后面
                ulys.append(str);
            }
            else {
                // alert(li.html());
                var indexli = $("#li" + (num - 1));
                str += "<li id=\"li" + num + "\"><span style=\"font-size:30px\">第<span style=\"color:red\">" + num + "</span>层:</span><input type=\"text\" id=\"zhi\" />平方米</li>";
                //元素的后面插入
                indexli.after(str);
            }
        }
    </script>
    <body>
    <form runat="server">
     <div>
            <input type="button" value="添加楼层" id="btn" onclick="AddFloor(this)" />
            <ul>
            </ul>
        </div>
     </form>
   </body>