【html】动态增加横向带删除的列表

àì夳堔傛蜴生んèń 2022-05-21 09:14 194阅读 0赞

## 需要实现的效果 ##

![这里写图片描述][70]

## 代码 ##

html

<ul id="projUl">
                    <label style="float: left; " class="l-btn-text"> 项目名称列表</label>
                </ul>

js代码

function addLi(projName,projId){ 
            var li_1=document.createElement("li");
            addSpan(li_1,projName,projId);
            addHiddenSpan(li_1,projId);
            addDelBtn(li_1,projId);
            document.getElementById("projUl").appendChild(li_1);
        }
        //为姓名或邮箱等添加span标签，好设置样式
        function addSpan(li,text,id){ 
            var span_1=document.createElement("input");
            span_1.setAttribute("id",id);
            span_1.setAttribute("name","projectNames");
            span_1.setAttribute("class","form-control");
            span_1.setAttribute("style","width: 180px;height:24px");
            span_1.setAttribute("type","text");
            span_1.setAttribute("value",text);
            li.appendChild(span_1);
        }
        function addHiddenSpan(li,text){ 
            var span_1=document.createElement("input");
            span_1.setAttribute("name","projectIds");
            span_1.setAttribute("class","form-control");
            span_1.setAttribute("type","hidden");
            span_1.setAttribute("style","width: 180px;height:24px");
            span_1.setAttribute("value",text);
            li.appendChild(span_1);
        }
        //添加删除按钮及设置删除按钮的样式及添加点击事件
        function addDelBtn(li,id){ 
            var btn=document.createElement("a");
            btn.setAttribute("name",id);
            btn.setAttribute("onclick","delBtnData(this)");
            btn.setAttribute("href","javascript:void(0);");
            btn.setAttribute("class","easyui-linkbutton ebsButton detailButtonc l-btn l-btn-small l-btn-plain");
            btn.setAttribute("data-options","iconCls:'fa fa-1x fa-fw fa-trash',plain:true");
            var span_1=document.createElement("span");
            span_1.setAttribute("class","l-btn-left l-btn-icon-left");
            var span_2=document.createElement("span");
            span_2.setAttribute("class","l-btn-text l-btn-empty");
            span_2.innerHTML=' '
            var span_3=document.createElement("span");
            span_3.setAttribute("class","l-btn-icon fa fa-1x fa-fw fa-trash");
            span_1.appendChild(span_2);
            span_1.appendChild(span_3);
    
            btn.appendChild(span_1);
            li.appendChild(btn);
        }
        //为删除按钮添加删除节点功能
        function delBtnData(obj){ 
            var ul=document.getElementById("projUl");
            var oLi=obj.parentNode;
            //obj.parentNode指删除按钮的span层
            //obj.parentNode.parentNode为li层
            ul.removeChild(oLi);
        }

## 调用例子 ##

addLi("哈哈哈哈",1234);

[70]: /images/20220521/d64a79959cbc414293049d6645621bf6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，194人围观）

还没有评论，来说两句吧...

相关阅读

相关 FastDFS增加path横向扩容

FastDFS增加path横向扩容 > 关注点: > > 1.规划好新的挂载点. \\目前环境的规则为/mnt/fdfs01 > > 2.集群内的每个节点的path数

痛定思痛。/ 2024年03月27日 10:11/ 0 赞/ 12 阅读

相关 css横向滚动列表

![在这里插入图片描述][20200413164239281.gif_pic_center] <ul class="video_list"> <li>

朱雀/ 2023年07月25日 08:45/ 0 赞/ 141 阅读

相关 html5 table删除修改,HTML Table 动态增加删除行 code 实例

Dynamic Table function addRow(tbodyID) \{ var bodyObj=document.getElementById(tbodyID

拼搏现实的明天。/ 2022年10月06日 07:52/ 0 赞/ 181 阅读

相关 js动态增加行删除行

//动态增加行 function addRow(tab){ var title = ""; var table = document.get

叁歲伎倆/ 2022年08月07日 05:53/ 0 赞/ 164 阅读

相关 redis集群动态增加或者删除节点

Redis集群添加节点 1：首先把需要添加的节点启动 <table> <tbody> <tr> <td> <p>cd /usr/loca

谁借莪１个温暖的怀抱￠/ 2022年07月15日 00:19/ 0 赞/ 245 阅读

相关 Android 横向列表GridView 实现横向滚动

[Android 横向列表GridView 实现横向滚动][Android _GridView] Android 横向列表实现，可左右滑动，如下图 ![05171621

浅浅的花香味﹌/ 2022年06月18日 02:15/ 0 赞/ 402 阅读

相关纯前端代码动态增加下拉列表

代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnco

爱被打了一巴掌/ 2022年06月04日 03:39/ 0 赞/ 156 阅读

相关【html】动态增加横向带删除的列表

需要实现的效果 ![这里写图片描述][70] 代码 html <ul id="projUl"> <label s

àì夳堔傛蜴生んèń/ 2022年05月21日 09:14/ 0 赞/ 195 阅读

相关 javascript——动态增加删除行

<%@ page language="java" import="java.util.\" pageEncoding="UTF-8"%> <% String path

快来打我*/ 2022年05月09日 13:38/ 0 赞/ 240 阅读

相关 ASP.NET动态增加HTML元素

asp.net中动态增加html元素，在使用asp.net进行web开发的时候页面中的<head></head>中的信息可以通过asp.net的cs文件动态指定。 1、动态增

不念不忘少年蓝@/ 2021年09月16日 07:18/ 0 赞/ 379 阅读