JavaScript实现简单动态表格


Posted in Javascript onDecember 02, 2020

本文实例为大家分享了JavaScript实现简单动态表格的具体代码,供大家参考,具体内容如下

JavaScript实现简单动态表格

JavaScript实现简单动态表格

代码:

<!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 id="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);" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
      <td>2</td>
      <td>西门庆</td>
      <td>男</td>
      <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow"  onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
      <td>3</td>
      <td>武二郎</td>
      <td>男</td>
      <td><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow"  onclick="delTr(this);">删除</a></td>
    </tr>


  </table>



<script>
  
  //1.获取btn
  var btn_add = document.getElementById("btn_add");
  //2.绑定单击事件
  btn_add.onclick = function(){
    //获取每一个输入框内容
    var id = document.getElementById("id").value;
    var name = document.getElementById("name").value;
    var gender = document.getElementById("gender").value;

    //获取表格
    var table = document.getElementById("table");
    //创建tr
    var tr = document.createElement("tr");
    //创建td
    var td_id = document.createElement("td");
    var text_id = document.createTextNode(id);
    td_id.appendChild(text_id);
    tr.appendChild(td_id);

    var td_name = document.createElement("td");
    var text_name = document.createTextNode(name);
    td_name.appendChild(text_name);
    tr.appendChild(td_name);

    var td_gender = document.createElement("td");
    var text_gender = document.createTextNode(gender);
    td_gender.appendChild(text_gender);
    tr.appendChild(td_gender);

    var td_option = document.createElement("td");

    var a = document.createElement("a");
    a.setAttribute("href","javascript:void(0);");
    a.setAttribute("onclick","delTr(this)");
    var text_a = document.createTextNode("删除");
    a.appendChild(text_a);
    td_option.appendChild(a);
    tr.appendChild(td_option);
    table.appendChild(tr);
  }
  function delTr(obj){
    var table = obj.parentNode.parentNode.parentNode;
    var tr = obj.parentNode.parentNode;
    table.removeChild(tr);
  }
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
canvas压缩图片转换成base64格式输出文件流
Mar 09 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
typescript配置alias的详细步骤
Aug 12 Javascript
详解微信小程序动画Animation执行过程
Sep 23 Javascript
JavaScript ES6的函数拓展
Jan 18 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 #Javascript
JavaScript实现网页跨年倒计时
Dec 02 #Javascript
JavaScript async/await原理及实例解析
Dec 02 #Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 #Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 #Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 #Vue.js
vue $router和$route的区别详解
Dec 02 #Vue.js
You might like
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
python递归计算N!的方法
2015/05/05 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
python温度转换华氏温度实现代码
2020/12/06 Python
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
总经理办公室主任岗位职责
2013/11/12 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
大学生自荐信范文
2015/03/05 职场文书
调任通知
2015/04/21 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
详解Python生成器和基于生成器的协程
2021/06/03 Python
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL
Python如何使用循环结构和分支结构
2022/04/13 Python