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 相关文章推荐
use jscript List Installed Software
Jun 11 Javascript
JavaScript库 开发规则
Jan 31 Javascript
基于jQuery的表格操作插件
Apr 22 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
js实现显示当前状态的导航效果代码
Aug 28 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
Bootstrap实现响应式导航栏效果
Dec 28 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
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
Symfony模板的快捷变量用法实例
2016/03/17 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
Python数据类型详解(二)列表
2016/05/08 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
keras topN显示,自编写代码案例
2020/07/03 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
四年级下册教学反思
2014/02/01 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
法定代表人授权委托书
2014/04/04 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
质检员工作总结2015
2015/04/25 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
高三英语教学反思
2016/03/03 职场文书
详解Redis主从复制实践
2021/05/19 Redis
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js