写法一：（有点啰嗦）

//--------------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. SSIS 实例——将SQL获取的信息传递到Email中

    最近在为公司财务开发一个邮件通知时遇到了一个技术问题.原来我设计SSIS的是每天将ERP系统支付数据导出到财务支付平台后 Email 通知财务,然后财务到支付平台上进行支付操作.由于那个时候开发时间很 ...

  2. Hibernate 系列 04 - Hibernate 配置相关的类

    引导目录: Hibernate 系列教程 目录 前言: 通过上一篇的增删改查小练习之后,咱们大概已经掌握了Hibernate的基本用法. 我们发现,在调用Hibernate API的过程中,虽然Hib ...

  3. centos7中没有安装ifconfig命令的解决方法

    初装centos 7时,运行config报 command not found 错误,我在网上找了大量资料,下面的资料中查找原因和解决方式最详细,能很好的解决这个问题. ifconfig命令是设置或显 ...

  4. ASP.NET MVC 初体验

    MVC系列文章终于开始了,前段时间公司项目结束后一直在封装一个html+ashx+js+easyui的权限系统,最近差不多也完成了,迟些时候会分享源码给大家.当然这个MVC系列结束后如果时间允许还会另 ...

  5. 让OData和NHibernate结合进行动态查询

    OData是一个非常灵活的RESTful API,如果要做出强大的查询API,那么OData就强烈推荐了.http://www.odata.org/ OData的特点就是可以根据传入参数动态生成Ent ...

  6. python-open文件处理

    python内置函数open()用于打开文件和创建文件对象 语法 open(name[,mode[,bufsize]]) name:文件名 mode:指定文件的打开模式 r:只读 w:写入 a:附加 ...

  7. k近邻算法(knn)的c语言实现

    最近在看knn算法,顺便敲敲代码. knn属于数据挖掘的分类算法.基本思想是在距离空间里,如果一个样本的最接近的k个邻居里,绝大多数属于某个类别,则该样本也属于这个类别.俗话叫,"随大流&q ...

  8. Nginx+PHP On windows

    前期准备 Nginx 下载 http://nginx.org/   PHP下载 PHP Windows binaries       问题 问题1: opened a DOS window to la ...

  9. Stack操作，栈的操作。

    栈是先进后出,后进先出的操作. 有点类似浏览器返回上一页的操作, public class Stack<E>extends Vector<E> 是vector的子类. 常用方法 ...

  10. [LeetCode] Generate Parentheses 生成括号

    Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...