<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

            var oTab = document.getElementById("tb1");

            var oBtn = document.getElementById("btnAdd");

            var oName = document.getElementById("txtName");

            var oAge = document.getElementById("txtAge");

            oBtn.onclick = function () {

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

                //第一列

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

                //alert(oTab.tBodies[0].rows.length + 1);

                oTd.innerText = oTab.tBodies[0].rows.length + 1;

                oTr.appendChild(oTd);

                //第二列

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

                // alert(oName.value);

                oTd.innerText = oName.value;

                oTr.appendChild(oTd);

                //第三号

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

                // alert(oAge.value);

                oTd.innerText = oAge.value;

                oTr.appendChild(oTd);

                //第三号

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

                // alert(oAge.value);

                oTd.innerText = "<a href='javascript:void(0);'>删除</a>";

                oTr.appendChild(oTd);

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

                    oTab.removeChild(this.parentNode.parentNode);

                };

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

            }

        }

    </script>

</head>

<body>

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

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

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

    <input type="button" id="btnDel" value="删除" />

    <table id="tb1" border="1" style="width: 500px;">

        <thead>

            <tr>

                <td>ID</td>

                <td>姓名</td>

                <td>年龄</td>

                <td></td>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>Cupid</td>

                <td>66</td>

                <td></td>

            </tr>

            <tr>

                <td>2</td>

                <td>Fly</td>

                <td>45</td>

                <td></td>

            </tr>

            <tr>

                <td>3</td>

                <td>Sky</td>

                <td>23</td>

            </tr>

            <tr>

                <td>4</td>

                <td>Windy</td>

                <td>98</td>

            </tr>

            <tr>

                <td>5</td>

                <td>Snow</td>

                <td>09</td>

                <td></td>

            </tr>

        </tbody>

    </table>

</body>

</html>

　　

javascript表格的添加和删除的更多相关文章

  1. js动态添加-表格逐行添加、删除、遍历取值

    关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...

  2. [django]表格的添加与删除实例(可以借鉴参考)

    自己并未采用任何表格插件,参考网上例子,自己编写出来的django网页实例,请各位参考! 首先看图做事,表格布局采用bootstrap,俗话说bootstrap橹多了就会css了,呵呵,下面看图: 上 ...

  3. javascript;select动态添加和删除option

    <select id="sltCity"></select> //添加Option. var optionObj = new Option(text, va ...

  4. 利用jquery动态添加和删除表格的一行，并且保存单行数据

    开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...

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

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

  6. 基于JavaScript的表格设计：按序添加或删除班级的学生信息

    目的: 制作一个表格,显示班级的学生信息 功能: 鼠标移到不同行,背景色发生改变,离开恢复原背景色 添加.删除按钮,可添加,可删除. 程序流程: 首先先建立绑定事件函数. 其次建立鼠标移动改变背景色函 ...

  7. 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3)：用户添加/修改/删除 vue表格组件 vue分页组件

    第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...

  8. JavaScript实验一(添加节点，删除节点)

    静态html页面: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  9. js 表格操作----添加删除

    js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...

随机推荐

  1. 配置普通用户可以运行saltstack的模块

    client_acl 配置使用 1.概述:开启对系统上非root的系统用户在master上可以执行特殊的模块.这些模块名可以使用正则表达式来表示,不能指定对哪些minion执行命令.执行命令只需要切换 ...

  2. Ubuntu 14.04下java开发环境的搭建--3--Tomcat及MySQL的安装

    前面两篇文章,已经说明了JDK和Eclipse 的安装方法,下面简单说一下,Tomcat及MySQL的安装方法. Tomcat的安装. 在合适的地方解压apache-tomcat-6.0.39.tar ...

  3. android Timer and TImerTask

    android Timer and TImerTask Caused by: java.lang.IllegalStateException: TimerTask is scheduled alrea ...

  4. web前端学习之HTML CSS/javascript之一

    前端编码之路之坎坷,web前端应该一直是个战场吧,各种浏览器的不兼容,各种小细节的修改,要往一个好的产品经理方向走,实在是难,昨天听了一位十年经验的产品经理讲座,最重要的恐怕就是协调资源的能力,而协调 ...

  5. 错误解决mysql - Event Scheduler: No data - zero rows fetched, selected, or processed

    当遇到一个NOT FOUND(无数据)的警告时,使用一个包含清除警告语句的条件句柄处理,就可以继续处理程序并退出句柄. 这个问题在MySQL5.6.3之后的版本已经解决了,所以该解决方法不是必要的. ...

  6. Mongodb Java Driver 参数配置解析

    要正确使用Mongodb Java Driver,MongoClientOptions参数配置对数据库访问的并发性能影响极大. connectionsPerHost:与目标数据库能够建立的最大conn ...

  7. 修改linux命令行提示符

    安装了ubuntu1304版本,发现命令行@后面的名称太长,影响视觉美观,决定修改一下.修改当前用户目录下面的.bashrc文件即可达到目的. 打开.bashrc文件,找到下面的内容:if [ &qu ...

  8. Codeforces 559A 第六周 O题

    Description Gerald got a very curious hexagon for his birthday. The boy found out that all the angle ...

  9. C# 时间戳

    C# 时间与时间戳互转 13位 /// <summary> /// 将c# DateTime时间格式转换为Unix时间戳格式 /// </summary> /// <pa ...

  10. docker 感性体验

    Docker 1.0正式发布!1.0 版本包含很多新特性,这也是 Docker 的首个产品级的版本.从今天开始,你将会一直听到一个新的概念 —— Docker as a platform ,其组件包括 ...