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 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
自写简单JS判断是否已经弹出页面
Oct 20 Javascript
mailto的使用技巧分享
Dec 21 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
package.json文件配置详解
Jun 15 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 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
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
php面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
javascript实现连续赋值
2015/08/10 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
简单讲解Python中的闭包
2015/08/11 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
pytorch 数据集图片显示方法
2018/07/26 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
Pytorch之contiguous的用法
2019/12/31 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
Python 操作 MySQL数据库
2020/09/18 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
工商企业管理实习自我鉴定
2013/12/04 职场文书
绩效管理实施方案
2014/03/19 职场文书
工作作风建设心得体会
2014/10/22 职场文书
计划生育工作总结2015
2015/04/03 职场文书
孟佩杰观后感
2015/06/17 职场文书
如何用python反转图片,视频
2021/04/24 Python