<!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. oracle12C 创建PDB

    1.根据数据库现有模板创建PDB CREATE PLUGGABLE DATABASE ssptrad ADMIN USER sspIDENTIFIED BY oracle roles=(dba) fi ...

  2. logstash同步mysql数据到mysql(问题一)

    问题 通过logstash同步数据时 字段类型为tinyint时 通过过去 0变成了false  1变为了true 时间类型 变为 2018-10-16T14:58:02.871Z 分析 开始尝试通过 ...

  3. nginx的反向代理proxy_pass指令

    1. 首先什么是代理服务器?客户机发送请求时,不会直接发送到目的主机,而是先被代理服务器收到,代理服务器收到客服机的请求后,再向目的机发出,目的机就会返回数据给客户机,在返回给客户机之前,会被代理服务 ...

  4. 201904:Action recognition based on 2D skeletons extracted from RGB videos

    论文标题:Action recognition based on 2D skeletons extracted from RGB videos 发表时间:02 April 2019 解决问题/主要思想 ...

  5. FreeRTOS任务函数

    FreeRTOS的任务函数原型如下:void ATaskFunction(void *pvParameters); void ATaskFunction(*pvParameters){;; //函数可 ...

  6. 【Codeforces Round 464】Codeforces #265 (Div. 1)

    模拟RD265 ABC三题,Rank58 Codeforces 464 A 题意:给定一个字符串,求比这个字符串字典序大并且和它长度相等的第一个不含有长度大于等于2的回文串的字符串. 思路:首先我们枚 ...

  7. [02] SpringBoot的项目属性配置

    1.application.properties 简述 配置文件的使用和调整都非常方便,直接在项目默认的classpath下的application.properties文件中做调整即可.例如Spri ...

  8. img图片加载出错处理（转载）

    为了美观当网页图片不存在时不显示叉叉图片当在页面显示的时候,万一图片被移动了位置或者丢失的话,将会在页面显示一个带X的图片,很是影响用户的体验.即使使用alt属性给出了”图片XX”的提示信息,也起不了 ...

  9. Luogu4099 HEOI2013 SAO 组合、树形DP

    传送门 值得注意的是一般的DAG的拓扑序列数量是NP问题,所以不能直接入手 题目中给出的图可以看做是一个树形图,虽然方向比较迷.考虑使用树形图的性质 不妨任选一个点为根做树形DP,注意到数的位置与方案 ...

  10. LiveCharts文档-1前言

    原文:LiveCharts文档-1前言 LiveCharts文档-1前言 最近做一个企业应用,客户端使用的是WPF,需要生成一个漂亮的统计图表,以前WinForm有Chart控件,但是微软貌似没有弄W ...