动态操作表格行(兼容IE、火狐)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">

var fChild;
//兼容IE、火狐浏览器
function setChild(){
  var table = document.getElementById("tb");
  //table.firstChild在IE下获取到TBODY,在火狐下获取不到
  fChild = table.firstChild.tagName=="TBODY"?table.firstChild:table;

}
//给表格动态添加行
function addRow(){
  var table = document.getElementById("tb");
  var tr=document.createElement("tr");//创建一个tr标签
  var td1 = document.createElement("td");//创建一个td标签(单元格)
  var text1 = document.createTextNode(document.getElementById("txt1").value);//创建一个文本节点
  td1.appendChild(text1);//将文本节点添加到td1单元格中
  var td2 = document.createElement("td");
  var text2 = document.createTextNode(document.getElementById("txt2").value);
  td2.appendChild(text2);
  tr.appendChild(td1);//将单元格添加到行中
  tr.appendChild(td2);
  fChild.appendChild(tr);//将行添加到表格中
}
//删除表格第一行
function delFirstRow(){
  var table = document.getElementById("tb");
  fChild.removeChild(fChild.firstChild);
}

//删除表格最后一行
function delLastRow(){
  var table = document.getElementById("tb");
  fChild.removeChild(fChild.lastChild);
}
//删除表格的指定行
function delRow(){
  var table = document.getElementById("tb");
  var rows = table.getElementsByTagName("tr");
  var count = parseInt(document.getElementById("txtDel").value);
  fChild.removeChild(rows[count-1]);
}
</script>

</head>

<tr>
<td>单元格内容</td>
<td>单元格内容</td>
</tr>
</table>
<hr />
单元格1：<input type="text" id="txt1"/>
单元格2：<input type="text" id="txt2"/>
<input type="button" onclick="addRow()" value="添加行"/>
<input type="button" onclick="delFirstRow()" value="删除第一行"/>
<input type="button" onclick="delLastRow()" value="删除最后一行"/><br />
删除第几行：<input type="text" id="txtDel"/>
<input type="button" onclick="delRow()" value="删除"/>
</body>
</html>

动态操作表格行(兼容IE、火狐)的更多相关文章

jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理
编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...
JQuery动态操作表格
新人,小白一枚,刚刚参加工作,所以会在这里记录一些遇到的问题. 最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证. <!DOCTYPE html> <h ...
Js动态操作表格
HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...
jquery动态表格，动态添加表格行
转载收藏于:https://www.cnblogs.com/zhangqs008/archive/2013/05/09/3618459.html 效果图: Html:<html> &l ...
jquery动态合并表格行
利用<td rowspan = "num"/>;原理来实现,其中num为要合并的行数. <!DOCTYPE html> <html> <h ...
js回车动态添加表格，右键动态删除表格行
<script type="text/javascript" language="javascript">//屏蔽浏览器右键function sto ...
js 操作表格行数的删减
沉溺了好几个月了,自从年假回来就一直在忙换工作的事情: 新环境.新同事,一如既往的工作, 那么闲话不多说,前两天师妹问我要一个类似于添加和删除的demo:闲暇时间我就参照一些代码写了一下, (发现有错 ...
js/jq动态创建表格的行与列
之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...

随机推荐

Redis使用总结
1.Redis安装 redis的安装非常的简单,而且Redis并不依赖其他环境和标准库,很容易上手,这可能也是它流行的一个原因.这里为了测试方便,用的都是windows 环境下测试.下载Windows ...
一、Owin Identity的使用
参照http://www.cnblogs.com/r01cn/p/5177708.html教程. 注意点: 1.Nuget包分别下载Microsoft.AspNet.Identity(Owin必须), ...
ARMv8学习 —— SP&lowbar;EL0和SP&lowbar;ELx
在AArch64状态下,SP对应的物理寄存器有如下四个(某一时刻只能对应下面其中一个): SP_EL0和SP_EL1 SP_EL2 SP_EL3 如何使用呢? 1.如果程序运行在EL0,那么使用的是S ...
根据某个字段去重根据另一个字段排序的一个SQL
背景:一张表有 name , crt_time , work_sts 三个字段这张表里存在这样的数据 'a', '2018-12-18 21:37:24', '未''a', '2018-12-19 ...
asp&period;net mvc5 安装
原文地址 http://docs.nuget.org/docs/start-here/using-the-package-manager-console 工具-->NuGet程序包管理器--&g ...
Blender 建模
1.多图层切换 Blender也有图层的概念,我们在一个图层上建立了一个模型,可以在另外一个图层新建一个独立的模型.界面底部包含了Layer切换按钮.如下图所示: 当前我们正在操作第一个图层,如果想在 ...
P1174 打砖块
P1174 打砖块普通分组背包:50pts 题解说的啥????(大雾) 看了半天 $s[0/1][i][j]$表示第$i$列用$j$发子弹,最后一发是1/否0打在该列上的价值 $f[0/1][i][ ...
word上传博客教程
目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...
vue学习笔记(五)：对于vuex的理解 + 简单实例
优点:通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护.使用vuex来引入外部状态管理,将业务逻辑切分到组件外,可以避免重复的从服务端抓取数据. 详情请参考官 ...
Django中的动态URL配置
举个例子,一家在线书店会为每一本书提供一个URL,如:/books/243/./books/81196/. 让我们创建第三个视图来显示当前时间和加上时间偏差量的时间,设计是这样的: /time/plu ...