兼容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 相关文章推荐
基于jQuery实现的菜单切换效果
Oct 16 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
js 实现省市区三级联动菜单效果
Feb 20 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
javascript随机变色实例代码
Oct 15 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
Oct 01 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
解决中英文字符串长度问题函数
2007/01/16 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
js查错流程归纳
2012/05/04 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
Python脚本实现代码行数统计代码分享
2015/03/10 Python
Python实现高效求解素数代码实例
2015/06/30 Python
Python入门之后再看点什么好?
2018/03/05 Python
python 定时器,实现每天凌晨3点执行的方法
2019/02/20 Python
3种python调用其他脚本的方法
2020/01/06 Python
新手学python应该下哪个版本
2020/06/11 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
应届生幼儿园求职信
2013/11/12 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
HR求职自荐信范文
2014/06/21 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
给客户的检讨书
2014/12/21 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
五一放假通知怎么写
2015/08/18 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书