100字范文，内容丰富有趣，生活中的好帮手！
100字范文XML网站地图
全站
首页 50字 100字 200字 300字 400字 500字 600字 700字 800字 900字 1000字 1200字 1500字
推荐专题：
100字范文 > 兼容FF和IE的动态table示例自写【javascript】

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

时间：2018-09-07 18:50:29

相关推荐

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

web前端|js教程

动态增加,动态table

web前端-js教程

HTML的table结构如下：

在线答题 php 源码,装ubuntu时候联网,tomcat8下载与配置,python爬虫解析页面,php云招聘人才系统怎么样,seo锚链接lzw

<table width="760" cellpadding="0"

class="tableStyle1" cellspacing="0">

序号

零件型号

零件名称

数量

无税价

含税价

税额

货款

整额

操作

1

<input name=Dy_text_ljh ondblclick=selectLj(this) type= ext

readonly= rue /><input name=Dy_hd_cpdm type=hidden onpropertychange= extChange(this)

title=产品代码 /><input

name=Dy_hd_rowState type=hidden value=1 title=该行的状态 /><input name=Dy_hf_ljgg

type=hidden value= title=零件规格 />

<input name=Dy_text_sl value=1 onkeypress=onlyNumberIn1(this) onkeyup= extChange(this)

style=width: 35px type= ext />

js代码如下：

cad提取坐标的vba源码,ubuntu配置安装源,tomcat和jdk不匹配,爬虫人ufo,网页监控系统php,皇姑区运营抖音seo优化代理商lzw

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, esizable=1,status=0,menubar=0,scrollbars=1,height=400px,width=600px);

}

//计算table内费用

function setClf(){}

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

个人发卡网代理源码,ubuntu查询usb数据,twitter爬虫官方包,php总账,阜阳seo团队lzw

此动态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的这个保存服务器控件值的行为应该是它对支持存在问题，没有提交页面的情况下这是不应该发生的。

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法，并不表明网站立场。
相关阅读
JAVASCRIPT IE 与 FF中兼容问题小结【javascript】

JAVASCRIPT IE 与 FF中兼容问题小结【javascript】

2023-02-22

javascript下IE与FF兼容函数收集【javascript】

javascript下IE与FF兼容函数收集【javascript】

2022-08-13

JAVASCRIPT IE 与 FF 中兼容写法记录

JAVASCRIPT IE 与 FF 中兼容写法记录

2021-07-26

javascript读写XML实现广告轮换(兼容IE FF)【javascript】

javascript读写XML实现广告轮换(兼容IE FF)【javascript】

2020-03-16

扩展阅读

Chromium Edge中的IE兼容模式 与我们设想的有些不一样

javascript打开word文档预览操作示例「非下载」

IE工程师简历示例

雅思小作文范文 table

Table Talk英语美文

My Table Lamp作文

最近发布
小学生节日日记100字：端午节日记端午节日记

小学生节日日记100字：端午节日记端午节日记

2024-09-05

今天是植树节小学作文100字植树节作文

今天是植树节小学作文100字植树节作文

2024-09-05

道德演讲稿100字(汇总11篇)

道德演讲稿100字(汇总11篇)

2024-09-05

高三毕业生的 heartfelt 感悟与寄语：20篇精选100字感言

高三毕业生的 heartfelt 感悟与寄语：20篇精选100字感言

2024-09-05

高科技的利与弊：技术进步带来的机遇与挑战

高科技的利与弊：技术进步带来的机遇与挑战

2024-09-05

叶叙100字作文素材大全

叶叙100字作文素材大全

2024-09-05

推荐专题
观察日记100字大全 100在田字格怎么写 炒鸡蛋日记100字 职高自我鉴定100字 开学了的作文100字 牛顿英文简介100字 议论文素材100字左右 逛街日记100字 日记初中100字 描写猫的作文100字 保护环境的日记100字 去爬山日记100字 泰山简介100字 我的奶奶100字作文 100百字作文
猜你喜欢：
国庆节的作文100字 好词好段100字 观潮作文100字 美丽的春天作文100字 养花作文100字 有趣的游戏100字 小蚂蚁作文100字 收玉米作文100字 100字英语作文带翻译 少数民族简介100字 福字的100种写法 国庆节的日记100字 歌颂祖国100字 写景好段100字左右 美甲评价100字复制 骆驼祥子小传100字 睡前小故事100字 社会实践作文100字 感恩的故事100字左右 读书感受100字 乐观的事实论据100字 日行一善作文100字 优秀小学生简介100字 成语小故事100字左右 团支部简介100字范文 二年级暑假计划100字 课余生活100字 我的生日日记100字 地球简介100字 餐厅好评语录100字
展开

100字范文 免责声明© 2024 All Rights Reserved.

湘ICP备2024057051号网站地图XML

© 2024 All Rights Reserved.

100字范文 免责声明