<!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. Template_16_模板与继承

    1,名称模板参数template <typename PolicySetter1 = DefaultPolicy1,    typename PolicySetter2 = DefaultPol ...

  2. 【转】c# yield用法

    注意事项:1.yield语句只能出现在迭代块中:2.yield return 语句不能放在 try-catch 块中的任何位置. 该语句可放在后跟 finally 块的 try 块中3.yield b ...

  3. CentOS学习笔记--程序管理

    程序管理 一个程序被加载到内存当中运行,那么在内存内的那个数据就被称为程序(process).程序是操作系统上非常重要的概念, 所有系统上面跑的数据都会以程序的型态存在.那么系统的程序有哪些状态?不同 ...

  4. android-support-xxxx.jar NoClassDefFoundError

    当你的项目出现以下红色提示的时候,要小心了,因为很可能因为这个错误而导致解释不通的异常出现. Found 2 versions of android-support-v4.jar in the dep ...

  5. linux查看硬件信息的命令(图文)

    发布:脚本学堂/Linux命令  编辑:JB02   2013-12-23 21:48:18  [大 中 小] 转自:http://www.jbxue.com/LINUXjishu/14996.htm ...

  6. Win10环境下的Scrapy结合Tor进行匿名爬取

    本文内容来源:http://blog.privatenode.in/torifying-scrapy-project-on-ubuntu/ 在使用Scrapy的时候,一旦进行高频率的爬取就容易被封IP ...

  7. Go在linux下的安装

    在Ubuntu.Debian 或者 Linux Mint上安装Go语言 下面是在基于Debian的发行版上使用apt-get来安装Go语言和它的开发工具. $ sudo apt-get install ...

  8. 外企iOS开发的笔试题

    一组外企iOS开发的笔试题,您能回答出来吗?从群里收集来的. (miki西游@mikixiyou的文档,原文链接: http://mikixiyou.iteye.com/blog/1546376  转 ...

  9. 分析 "ADO" "ADODB" "ADODC" 之间的区别与联系

    在敲学生信息管理系统的时候,通过查阅了解了一些关于 ADO / ADODB / ADODC / 的简单描述,想想将他们对 比着总结一下更容易理解记忆.尽管都是一些浅显的东西,不过对像我这样的菜鸟们还是 ...

  10. Ubuntu 14.04 安装 Xilinx ISE 14.7 全过程

    生命在于折腾. 这个帖子作为我安装xilinx ISE 14.7版本一个记录.希望给需要的人一些帮助,这些内容绝大部分也是来源于互联网. 软硬件: lsb_release -a No LSB modu ...