<!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. 正确编写Designated Initializer的几个原则

    Designated Initializer(指定初始化器)在Objective-C里面是很重要的概念,但是在日常开发中我们往往会忽视它的重要性,以至于我们写出的代码具有潜藏的Bug,且不易发现.保证 ...

  2. 让backspace键默认为删除键

    在/root/.bashrc  中插入一条: stty erase ^H

  3. CentOS学习笔记--基本命令--目录的相关操作

    Linux基本命令--目录的相关操作 常见的处理目录的命令吧: cd:变换目录 pwd:显示目前的目录 mkdir:创建一个新的目录 rmdir:删除一个空的目录 cd (变换目录) cd是Chang ...

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

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

  5. Android Studio添加jar包

    1.先把jar包复制到项目的lib下,

  6. Ubuntu14.04忘记root密码的解决方法

    电脑20多天没用忘记密码了,下面是在网上找到的一个解决办法,其它的和这个也大概相同.因为其中有些缺漏,没能给我解决问题.通过分析最终问题还是解决了,现解决方案的关键点记录一下.希望能方便到其它人. 1 ...

  7. php学习日志（4）-The mbstring extension is missing. Please check your PHP configuration错误及解决方法

    在安装好wampServer后,一直没有使用phpMyAdmin,今天用了一下,phpMyAdmin显示错误:The mbstring extension is missing. Please che ...

  8. JPG各种输入框样式

    输入框景背景透明:<input style="background:transparent;border:1px solid #ffffff"> 鼠标划过输入框,输入框 ...

  9. XHTML1.0对HTML4.0的改进

    1.XHTML借鉴了XML的写法,语法更加严格: 2.XHTML实现了把页面样式和内容分离了,废弃了HTML4.0中表示样式的标签和属性,推荐使用CSS样式来描述页面的样式. XHTML1.0 分为两 ...

  10. mdf与ldf文件如何还原到SQLserver数据库

    现在又如下两个文件 需要用这两个文件还原数据库 那么该怎么去还原呢? 首先在D盘目录下建立一个文件夹test,然后将上图中的文件粘贴到该文件夹中. 接着在数据库中执行如下代码: EXEC sp_att ...