<!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. WP开发笔记——WP7 SDK使用技巧

    俗话说的好,工欲善其事,必先利其器. 入门WP开发之前,免不了要先接触开发环境和开发工具.使用WP7 SDK进行开发,我们需要掌握SDK的一些实用技巧,以便我们的开发. 一.开启/关闭电脑键盘输入 W ...

  2. php中的in_array分析及其替换方法

    php中的in_array函数效率分析 http://www.jb51.net/article/41446.htm http://www.server110.com/php/201309/1150.h ...

  3. picLazyLoad 图片延时加载，包含背景图片

    /** * picLazyLoad 图片延时加载,包含背景图片 * $(img).picLazyLoad({...}) * data-original 预加载图片地址 * alon */ ;(func ...

  4. php ftp文件上传函数--新手入门参考

    在 php编程中,用ftp上传文件比较多见,这里分享个简单入门型的ftp上传实例. <?php /** * ftp上传文件 * 学习ftp函数的用法 */ // 定义变量 $local_file ...

  5. Super Object Toolkit (支持排序)

    (* * Super Object Toolkit * * Usage allowed under the restrictions of the Lesser GNU General Public ...

  6. atomic_read

    static inline int atomic_read(const atomic_t *v) { return (*(volatile int *)&(v)->counter); } ...

  7. 用Python作GIS之四：Tkinter基本界面的搭建

    Python下的主窗口可以定义如下:def start(self):        #self.project = Project("temp")        #self.pro ...

  8. c++中new分配动态数组

    变长一维数组     这里说的变长数组是指在编译时不能确定数组长度,程序在运行时需要动态分配内存空间的数组.实现变长数组最简单的是变长一维数组,你可以这样做:  //文件名: array01.cpp ...

  9. Ubuntu下codeblocks汉化

    code::blocks是一个十分好用编辑环境,一个在手,无所不能,为了更好的支持中文,我列出了汉化的方法: 1下载中文汉化包:http://pan.baidu.com/s/1hqvNZbI 2.解压 ...

  10. 鼠标驱动之-sys节点-input子系统

    首先需要了解sys节点和linux驱动编程的知识,在linux内核<linux/>下有着对应的实现.本例实现创建sys节点,外围程序通过input子系统控制鼠标位置. 第一步编写驱动代码, ...