动态表格案例 JavaScript

分析：

1.添加：

1.给添加按钮绑定单击事件

2.获取文本框内容

3.创建td，设置td的文本为文本框内容

4.创建tr

5.将td添加到tr中

6.获取table，将tr添加到table中

2.删除：

1.确定点击的是哪一个超连接

2.怎么删除？

removeChild（）：通过父节点删除子节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {text-align: center;margin: 50px;}table {border: 1px solid;margin: auto;width: 500px;}td,th {text-align: center;border: 1px solid;}</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.获取按钮document.getElementById("btn_add").onclick = function (){//2.获取文本内容var id = document.getElementById("id").value;var name = document.getElementById("name").value;var gender = document.getElementById("gender").value;//3.创建td,赋值td的标签体//id的tdvar td_id = document.createElement("td");var text_id = document.createTextNode(id);td_id.appendChild(text_id);//name的tdvar td_name = document.createElement("td");var text_name = document.createTextNode(name);td_name.appendChild(text_name);//gender的tdvar td_gender = document.createElement("td");var text_gender = document.createTextNode(gender);td_gender.appendChild(text_gender);//a标签的tdvar td_a = document.createElement("td");var ele_a = document.createElement("a");ele_a.setAttribute("href","javascript:void(0);")ele_a.setAttribute("onclick","delTr(this);")var text_a = document.createTextNode("删除");ele_a.appendChild(text_a);td_a.appendChild(ele_a);//4.创建trvar tr = document.createElement("tr");//5.添加td到tr中tr.appendChild(td_id);tr.appendChild(td_name);tr.appendChild(td_gender);tr.appendChild(td_a);//6.获取tablevar table = document.getElementsByTagName("table")[0];table.appendChild(tr);}//删除方法function delTr(obj){var table = obj.parentNode.parentNode.parentNode;var tr = obj.parentNode.parentNode;table.removeChild(tr);}
</script>
</body>
</html>

用简单的事件监听事件来实行:

将表格添加全选，不选，反选，变换颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div {text-align: center;margin: 50px;}table {border: 1px solid;margin: auto;width: 500px;}td,th {text-align: center;border: 1px solid;}.over {background-color: red;}.out {background-color: wheat;}</style><script>//1.在页面加载完成后绑定事件window.onload = function () {//2.给全选按钮绑定单击事件document.getElementById("selectAll").onclick = function () {//全选功能//2.1获取所有的checkboxvar cbs = document.getElementsByName("cb");//2.2遍历for (var i = 0; i < cbs.length; i++) {//2.3设置每一个cb的状态为选中cbs[i].checked = true;}}//3.给全不选按钮绑定单击事件document.getElementById("unSelectAll").onclick = function () {//全不选功能//3.1获取所有的checkboxvar cbs = document.getElementsByName("cb");//3.2遍历for (var i = 0; i < cbs.length; i++) {//2.3设置每一个cb的状态为选中cbs[i].checked = false;}}//4.给反选按钮绑定单击事件document.getElementById("selectRev").onclick = function () {//反选功能//4.1获取所有的checkboxvar cbs = document.getElementsByName("cb");//4.2遍历for (var i = 0; i < cbs.length; i++) {//4.3设置每一个cb的状态为相反cbs[i].checked = !cbs[i].checked;}}//5.给第一个按钮绑定单击事件document.getElementById("firstCb").onclick = function () {//功能//5.1获取所有的checkboxvar cbs = document.getElementsByName("cb");//在获取第一个cb//5.2遍历for (var i = 0; i < cbs.length; i++) {//4.3设置每一个cb的状态和第一个cb状态相同cbs[i].checked = this.checked;}}//6.将鼠标移上和移下元素绑定trvar trs = document.getElementsByTagName("tr");//遍历for (var i = 0; i < trs.length; i++) {//移到元素之上trs[i].onmouseover = function () {this.className = "over";}//移下元素trs[i].onmouseout = function () {this.className = "out";}}}</script>
</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><td><input type="checkbox" name="cb" id="firstCb"></td><th>编号</th><th>姓名</th><th>性别</th><th>操作</th></tr><tr><td><input type="checkbox" name="cb"></td><td>1</td><td>令狐冲</td><td>男</td><td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>2</td><td>任我行</td><td>男</td><td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td></tr><tr><td><input type="checkbox" name="cb"></td><td>3</td><td>岳不群</td><td>?</td><td><a href="javascript:void(0)" onclick="delTr(this);">删除</a></td></tr>
</table>
<div><input type="button" value="全选" id="selectAll"><input type="button" value="全不选" id="unSelectAll"><input type="button" value="反选" id="selectRev"></div>
</body>
</html>

动态表格案例 JavaScript相关推荐

原生JS实现任意数据的动态表格
昨天晚上有个女生叫我帮他看一下前端怎么通过 JQuery 向后台发送数据,今天上午刚测试完Java,下午就花了一点时间来实现动态表格案例,其实也不难,就是使用原生的JS来实现:其中有一个很奇葩的需求. ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
HTML+CSS+JavaScript小案例（注册页面表单验证轮播图跳转主页动态表格select联动）
案例:(表单验证) <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
JavaScript实现动态表格
JavaScript实现动态表格 (改建版,代码见最下面) 基本效果如下点击添加,可以将输入框中的值,新增到表格中:点击删除可以删除本行内容. 代码如下: 第一种方式(较简单,建议使用) <! ...
【黑马JS比较】用JavaScripts的DOM对象实现动态表格
案例: 在表格上可以实现添加和删除操作思路: 代码: html: <!DOCTYPE html> <html><head><title>动态表格< ...
JS - 生成动态表格
<script>var datas = [{name: '卡卡西',subject: 'JavaScript',grade: 100,}, {name: '鸣人',subject: 'Ja ...
DOM JS实现动态表格
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
jQuery全选全删动态表格
jQuery全选全删动态表格 1.效果图附上: 2.代码呈上: <!DOCTaYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
jQuery生成动态表格
前言工作中常常需要动态的添加或者删除表格行或者列,所以稍微整理了一下,实现了一些比较通用的功能. 效果除表头外,第一行模拟从后台加载的数据,其余的行是动态添加点击保存后,该行自动变成第一行的效果 ...

动态表格案例 JavaScript

用简单的事件监听事件来实行:

动态表格案例 JavaScript相关推荐

最新文章

热门文章