写法一：（有点啰嗦）

//--------------XML DOM--------------------------------------
function addTR(){
//1.取三个框的值
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var age = document.getElementById("age").value;
//2.添加tr,td
var trObj = document.createElement("tr");
var tdUsername = document.createElement("td");
var tdEmail = document.createElement("td");
var tdAge = document.createElement("td");
var tdOp = document.createElement("td");
//3.添加td的内容
tdUsername.innerHTML=username;
tdEmail.innerHTML=email;
tdAge.innerHTML=age;
tdOp.innerHTML="<input type='button' value='删除' onclick='deleteRowss(this)'/>";
//4.搞关系
trObj.appendChild(tdUsername);
trObj.appendChild(tdEmail);
trObj.appendChild(tdAge);
trObj.appendChild(tdOp);

//5.把tr添加到表格中
document.getElementById("tabInfo").appendChild(trObj);

}
function deleteRowss(obj){
var trObjss = obj.parentNode.parentNode;//tr
trObjss.parentNode.removeChild(trObjss);
}
写法二：（推荐写法）
//---------------------HTML DOM---------------------------------
function addTR(){
//1.取三个框的值
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var age = document.getElementById("age").value;
//2.添加tr,td
var tabinfoss = document.getElementById("tabInfo");
//在表格中添加一行
var trss = tabinfoss.insertRow();
var tdUsernamess = trss.insertCell();
var tdEmailss = trss.insertCell();
var tdAgess = trss.insertCell();
var tdOpss = trss.insertCell();
//3.添加td的内容
tdUsernamess.innerHTML=username;
tdEmailss.innerHTML=email;
tdAgess.innerHTML=age;
tdOpss.innerHTML="<input type='button' value='删除' onclick='deleteRowss(this)'/>";

}
function deleteRowss(obj){
//1.得到表格
var tabinfoss = document.getElementById("tabInfo");

//2.找到当前行的索引 rowIndex
var rowindexss = obj.parentNode.parentNode.rowIndex;
//3.删除
tabinfoss.deleteRow(rowindexss);//当前行的索引
}

//--------------------------------------------------------------

写法三 ：IE中 貌似有问题
function addTR(){
//1.取三个框的值
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var age = document.getElementById("age").value;
//2.添加tr,td
var tabinfoss = document.getElementById("tabInfo");

tabinfoss.innerHTML+="<tr><td>"+username+"</td><td>"+email+"</td><td>"+age+"</td><td><input type='button' value='删除' onclick='deleteRowss(this)'/></td></tr>";
}

function deleteRowss(obj){
//1.得到表格
var tabinfoss = document.getElementById("tabInfo");

//2.找到当前行的索引 rowIndex
var rowindexss = obj.parentNode.parentNode.rowIndex;
//3.删除
tabinfoss.deleteRow(rowindexss);//当前行的索引
}

//-------------------------------------------------------------------HTML 部分---------------------------------------------------------------//

<body>
<table align="center" cellpadding="10" cellspacing="3" >
<tr>
<td>姓名：<input type="text" id="username"/></td>
<td>Email:<input type="text" id="email"/></td>
<td>年龄:<input type="text" id="age"/></td>
</tr>
<tr>
<td colspan="3" align="center"><input type="button" value="添加" onclick="addTR()"/></td>
</tr>
</table>

<br/>
<br/>
<br/>
<hr/>

<table id="tabInfo" align="center" width="500" border="1">
<tr>
<td>姓名</td>
<td>Email</td>
<td>年龄</td>
<td>操作</td>
</tr>

</table>

</body>

JS中的动态表格的更多相关文章

  1. 浅谈js中如何动态添加表头/表列/表格内容

    我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...

  2. Vue.js 中的动态路由

    静态路由是不可以传递参数的.需要传递参数得用到动态路由 那么如何将参数作为路由呢? //在参数名前面加上 : ,然后将参数写在路由的 path 内 routes: [ //将页面组件与path指令的路 ...

  3. JS中的动态合集与静态合集

    JS的动态合集 前言 DOM是JavaScript重要组成部分,在DOM中有三个特别的集合分别是NodeList(节点的集合),NamedNodeMap(元素属性的集合)和HTMLCollection ...

  4. JS控制的动态表格

    对应的js: function pccAddSignRow() { //读取最后一行的行号,存放在LearnTRLastIndex文本框中 var pccTRLastIndex = findObj(& ...

  5. js中 ajax动态新增节点无法触发点击事件

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件. 其实最简单的方法就是直接在标签中写onclick="",但是这样写有些场景的是实现不了的,最 ...

  6. js中关于动态添加事件，不能使用循环变量的问题

    在编写事件的时候,我们难免会遇到以下这种情况:<!DOCTYPE html><html lang="en"><head> <meta ch ...

  7. JS 中html 动态替换

    一.定义通用替换js函数,或调用JQuery验证的$.format函数: //----通用JS操作// var a = "我喜欢吃{0},也喜欢吃{1},但是最喜欢的还是{0},偶尔再买点{ ...

  8. js中创建table表格

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. JS动态引入js、CSS动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...

随机推荐

  1. Quartz2.0以上版本的单机和集群

    (一)Quartz单机 1.Quartz简介 Quartz是一个完全由java编写的开源作业调度框架,能实现业务的定时调度.Quartz主要有三个核心调度器.任务和触发器: ①任务-JobDetail ...

  2. Oracle数据字典

    数据字典-简介 Oracle数据字典的名称由前缀和后缀组成,使用下划线"_"连接,其代表的含义如下: ● DBA_:包含数据库实例的所有对象信息. ● V$_:当前实例的动态视图, ...

  3. Oracle数据库11g各版本介绍及功能比较

    .标准版和企 业版.所有这些版本都使用相同的通用代码库构建,这意味着企业的数据库管理软件可以轻松地从规模较小的单一处理器服务器扩展到多处理器服务器集 群,而无需更改一行代码.Oracle数据库11g企 ...

  4. JAVA NIO Buffer

    所谓的输入,输出,就是把数据移除或移入缓冲区.   硬件不能直接访问用户控件(JVM). 基于存储的硬件设备操控的是固定大小的数据块儿,用户请求的是任意大小的或非对齐的数据块儿.   虚拟内存:使用虚 ...

  5. mongodb基础篇

    一.  关于mongodb 两种非关系数据库 Redis:满足极高读写性能的Key-Value数据库 键值式储存,可以通过键快速查询到值. 内存数据库,类似于mencached.性能出色.容量低,不具 ...

  6. CentOS7 配置LAMP

    这两天要带新同事.没办法,只有现学现卖,又回到Linux的怀抱了.今晚想配置一下LAMP环境,但是之前用的6.6,今晚想闷声做大死,用一次7试试.网上找了很多教程,但是好像转载的都不负责任,有些到下一 ...

  7. C#基础---Attribute(标签） 和 reflect（反射) 应用二

    以前我有写过一篇有关,打标签和反射的应用,主要用于类中字段的验证.下面是连接 C#基础---Attribute(标签) 和 reflect(反射) 应用. 这个项目迭代发现公司项目里面发现老代码对业务 ...

  8. linux umount

    linux umount 提示＂device is busy＂ 终极解决方法 http://www.wisdr.com/news/20120621174117.htm 这里面的方法亲测可用. 小tip ...

  9. angularJS（3）

      angularJS(3) 一.angularJs的指令模型ng-model指令 ng-model 指令 绑定 HTML 元素 到应用程序数据. 为应用程序数据提供类型验证(number.email ...

  10. [No000090]C#捕获控制台(console)关闭事件及响应cmd快捷键

    捕获控制台(console)关闭事件: 1.Ctrl+C信号: 2.Ctrl+Break信号: 3.用户系统关闭Console时: 4.用户退出系统时: 5.系统将要关闭时: using System ...