<!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. centos6.5 安装mono

    mono是一个在linux下兼容.net的软件.安装之前要把开发包装好 源码安装mono wget http://download.mono-project.com/sources/mono/mono ...

  2. c# 取得ip地址和网关

    /// <summary> /// 得到本机IP /// </summary> private string GetLocalIP() { //本机IP地址 string st ...

  3. ADO.NET笔记——将DataReader作为函数返回值

    相关知识: 在很多情况下,可能把数据库的访问封装到一个函数中,通过该函数返回一个DataReader对象给调用者.例如定义函数:SqlDataReader returnDR(),然后再Main函数中调 ...

  4. 开始ubuntu 14.04 的装X模式---终端模式下中文输入，听歌，上irc 开启framebuffer看电影 截图

    先上图吧 卡卡的全是在tty1 下的操作,看电影,听歌,截图 ,看图  ,上irc 等等,相当适合在小白面前装屁! 需要安装的软件: 为了能正常显示中文:安装fbterm sudo apt-get i ...

  5. 转：java中volatile关键字的含义

    转:java中volatile关键字的含义 在java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这个关键字,在进行多线程并发处理的时候就可以万事大吉. Java语言 ...

  6. js----DOM的三大节点及部分用法

    DOM有三种节点:元素节点.属性节点.文本节点. 一.用nodeType可以检测节点的类型 节点类型 nodeType属性值 元素节点 1 属性节点 2 文本节点 3 这样方便在js中对各个节点进行操 ...

  7. PySide 简易教程<三>-------动手写起来

    到目前为止,已经接触的Pyside的界面元素有如下几个:QWidget.QPushButton.QLabel.本次再介绍两个tooltip和messagebox.tooltip是一个鼠标悬浮提示信息, ...

  8. python之类定义

    <python基础教程>第7章说python中的类定义: 1. 要么声明__metaclass__=type 2. 要么继承object. 但是直接定义下类, 也没报错: >> ...

  9. ios上取得设备唯一标志的解决方案

    iOS 7中苹果再一次无情的封杀mac地址,现在已经不能获取ios7设备的物理地址.那么在开发中如何才能标识设备的唯一性呢?apple公司提供的方法是通过keychain来存一些标志信息,然后通过存的 ...

  10. 总线（BUS）和总线操作

    1.什么是总线? 答:总线是运算部件之间数据流通的公共通道. 2.总线的作用? 答:提高专用信号处理逻辑电路的运算能力和速度. 3.总线与部件之间是怎么连接的? 答:各运算部件和数据寄存器组是通过带控 ...