HTML动态的增加和删除表格的一行
利用HTML,CSS和JavaScript三种技术完成表格页面级的操作,具体内容如下:
(1)利用HTML编写网页: “编号”、“姓名”、“性别”三个文本框,“添加”按钮,一个“学生信息表”表格;
(2)利用CSS设置表格的样式:实线边框,文本居中;
(3)运用JavaScript DOM技术实现表格增加和删除记录。
页面效果如下:
图1 初始界面
图2 添加记录
图3 删除记录
-
-
<html lang="en">
-
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<style type="text/css">
-
input {
-
width: 150px;
-
}
-
-
div {
-
align-content: center;
-
color: rgba(255, 0, 106, 0.463);
-
padding-left: 35px;
-
background-color: aquamarine;
-
}
-
</style>
-
-
<title>myTab</title>
-
-
</head>
-
-
<body>
-
<div id="">
-
编号:<input type="text" maxlength="15" size="20" id="num">
-
姓名:<input type="text" maxlength="7" size="20" id="name">
-
性别:<input type="text" maxlength="1" size="20" id="sex">
-
操作:<input type="button" onclick="add()" value="添加" id="ft">
-
<!-- <button onclick="add()">添加</button> -->
-
</div> <!--第一行添加栏 -->
-
-
<!-- <form action=""> -->
-
<table width="300" border="1" cellspacing="0" id="tab1" align="center">
-
<caption>学生信息表</caption>
-
<tr>
-
<td>编号</td>
-
<td>姓名</td>
-
<td>性别</td>
-
<td>操作</td>
-
-
</tr>
-
-
</table>
-
-
<!-- </form> -->
-
-
<script>
-
function add() {
-
//创建各个结点
-
//得到表对象
-
var tb = document.getElementById("tab1");
-
//创建行对象
-
var tt = document.createElement("tr");
-
//创建列对象
-
var td1 = document.createElement("td");
-
var td2 = document.createElement("td");
-
var td3 = document.createElement("td");
-
var td4 = document.createElement("td");
-
//创建a对象
-
var pa = document.createElement("a");
-
//得到input标签中的值
-
var num1 = document.getElementById("num").value;
-
var mame1 = document.getElementById("name").value;
-
var sex1 = document.getElementById("sex").value;
-
-
//设置td的操作a超链接
-
pa.setAttribute("onclick", "del(this)");
-
pa.setAttribute("href", "javascript:void(0)");//"javascript:void(0)"设置当前超链接不跳转,因为跳转了就还是跳转到了当前界面,
-
//那就会刷新当前页面所以会没有效果,就像你写的代码没有反应一样
-
pa.innerHTML = "删除"
-
//把获取到的值付给td元素
-
td1.innerHTML = num1;
-
td2.innerHTML = mame1;
-
td3.innerHTML = sex1;
-
// td4.innerHTML=bt;
-
//将各个td加入到tr中
-
tt.appendChild(td1);
-
tt.appendChild(td2);
-
tt.appendChild(td3);
-
//超链接放入td4
-
td4.appendChild(pa);
-
tt.appendChild(td4);
-
-
//tr加入到table
-
tb.appendChild(tt);
-
-
-
}
-
function del(obj) {
-
-
var judge = confirm("确认删除吗?")
-
if (judge = true) {
-
tdNode = obj.parentNode;//得到td
-
trNOde = tdNode.parentNode;//得到tr
-
tbNOde = trNOde.parentNode;//得到table
-
tbNOde.removeChild(trNOde);
-
}
-
-
}
-
</script>
-
</body>
-
-
-
</html>
这篇好文章是转载于:编程之路
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 编程之路
- 本文地址: /boutique/detail/tanhhabkjf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13