js如何实现简单的表格增删效果

前端  /  管理员 发布于 7年前   259

先来看一下效果：

e23aabd856ef73138405e7037597cd7.png

（推荐教程：javascript教程）

js实现：

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title></head><!--4、编号：文本框书名：文本框作者：文本框出版社：文本框添加按钮表格编号 书名 作者 出版社 删除--></head> <body> <div id="all"> <p>编    号：<input type="text"></p> <p>书    名：<input type="text"></p> <p>作    者：<input type="text"></p> <p>出版社 ：<input type="text"></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>

相关视频教程推荐：javascript视频教程

以上就是js如何实现简单的表格增删效果的详细内容，更多请关注其它相关文章！


  • 上一条：
    css如何修改默认滚动条样式
    下一条：
    css中position属性有哪些用法

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客