兼容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 相关文章推荐
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 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
是否存在第一台收音机的说法
2021/03/01 无线电
深入php处理整数函数的详解
2013/06/09 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
CI框架附属类用法分析
2018/12/26 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
js数据类型检测总结
2018/08/05 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
Python设计模式之单例模式实例
2014/04/26 Python
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
干部行政关系介绍信
2014/01/17 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
离婚财产分配协议书
2014/10/21 职场文书
会计工作态度自我评价
2015/03/06 职场文书
房屋产权证明书
2015/06/19 职场文书
情况说明书怎么写
2015/10/08 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript