原生JavaScript实现列表/表格的增删查改

最新推荐文章于 2024-06-12 17:39:23 发布

北冥木鱼

最新推荐文章于 2024-06-12 17:39:23 发布

阅读量5.4k

点赞数 3

分类专栏： JavaScript 文章标签： JavaScript css html 无序列表增删查改

本文链接：https://blog.csdn.net/beimingmuyu/article/details/51084053

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML+CSS+JavaScript实现列表/表格的增删查改

在前端的笔试或机试过程有时会让你写一个具有增删改功能的<ul>列表或<table>表格。

1、创建一个<ul>无序列表

<body>
	<ul id="l">
		<li>张三</li>
		<li>李四</li>
	</ul>
</body>

2、实现添加功能

（1）加入输入框和按钮

为了实现新增功能必须添加一个输入框<input>和新增按钮<button>

	<input type="text" name="name" value="姓名"></input>
	<button id="plus" οnclick="addlist()">添加</button>

（2）给按钮添加功能

这时候实现功能我们就需要用到JavaScript了

我们写一个函数function addlist（）：

function addlist()
	{
	var para=document.createElement("li");//这段代码创建新的<li>元素
	var node=document.createTextNode(document.getElementsByName("name")[0].value);//如需向<li>元素添加文本，必须首先创建文本节点。这段代码创建了一个文本节点
	para.appendChild(node);//向<li>元素追加了这个文本节点

	//最后必须向一个已有的元素追加这个新元素
	var element=document.getElementById("l");//这段代码找到一个已有的元素
	element.appendChild(para);//这段代码向这个已有的元素追加新元素
		
		}

函数中其中的document.getElementsByName("name")[0].value意思是输入框内的值。

整个函数的功能实现的是创建一个新的一行放入表中，内容是文本输入框中的值。

3、添加删除功能

接下来要实现第二个功能：删除其中一项

（1）添加删除按钮

为了实现删除功能，我们需要给新增的每一项后面都加上一个删除按钮。

这时候就需要修改addlist（）函数的功能了，我希望在添加的过程中就默认自动在后面添加一个删除的按钮。

添加<botton>的做法同上，唯一需要注意的是我们在添加<botton>找节点过程中需要特定<li>的标签，所以我们还需要使用JavaScript给每个新增的<li>标签添加上独有的id。

下面的setId（）函数就实现了给每个新增的<li>标签设置id的功能

function setId(){
			var dlall=document.getElementsByTagName('li');
			dlall[i].id='l'+i;
			i++;
		}

注：1、“i”变量需要提前声明；2、该函数名需被addlist（）调用；

（2）给删除按钮添加功能

未完待续