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 相关文章推荐
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
js实现随机抽奖
Mar 19 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 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
php 中文处理函数集合
2008/08/27 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
工会换届选举方案
2014/05/21 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
爱国之歌(8首)
2019/09/29 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
mysql 排序失效
2022/05/20 MySQL