js实现添加、删除ul行

最新推荐文章于 2024-05-30 08:45:00 发布

原创最新推荐文章于 2024-05-30 08:45:00 发布 · 4.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript

前端开发专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何利用JavaScript动态地向HTML表格中添加和删除行。首先展示HTML结构，接着是CSS样式，最后重点讲解JavaScript实现的添加与删除功能。

效果图
HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务一</title>
    <link rel="stylesheet" href="main.css">

</head>
<body>
<p id="top">支付宝信息</p>
<input id="inputInfo" type="text" />
<button id="btn">+</button>
<p id="bottom">已添加的支付宝</p>
<div id="detail"></div>

<script type="text/javascript" src="basic.js"></script> 
</body>
</html>

CSS代码

body, p, ul, li{
    margin: 0;
    padding: 0;
}

#top{
    font-size: 14px;
    color: #999;
    margin: 10px;

}

#bottom{
    font-size: 14px;
    color: #000;
    margin-left: 10px;
}

#inputInfo{
    width: 260px;
    height: 38px;
    font-size: 16px;
    margin-left: 10px;
    border: 1px solid #ccc;
    border-radius: 6px; 

}

#btn{
    width: 50px;
    height: 36px;
    border: 1px solid #888;
    border-radius: 6px;
    background: none;
}

#btn:focus{
    outline: none;
}

#detail{
    width: 360px;
    margin-left: 10px;
}
#detail li{
    width:118px;
    height: 24px;
    border: 1px solid #ccc;
    float: left;
    list-style: none;
}
#detail .del{
    text-align: right;
}
#detail .deleteBtn{
    border: none;
    background: none;
}
#detail .deleteBtn:focus{
    outline: none;
}

Js代码

var inputInfo = document.getElementById('inputInfo');
var btn = document.getElementById('btn');
var detail = document.getElementById('detail');
var deleteBtns = detail.getElementsByClassName('deleteBtn');

//声明添加信息函数
function addLitoUl(obj){
    detail.innerHTML += '<ul>' + '<li>' + obj.value + '</li>' + '<li>' + '【设为默认】' + '<li class = \'del\'>' + '<button class= \"deleteBtn\">×</button>' + '</li>' + '</ul>';
    obj.value = '';
}

//声明删除信息函数
function deleteUL(obj){
     obj.parentNode.parentNode.remove();

}

//给button绑定添加信息点击事件
btn.onclick = function(){
    addLitoUl(inputInfo);

    //给每个 × span绑定删除点击事件
    for(var i=0; i<deleteBtns.length; i++){
        console.log(22);
        deleteBtns[i].onclick = function(){
            console.log(this);
            deleteUL(this);
        };
    }
};