<!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>

<body onload="setChild()"> <table width="200" id="tb" border="1">

<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、火狐)的更多相关文章

  1. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  2. 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

    编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...

  3. JQuery动态操作表格

    新人,小白一枚,刚刚参加工作,所以会在这里记录一些遇到的问题. 最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证. <!DOCTYPE html> <h ...

  4. Js动态操作表格

    HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...

  5. jquery动态表格，动态添加表格行

    转载收藏于:https://www.cnblogs.com/zhangqs008/archive/2013/05/09/3618459.html 效果图:   Html:<html> &l ...

  6. jquery动态合并表格行

    利用<td rowspan = "num"/>;原理来实现,其中num为要合并的行数. <!DOCTYPE html> <html> <h ...

  7. js回车动态添加表格，右键动态删除表格行

    <script type="text/javascript" language="javascript">//屏蔽浏览器右键function sto ...

  8. js 操作表格行数的删减

    沉溺了好几个月了,自从年假回来就一直在忙换工作的事情: 新环境.新同事,一如既往的工作, 那么闲话不多说,前两天师妹问我要一个类似于添加和删除的demo:闲暇时间我就参照一些代码写了一下, (发现有错 ...

  9. js/jq动态创建表格的行与列

    之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...

随机推荐

  1. Linux对于录音

    一.原理简介 在Linux下,记录--从dsp读取数据.播放--至dsp设备写入数据. 开发板採用声卡UDA1341实现音频编解码,完毕A/D和D/A转换,芯片UDA1341与CPU的连接图例如以下: ...

  2. 写得好 git 提交信息

    编写好 git 提交信息 提交信息 我们作出答复,更改将提交相关信息,这些信息通常被认为是重要的信息会小心留下应该离开,你为什么需要这个提交实例,提交解决任何问题. 我们需要良好的信息组织,虽然后来, ...

  3. JS如何判断包括IE11在内的IE浏览器

    原文:JS如何判断包括IE11在内的IE浏览器 今天碰到一个奇怪的问题,有一个页面,想指定用IE浏览器打开,在VS开发环境没有问题,但部署到服务器上,即使是用IE打开页面,还是提示"仅支持I ...

  4. ORACLE11G RAC 施加以分离不同的实例.TAF

    有套POS制 现在应用大量的,大量的数据,! 年前的交易在一定程度上的统计分析影响了额外的应用程序. 这两种应用分别OLTP和OLAP. 其实很多本项目具有的应用要求双方.  看了很多近期的其他系统, ...

  5. T4模版引擎之基础入门

    额,T4好陌生的名字,和NuGet一样很悲催,不为世人所熟知,却又在背后默默无闻的奉献着,直到现在我们项目组的人除了我之外,其它人还是对其豪无兴趣,基本上是连看一眼都懒得看,可怜的娃啊... T4(T ...

  6. myql_链接丢失异常_mybaits _等框架_报错_The last packet successfully

    mysql 8小时问题的解决方法 转发: 别看是英文 ,写的很好 ,才转 Use Hibernate + MYSQL database development, link timeout proble ...

  7. IronPython和C#交互

    IronPython和C#交互 IronPython是一个.NET平台上的Python实现,包括了完整的编译器.执行引擎与运行时支持,能够与.NET已有的库无缝整合到一起. IronPython已经很 ...

  8. Javascript闭包的一些研究

    原文:Javascript闭包的一些研究 本文不谈闭包的概念,因为概念容易把人搞晕,本文希望通过几个鲜活的例子来探究闭包的性质,相信对理解闭包会有所帮助. 程序1 var f = (function( ...

  9. 使用ArcGIS API for Silverlight 进行复合多条件空间查询

    原文:使用ArcGIS API for Silverlight 进行复合多条件空间查询 这两天帮网上认识的一个兄弟做了一个查询的示例,多多少少总结一下,在此和大家分享. 为什么说是复合多条件呢?因为进 ...

  10. UVa 740 - Baudot Data Communication Code

    称号:目前编码,他们shift键被按下,并提出,对应的两个编码,其中,2相应的编码shift操作. 给你适当的编码值.寻求相应的字符串. 分析:模拟.字符串. 简单题,标记shift的升降分类处理就可 ...