使用js根据指定的内容添加、删除、修改列表中的内容

 1    先写出添加 删除 修改 三个按键

<ul></ul>
		<input type="button" name="add" id="add" value="添加" />
		<input type="button" name="a1" id="a1" value="删除"  />
		<input type="button" name="a2" id="a2" value="更新" />

2 添加功能

	var ul=document.querySelector("ul")
//			设置函数添加
			function add(){
//				输入框
				var num=prompt("请输入要添加的内容")
//				增加新的li节点
				var li=document.createElement("li")
//				把输入框的内容num放到新增的li里
				li.innerHTML=num
//				把li放入ul里
				ul.appendChild(li)
			}

 然后设置添加按键的点击事件

<input type="button" name="add" id="add" value="添加" onclick="add()" />

3 删除功能

function del(){
//				输入框获取我们要删的一行也就是li的位置或者下标+1的位置
				var a22=parseInt(prompt("你要删除那一行"))
//				查询所有li
				var li=document.querySelectorAll("li")
//				如何删除的一行大于li的数量
				if(a22>li.length){
					alert("查无次行")
				}else{
//					如果小于移除我们要删除 li[a22-1]就是从所有的li中找到我们要删除的一行
					ul.removeChild(li[a22-1])
					
				}

 设置删除功能点击事件

<input type="button" name="a1" id="a1" value="删除" onclick="del()" />

 3 修改功能

function up(){
//				var li=document.querySelectorAll("li")
//输入框
			var num=parseInt(prompt("请输入你要更新的行数"))
//			查询所有li
			var liu=document.querySelectorAll("li")
//			判断
			if(num>liu.length){
					alert("查无次行")
				}else{
//					输入要更改的内容
					var un=prompt("请输入你要更改的内容")
//					获取我们要改内容的一行
					var li=document.querySelectorAll("li")[num-1]
//					把内容添加
					li.innerHTML=un
					
				}

给修改按键增加点击事件

<input type="button" name="a2" id="a2" value="更新" onclick="up()"/>

4效果展示

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值