JS中的动态表格
写法一：（有点啰嗦）
//--------------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中的动态表格的更多相关文章
- 浅谈js中如何动态添加表头/表列/表格内容
我想很多童鞋用js动态向表格中添加数据很熟悉,而且也觉得非常简单!是的,对于写页面的童鞋来说,最喜欢写查询的页面了,动态向表格绑定数据.用for循环就可以轻松搞定. 如果我们的业务需求有所变化,可能我 ...
- Vue.js 中的动态路由
静态路由是不可以传递参数的.需要传递参数得用到动态路由 那么如何将参数作为路由呢? //在参数名前面加上 : ,然后将参数写在路由的 path 内 routes: [ //将页面组件与path指令的路 ...
- JS中的动态合集与静态合集
JS的动态合集 前言 DOM是JavaScript重要组成部分,在DOM中有三个特别的集合分别是NodeList(节点的集合),NamedNodeMap(元素属性的集合)和HTMLCollection ...
- JS控制的动态表格
对应的js: function pccAddSignRow() { //读取最后一行的行号,存放在LearnTRLastIndex文本框中 var pccTRLastIndex = findObj(& ...
- js中 ajax动态新增节点无法触发点击事件
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件. 其实最简单的方法就是直接在标签中写onclick="",但是这样写有些场景的是实现不了的,最 ...
- js中关于动态添加事件，不能使用循环变量的问题
在编写事件的时候,我们难免会遇到以下这种情况:<!DOCTYPE html><html lang="en"><head> <meta ch ...
- JS 中html 动态替换
一.定义通用替换js函数,或调用JQuery验证的$.format函数: //----通用JS操作// var a = "我喜欢吃{0},也喜欢吃{1},但是最喜欢的还是{0},偶尔再买点{ ...
- js中创建table表格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- JS动态引入js、CSS动态创建script/link/style标签
一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...
随机推荐
- html img图片等比例缩放
在img标签里面只设置宽,不设置高,图片就会等比例缩放.
- lucene自定义过滤器
先介绍下查询与过滤的区别和联系,其实查询(各种Query)和过滤(各种Filter)之间非常相似,可以这样说只要用Query能完成的事,用过滤也都可以完成,它们之间可以相互转换,最大的区别就是使用过滤 ...
- redis数据结构存储SDS设计细节（redis的设计与实现笔记）
redis虽说是用C语言开发的,但是redis考虑了性能.安全性.效率性.功能等要,redis底层存储字符串实现,自己实现了名为简单动态字符串(Simple dynamic string)简称SDS的 ...
- Linq语法学习
关键词: select from where in into join on equals orderby descending DefaultIfEmpty() thenby submitChang ...
- linux文件系统体系结构 和 虚拟文件系统(VFS)
图 1. Linux 文件系统组件的体系结构 用户空间包含一些应用程序(例如,文件系统的使用者)和 GNU C 库(glibc),它们为文件系统调用(打开.读取.写和关闭)提供用户接口.系统调用接口的 ...
- 安卓使用SQlite3数据库无法id主键无法自动增加？不是的。
安卓使用SQlite3数据库无法id主键无法自动增加?不是的. 要这样写:id integer primary key ,要写integer而不是int所以会报错! http://blog.csdn. ...
- 【记录】Ubuntu下安装VirtualBox
之前换了新硬盘,重装了ubuntu,由于学习需要还是要装个虚拟机.以前用过VMWare真的是神卡,这次换VirtualBox,希望开源社区能给我带来曙光:) 添加VirtualBox的源并安装5.1版 ...
- font-size 兼容问题
早年~ 楔子 在为“我的抵扣券”添加 按钮时,为了将文字隐掉,给节点设置了“font-size:0;”,设置后刷一下浏览器,webkit下按钮掉下去了,而其他浏览器(包括IE6/7)都正常: 按理说 ...
- PHP 原创视频教程-网站开发新手视频教程
PHP 原创视频教程-网站开发新手视频教程 有偿招徒弟,,视频免费提供. 本视频教程,面向的是毫无经验的新手,快速上手的. 第一次做视频做的不好的,请各位看官多多包含. 第一部分,HTML 视频教程 ...
- JQuery Ajax调用asp.net后台方法
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法. 先来个简单的实例热热身吧. 1.无参数的方法调用 asp.net code: using System.Web.Scrip ...