JS实现简单的表格增删
本文实例为大家分享了JS实现表格增删的具体代码，供大家参考，具体内容如下
描述：
JS——实现简单的表格增删。
效果：
实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--4、编号：文本框
书名：文本框
作者：文本框
出版社：文本框
添加按钮
表格
编号 书名 作者 出版社 删除-->
</head>
<body>
<div id="all">
<p>编 号：<input type="text" class="in"></p>
<p>书 名：<input type="text" class="in"></p>
<p>作 者：<input type="text" class="in"></p>
<p>出版社 ：<input type="text" class="in"></p>
<p>
<input type="button" value="添加" id="tj">
<input type="button" value="清除" id="cle">
</p>
</div>
<script>
var ins,tj,qc,tab,all;
var bookData=["编号","书名","作者","出版社","删除"];
init();
function init() {
all=document.getElementById("all");
ins=document.getElementsByClassName("in");
tj=document.getElementById("tj");
qc=document.getElementById("cle");
del=document.getElementById("del");
tj.addEventListener("click",clickHandler);
qc.addEventListener("click",clickQcHandler);
creatTable();
}
function creatTable() {
tab = $c("table", all, {
width:"500px",
borderCollapse:"collapse"
});
for (var i = 0; i < ins.length+1; i++) {//购物车表单数据赋值
var th = $c("th", tab, {
textAlign: "center",
border: "1px solid #000000"
});
th.textContent=bookData[i];
}
}
function clickHandler() {
var tr = $c("tr", tab, {
textAlign: "center",
border: "1px solid #000000"
});
for (var i = 0; i < ins.length+1; i++) {//购物车表单数据赋值
var td = $c("td", tr, {//列的创建
textAlign: "center",
border: "1px solid #000000"
});
if(i<ins.length){
td.textContent = ins[i].value;
}
else if(i==ins.length){
var del=$c("button", td);
del.textContent="删除";
del.addEventListener("click",clickDelHandler);
}
}
}
function clickDelHandler(e) {//删除 一行
this.parentNode.parentNode.remove();
}
function clickQcHandler(e) {//清除 全部
tab.remove();
creatTable();
}
function $c(type,parent,style) {
var elem=document.createElement(type);
if(parent) parent.appendChild(elem);
for(var key in style){
elem.style[key]=style[key];
}
return elem;
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍JS实现简单表格排序操作示例，包括了JS实现简单表格排序操作示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现简单表格排序操作。分享给大家供大家参考，具体如下： 运行效果： 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript表格(table)操作技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript遍历算法
-
本文向大家介绍JS简单实现表格排序功能示例，包括了JS简单实现表格排序功能示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS简单实现表格排序功能的方法。分享给大家供大家参考，具体如下： 思路：遍历每个li，并把它们存放到数组中去，然后通过sort()方法进行排序，再插入 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《Ja
-
本文向大家介绍JScript实现表格的简单操作，包括了JScript实现表格的简单操作的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JScript实现表格的简单操作，供大家参考，具体内容如下 实现思路： 1、添加时：获取当前列表的行数，在当前一行添加下一行； 2、用insertCell()方法添加一行，下标从0开始， 3、若要给新一行添加类型、响应事件，就用setAttribute
-
本文向大家介绍javascript js 操作数组 增删改查的简单实现，包括了javascript js 操作数组 增删改查的简单实现的使用技巧和注意事项，需要的朋友参考一下 函数定义 使用： myarray.remove(i); //删除 //更新 myarray.remove(0); myarray.insert(0,eventjson[0]); //插入 myarray.insert(0,e
-
本文向大家介绍JS实现520 表白简单代码，包括了JS实现520 表白简单代码的使用技巧和注意事项，需要的朋友参考一下 这两天不知道咋了，迷迷糊糊的，突然知道今天是520的我，急急忙忙赶出个程序（新手，代码有点乱），发出来大家一起研究下（参考百度的）。 总结 以上所述是小编给大家介绍的JS实现520 简单表白代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感
-
本文向大家介绍JS实现的简单表单验证功能示例，包括了JS实现的简单表单验证功能示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现的简单表单验证功能。分享给大家供大家参考，具体如下： 源代码： myjs1.js文件代码: 注意：在js中声明变量用var，定义函数用function, 这个例子可以实现 爱好的验证(不能为空) ，密码是否一致，而且密码的长度要大于8，备注是否为空! 另