兼容FF和IE的动态table示例自写


Posted in Javascript onOctober 21, 2013

HTML的table结构如下:

<table id="Dy_table" width="760" cellpadding="0" style="border-top: solid 1px #9cf" 
class="tableStyle1" cellspacing="0"> 
<tr> 
<th style="width: 40px">序号<input id="pageRows" name="pageRows" type="hidden" value="1" /> 
<input type="hidden" name="HF_tableRows" id="HF_tableRows" value="1" /></th> 
<th style="width:120px">零件型号</th> 
<th style="width:130px">零件名称</th> 
<th style="width:45px">数量</th> 
<th style="width:70px">无税价</th> 
<th style="width:70px">含税价</th> 
<th style="width:70px">税额</th> 
<th style="width:70px">货款</th> 
<th style="width:70px">整额</th> 
<th style="width:60px">操作</th> 
</tr> 
<tr> 
<td>1</td> 
<td><input name='Dy_text_ljh' style='width: 110px' ondblclick='selectLj(this)' type='text' 
readonly='true' /><input name='Dy_hd_cpdm' type='hidden' onpropertychange='textChange(this)' 
title='产品代码' /><input name='Dy_hd_mxid' type='hidden' value='' title='该行的Id,用来修改和删除' /><input 
name='Dy_hd_rowState' type='hidden' value='1' title='该行的状态' /><input name='Dy_hf_ljgg' 
type='hidden' value='0' title='零件规格' /></td> 
<td><input name='Dy_text_cpmc' style='width: 120px' readonly='true' type='text' /></td> 
<td><input name='Dy_text_sl' value='1' onkeypress='onlyNumberIn1(this)' onkeyup='textChange(this)' 
style='width: 35px' type='text' /></td> 
<td><input name='Dy_text_wsj' style='width: 60px' type='text' readonly='true' /></td> 
<td><input name='Dy_text_hsj' style='width: 60px' type='text' readonly='true' /></td> 
<td><input name='Dy_text_se' style='width: 60px' type='text' readonly='true' /></td> 
<td><input name='Dy_text_hk' style='width: 60px' type='text' readonly='true' /></td> 
<td><input name='Dy_text_ze' style='width: 60px' type='text' readonly='true' /></td> 
<td><input name='del' type='button' value='删 除' class='input-button' onclick='delnode1(this)' /></td> 
</tr> 
</table>

js代码如下:
function addEvent (o,c,h){ 
if(o.attachEvent){ 
o.attachEvent('on'+c,h); 
}else{ 
o.addEventListener(c,h,false); 
} 
return true; 
} 
var selectRow;//页面级js变量,用来存被选中的行,好在弹出窗口中对该行赋值 
function addnode(){ 
var table=document.getElementById("Dy_table"); 
var tr=table.rows[1].cloneNode(true); 
for(var i=1;i<tr.childNodes.length-1;i++){ 
for(var p=0;p<tr.childNodes[i].getElementsByTagName("input").length;p++){ 
if(tr.childNodes[i].getElementsByTagName("input")[p].name=="Dy_hd_rowState")//行状态特殊对待 
tr.childNodes[i].getElementsByTagName("input")[p].value="1"; 
else 
tr.childNodes[i].getElementsByTagName("input")[p].value=""; 
} 
} 
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[1].value;//用户可见的行数 
tr.firstChild.innerHTML=parseInt(rowCount)+1; 
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount)+1;//可见行数+1 
table.rows[0].cells[0].getElementsByTagName("input")[0].value = table.rows.length;//总行数,包含隐藏的 
var tbody=table.getElementsByTagName("tbody"); 
if(tbody!=null){ 
tbody[0].appendChild(tr); 
}else 
table.appendChild(tr); 
} 
//删除时的事件 
function delnode(){ 
var table=document.getElementById("Dy_table"); 
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[1].value;//用户可见的行数 
var row;//获取最后一个可见的row 
for( var i=table.rows.length-1; i>=0 ;i--){ 
if(table.rows[i].style.display!="none") 
{ 
row=table.rows[i]; 
break; 
} 
} 
var rowId=row.cells[1].getElementsByTagName("input")[2].value; 
if( rowCount > 1 ){ 
if(rowId=="")//新增的行未写入数据库时,直接删除 
{ 
var tbody=table.getElementsByTagName("tbody"); 
if(tbody!=null){ 
tbody[0].removeChild(row); 
}else 
table.removeChild(row); 
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1; 
} 
else//需要从数据库删除的,置上删除标记 
{ 
row.style.display="none"; 
row.cells[1].getElementsByTagName("input")[3].value = "2"; 
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount)-1; 
} 
}else{ 
if(rowId == ""){//新增的行未写入数据库时,清空 
row.cells[1].getElementsByTagName("input")[0].value=""; 
row.cells[1].getElementsByTagName("input")[1].value=""; 
row.cells[1].getElementsByTagName("input")[2].value=""; 
row.cells[1].getElementsByTagName("input")[3].value=""; 
row.cells[1].getElementsByTagName("input")[4].value=""; 
row.cells[2].getElementsByTagName("input")[0].value=""; 
row.cells[3].getElementsByTagName("input")[0].value="1"; 
row.cells[4].getElementsByTagName("input")[0].value=""; 
row.cells[5].getElementsByTagName("input")[0].value=""; 
row.cells[6].getElementsByTagName("input")[0].value=""; 
row.cells[7].getElementsByTagName("input")[0].value=""; 
row.cells[8].getElementsByTagName("input")[0].value=""; 
}else{//需要从数据库删除的,置上删除标记 
row.style.display="none"; 
row.cells[1].getElementsByTagName("input")[3].value = "2"; 
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1; 
addnode(); 
} 
} 
setClf(); 
} 
//删除时的事件 
function delnode1(o){ 
var tr=o.parentNode.parentNode; 
var table=document.getElementById("Dy_table"); 
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[1].value;//用户可见的行数 
var rowId=tr.cells[1].getElementsByTagName("input")[2].value; 
if( rowCount > 1 ){ 
if(rowId=="")//新增的行未写入数据库时,直接删除 
{ 
var tbody=table.getElementsByTagName("tbody"); 
if(tbody!=null){ 
tbody[0].removeChild(tr); 
}else 
table.removeChild(tr); 
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1; 
} 
else 
{ 
tr.style.display="none"; 
tr.cells[1].getElementsByTagName("input")[3].value = "2"; 
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1; 
} 
}else{ 
if(rowId==""){//新增的行未写入数据库时,直接清空 
tr.cells[1].getElementsByTagName("input")[0].value=""; 
tr.cells[1].getElementsByTagName("input")[1].value=""; 
tr.cells[1].getElementsByTagName("input")[2].value=""; 
tr.cells[1].getElementsByTagName("input")[3].value=""; 
tr.cells[1].getElementsByTagName("input")[4].value=""; 
tr.cells[2].getElementsByTagName("input")[0].value=""; 
tr.cells[3].getElementsByTagName("input")[0].value="1"; 
tr.cells[4].getElementsByTagName("input")[0].value=""; 
tr.cells[5].getElementsByTagName("input")[0].value=""; 
tr.cells[6].getElementsByTagName("input")[0].value=""; 
tr.cells[7].getElementsByTagName("input")[0].value=""; 
tr.cells[8].getElementsByTagName("input")[0].value=""; 
}else{//需要从数据库删除的,置上删除标记 
tr.style.display="none"; 
tr.cells[1].getElementsByTagName("input")[3].value = "2"; 
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1; 
addnode(); 
} 
} 
//以下循环用于从中间删除时更新表格行号 
for( var i= 1,p = 1; i < table.rows.length ;i++){ 
if(table.rows[i].style.display!="none") 
{ 
table.rows[i].cells[0].innerHTML = p; 
p++; 
} 
} 
setClf(); 
} 
//修改时发生的事件,改变行状态 
function textChange(o){ 
var tr=o.parentElement.parentElement; 
if(o.parentElement.parentElement.parentElement==null)return;//如果是新增加的行则返回 
var rowState = tr.cells[1].getElementsByTagName("input")[3].value; 
if( rowState == "1") 
return; 
else 
tr.cells[1].getElementsByTagName("input")[3].value = "3"; 
setClf(); 
} 
//提交前验证数据,保证没有重复的行 
function checkSameData(){ 
var table=document.getElementById("Dy_table"); 
for( var i= 1; i < table.rows.length ;i++){ 
if(table.rows[i].style.display == "none"||table.rows[i].cells[1].getElementsByTagName("input")[1].value=="") continue; 
for( var p= i + 1; p < table.rows.length ;p++){ 
if(table.rows[p].style.display == "none") continue; 
if(table.rows[i].cells[1].getElementsByTagName("input")[1].value.replace(/\s+$/g,"") == 
table.rows[p].cells[1].getElementsByTagName("input")[1].value.replace(/\s+$/g,"")) 
{alert("零件部分存在重复的项,不能保存!");return false;} 
} 
} 
return true; 
} 
var dialogWin;//零件窗口是否打开 
//选零件 
function selectLj(o){ 
if(dialogWin == null){ 
selectRow = o.parentNode.parentNode;//将行赋值给全局变量 
var cpxh = selectRow.cells[1].getElementsByTagName("input")[0].value; 
dialogWin = winOpen('selectLj.aspx?ljh='+cpxh); 
// window.open("../jddgl/Select_lj.aspx?ljh=" + cpxh,window, 
// "center:yes;dialogWidth:600px;dialogHeight:400px;help:no;status:no;"); 
} 
} 
function winOpen(url){ 
return window.open(url,'selectLj','resizable=1,status=0,menubar=0,scrollbars=1,height=400px,width=600px'); 
} //计算table内费用 
function setClf(){}

这算是对之前写的动态增加表格的改进,之前那个实在是学习了js没多久而作的失败作品。现在这个总算是可以兼容FF和IE了。在兼容的过程中,没少看标准dom规范,提高了不少知识,js操作dom翻看ms的DHTML手册的时候要注意它里面提到的方法和属性是不是标准的,最好用标准的。

此动态table只要HTML里定好了table就可以动态的增减,不用关心它有多少个td,注意在第二个td里面加上相关的input hidden。动态增删只是一个表面的功能,这个table和dataset一样具有一个行状态,用行状态可以在服务器端对数据进行更新、删除和新增。1新增,2删除,3修改。只是用弹出窗口在FF和IE7下效果不行,不知道用iframe效果怎么样。

IE下对于clone出来的tr不能通过cells来获取td的集合,FF下则是可以。由于tr内有input用了onpropertychange事件,在去掉新增的tr内input值的时候也会触发,所以在这个事件里用一个if排除了这种情况。浏览器的兼容还真是有些麻烦。FF下面还存在一个问题,从没有提交页面的情况下,FF重新载入页面的时候,服务器端控件的值会被保存下来,而IE下则是真的重新载入,页面上的任何值都不会保留。FF的这个保存服务器控件值的行为应该是它对asp.net支持存在问题,没有提交页面的情况下这是不应该发生的。

Javascript 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
use jscript Create a SQL Server database
Jun 16 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 Javascript
详解vue 命名视图
Aug 14 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 #Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 #Javascript
JS中的this变量的使用介绍
Oct 21 #Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 #Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 #Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 #Javascript
JS操作Cookie写入和读取实例代码
Oct 20 #Javascript
You might like
松下Panasonic RF-B65电路分析
2021/03/02 无线电
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
JS查看对象功能代码
2008/04/25 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
vue上传图片组件编写代码
2017/07/26 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
Python splitlines使用技巧
2008/09/06 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
十八大闭幕感言
2014/01/22 职场文书
导购员的岗位职责
2014/02/08 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server