<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>表格添加删除</title>

<script>

window.onload=function ()

{

   var oTab=document.getElementById('tab1');

   var oBtn=document.getElementById('btn1');

   var oName=document.getElementById('name');

   var oAge=document.getElementById('age');

   var id=oTab.tBodies[0].rows.length+1;

   oBtn.onclick=function ()

   {

      var oTr=document.createElement('tr');

      var oTd=document.createElement('td');

      oTd.innerHTML=id++;    //记录id，避免有行被删除，id发生重复

      oTr.appendChild(oTd);

      var oTd=document.createElement('td');

      oTd.innerHTML=oName.value;

      oTr.appendChild(oTd);

      var oTd=document.createElement('td');

      oTd.innerHTML=oAge.value;

      oTr.appendChild(oTd);

      var oTd=document.createElement('td');

      oTd.innerHTML='<a href="javascript:;">删除</a>';

      oTr.appendChild(oTd);

      oTd.getElementsByTagName('a')[0].onclick=function ()

      {

         oTab.tBodies[0].removeChild(this.parentNode.parentNode);

      };

      oTab.tBodies[0].appendChild(oTr);

   };

};

</script>

</head>

<body>

姓名：<input id="name" type="text" />

年龄：<input id="age" type="text" />

<input id="btn1" type="button" value="添加" />

<table id="tab1" border="1" width="500">

   <thead>

       <td>ID</td>

       <td>姓名</td>

       <td>年龄</td>

        <td>操作</td>

    </thead>

    <tbody>

       <tr>

           <td>1</td>

           <td>Blue</td>

           <td>27</td>

           <td></td>

        </tr>

       <tr>

           <td>2</td>

           <td>张三</td>

           <td>23</td>

           <td></td>

        </tr>

       <tr>

           <td>3</td>

           <td>李四</td>

           <td>28</td>

           <td></td>

        </tr>

       <tr>

           <td>4</td>

           <td>王五</td>

           <td>25</td>

           <td></td>

        </tr>

       <tr>

           <td>5</td>

           <td>张伟</td>

           <td>24</td>

           <td></td>

        </tr>

    </tbody>

</table>

</body>

</html>

JavaScript DOM方法表格添加删除的更多相关文章

  1. Javascript DOM 03 表格添加、删除 + 搜索

    获取 tBodies.tHead.tFoot.rows.cells   隔行变色 鼠标移入高亮   添加.删除一行 DOM方法的使用                                   ...

  2. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  3. DOM给表格添加新一行和删除整个行的内容

    DOM用appendChild()给表格添加新一行时,要注意,在HTML中没特别设置<thead>,<tbody>时,会自动添加上,所以要选择表格第一个元素在添加tr. // ...

  4. JavaScript在div后添加删除div

    var idd = 'str'; $('.task-done-detail-content-p7').click(function () { var id = this.id; if(idd !== ...

  5. JavaScript 原生控制元素添加删除

    参考: https://blog.csdn.net/leijie0322/article/details/80664554 https://www.cnblogs.com/jpfss/p/910620 ...

  6. JQ DOM元素 创建 添加 删除

    创建元素 // 创建元素节点 $('<p></p>'); // 创建属性节点 $('<p class="wow"></p>'); / ...

  7. WPF下的Richtextbox中实现表格合并，添加删除行列等功能

    .Net中已有现在的方法实现这些功能,不过可能是由于未完善,未把方法公开出来.只能用反射的方法去调用它. 详细信息可以查看.Net Framework 的源代码 http://referencesou ...

  8. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  9. JavaScript DOM基础总结

    上个月在进行百度三面时候,面试官提问JavaScript DOM方法,我回答的有点少,前面太关注JavaScript 兼容性,框架方面,JavaScript 原生DOM基础没有记牢,心中有点遗憾.下来 ...

随机推荐

  1. QT插件+ROS 2 新建项目

    一QT插件开发ROS,http://www.ncnynl.com/archives/201701/1277.html 二QT开发遇到问题http://blog.csdn.net/u013453604/ ...

  2. yarn出现“There are no scenarios ; must have at least one"

    错误信息:“There are no scenarios ; must have at least one" 背景:在将vscode自动化构建编译打包时出现这种情况,主要是执行yarn这一步 ...

  3. Intel支持八九代酷睿的B365芯片组将登场亮相

    不久前,Intel悄然推出了新款芯片组B365,看起来像是B360的升级版,但事实上二者并无太大关系. 根据最新曝料,基于B365芯片组的主板将在1月16日登场亮相,支持八九代酷睿. 同时获悉,B36 ...

  4. ImageView android:scaleType="centerCrop"

    转载地址:http://www.cnblogs.com/yejiurui/archive/2013/02/25/2931767.html 在网上查了好多资料,大致都雷同,大家都是互相抄袭的,看着很费劲 ...

  5. IDEA 创建和使用tomcat

    一.创建一个普通web项目,步骤略,如下图. 二.配置项目相关信息. 1.通过如下方式在Artifacts下添加我们的项目. 2.选中我们的项目. 3.修改项目的默认输出位置,可根据需要修改. 4.如 ...

  6. Tensorflow-hub[例子解析2]

    接Tensorflow-hub[例子解析1]. 3 基于文本词向量的例子 3.1 创建Module 可以从Tensorflow-hub[例子解析1].中看出,hub相对之前减少了更多的工作量. 首先, ...

  7. 【Python】Python正则表达式使用指导

    1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一部分.正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法,但功能十 ...

  8. Luogu2164 SHOI2007 交通网络 期望、BFS、拓扑排序

    传送门 题目还算不难吧 首先我们枚举点$i$,将其他所有点到这个点的最短路求出来 然后我们在这一次建出的最短路$DAG$的反图上进行拓扑排序.假设我们算到了点$j$,点$j$的人流量为$t_j$,点$ ...

  9. Jlink使用技巧之虚拟串口功能

    前言 串口调试是单片机开发过程必不可少的一个功能,一般是使用一个UART-TTL的串口模块来实现串口的功能,其实下载调试使用的Jlink仿真器也可以实现串口调试的功能,本篇文章将介绍如何使用Jlink ...

  10. GNU构建系统和AutoTools

    注:本篇博客是阅读文末[参考博客]的讲解所写,内容非原创,仅是学习笔记 1. 概述2. 不同视角的程序构建2.1 用户视角2.2 开发者视角3. 导图图片4. configure选项参考博客 1. 概 ...