js-案例

最新推荐文章于 2023-11-06 16:27:36 发布

烟雨平生ing

最新推荐文章于 2023-11-06 16:27:36 发布

阅读量50

点赞数

分类专栏：前端基础学习笔记 JavaWeb学习笔记

本文链接：https://blog.csdn.net/qq_44058265/article/details/119417989

版权

JavaWeb学习笔记同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

前端基础学习笔记

11 篇文章 0 订阅

订阅专栏

案例：动态添加和删除表格及数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td>
    </tr>


</table>


<script>
    /*
     * 当点击添加按钮的时候
     * 		1/获得文本输入框的值
     * 		2/创建1个tr
     * 		3/创建3个td
     * 		4/创建3个文本（用文本输入框的值）
     * 		5/把文本挂到td中去
     * 		6/把td挂到tr上去
     * 		7/把tr挂到table
     * 删除功能：
     * 		用的是超链接做的按钮
     * 		
     * */
	document.getElementById("btn_add").onclick=function(){
		//接收从文本输入框输入进来的值
		var id = document.getElementById("id").value;
		var name = document.getElementById("name").value;
		var gender = document.getElementById("gender").value;
		
		//创建文本对象
		var id_text = document.createTextNode(id);
		var name_text = document.createTextNode(name);
		var gender_text = document.createTextNode(gender);
		
		//创建td对象
		var id_td = document.createElement("td");
		var name_td = document.createElement("td");
		var gender_td = document.createElement("td");
		
		//创建tr
		var tr = document.createElement("tr");
		
		//把table获取到
		var tabel = document.getElementsByTagName("table")[0];
		
		//让上面的对象产生关系
		//1/把文本挂到td
		id_td.appendChild(id_text);
		name_td.appendChild(name_text);
		gender_td.appendChild(gender_text);
		
		//2/把td挂到tr里面去
		tr.appendChild(id_td);
		tr.appendChild(name_td);
		tr.appendChild(gender_td);
		
		
		
		
		//删除的表格
		//1/创建文本对象 删除
		//2/创建a标签
		//3/创建td
		//4/把文本挂到a标签里
		//5/把a挂到td里
		//6/把td挂到tr
		var a_text = document.createTextNode("删除");
		var a = document.createElement("a");
		//让a标签有超链接的样式
		a.setAttribute("href","#");//# 会自己跳转到当前页面
		a.setAttribute("onclick","delTr(this);");

		var a_td = document.createElement("td");
		a.appendChild(a_text);
		a_td.appendChild(a);
		tr.appendChild(a_td);
		
		
		//3/把tr挂到table中去
		tabel.appendChild(tr);
	}
	
	function delTr(obj){
		var tr = obj.parentNode.parentNode;
		var table = obj.parentNode.parentNode.parentNode;
		table.removeChild(tr);
	}
</script>

</body>
</html>

烟雨平生ing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-案例

案例：动态添加和删除表格及数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态表格</title> <style> table{ border: 1px solid; margin: auto; width: 500
复制链接

扫一扫