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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
node.js的事件机制
Feb 08 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
Node.js dgram模块实现UDP通信示例代码
Sep 26 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
详解node.js 事件循环
Jul 22 Javascript
基于vue实现微博三方登录流程解析
Nov 04 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 删除记录实现代码
2009/03/12 PHP
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
JQuery 入门实例1
2009/06/25 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
微信小程序之蓝牙的链接
2017/09/26 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
python抓取京东商城手机列表url实例代码
2013/12/18 Python
python批量修改文件名的实现代码
2014/09/01 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
.net软件工程师面试题
2015/03/31 面试题
初中生学习的自我评价
2013/11/14 职场文书
2014年环保局工作总结
2014/12/11 职场文书
伏羲庙导游词
2015/02/09 职场文书
现役军人家属慰问信
2015/03/24 职场文书
学校党支部承诺书
2015/04/30 职场文书
《给予树》教学反思
2016/03/03 职场文书
详解flex:1什么意思
2022/07/23 HTML / CSS