动态操作表格行(兼容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>
<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、火狐)的更多相关文章
- 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.删除列, ...
随机推荐
- (大数据工程师学习路径)第四步 SQL基础课程----约束
一.简介 约束是一种限制,它通过对表的行或列的数据做出限制,来确保表的数据的完整性.唯一性.本节实验就在操作中熟悉MySQL中的几种约束. 二.内容 1.约束分类 听名字就知道,约束是一种限制,它通过 ...
- android获取ip和本机的物理地址
<span style="font-size:18px;">/** * 获取ip * * @return */ public static String getLoca ...
- cocos2d-x 发动机分析:程序如何开始和结束?
原创地址:http://game.dapps.net/gamedev/game-engine/9515.html 感谢原创分享! 怎么样使用 Cocos2d-x 高速开发游戏,方法非常easy,你能够 ...
- eclipse 配置android sdk和maven
首先下载 ADT-22.2.0.rar eclipse-jee-kepler-R-win32-x86_64.zip android SDK4.2.zip 分别解压在一个盘 将ADT里面的两个目录内容相 ...
- URAL 1727. Znaika's Magic Numbers(数学 vector)
主题链接:http://acm.timus.ru/problem.aspx?space=1&num=1727 1727. Znaika's Magic Numbers Time limit: ...
- android layout物业介绍
android:id 为控件指定对应的ID android:text 指定控件其中显示的文字,须要注意的是,这里尽量使用strings.xml文件其中的字符串 android:gravity 指定Vi ...
- cocos2d-x 3.0rc1 创建project
1.进入bin文件夹 2.打开CMD命令行窗口中输入命令,然后按Enter(-p 包名 -l 语言 -d 新project存储路径)
- C#将Word,Excel与Html,PDF互转
public class OfficeHelper { /// <summary> /// word转成html /// </summary> /// <param na ...
- uva757 - Gone Fishing(馋)
题目:uva757 - Gone Fishing(贪心) 题目大意:有N个湖泊仅仅有一条通路将这些湖泊相连. 每一个湖泊都会给最開始5分钟间隔内能够调到的鱼(f).然后给每过5分钟降低的鱼的数量(d) ...
- Python开发环境的搭建(win7)
一个.安装和配置Python 事实上,在开发python最好ubuntu环境.简单和易于扩展每个package. 在谈到如何win7建筑物Python开发环境. 因为python十字-platform ...