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

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支持存在问题,没有提交页面的情况下这是不应该发生的。

(0)

相关推荐

  • 动态生成table并实现分页效果心得分享

    前台代码: 复制代码 代码如下: <table style="width: 100%;"> <tr> <td> 搜索字: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="搜索&

  • js动态给table添加/删除tr的方法

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author"

  • 通过js动态操作table(新增,删除相关列信息)

    1.取得table对象 var objTable=document.getElementById( "tb_visitor" ); 2.新增一行 var objTempRow = objTable.rows[0]; //取得模板行 var objNewRow = objTable.insertRow( objTable.rows.length ); objNewRow.id = objTable.rows.length-1; //添加一行的相关信息 for ( var i=0 ; i

  • JS动态创建Table,Tr,Td并赋值的具体实现

    成果库修改:      要求主题列表随成果类型改变而改变      网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合--动态创建/编辑Table      概要代码如下:JS  复制代码 代码如下: //动态获取主题数据 function getzts(){     parentId = document.getElementById("bselect1").value;     if(parentId!=""){        

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

    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

  • js 操作table之 移动TR位置 兼容FF 跟 IE

    js操作table之 移动TR位置 兼容FF 跟 IE var mousePos; function Up_Move(obj){ try{ if(document.all){ document.getElementById('show_input').style.top = mousePos.y document.getElementById('show_input').style.left = mousePos.x }else{ document.getElementById('show_in

  • java前端javascript生成动态表格示例演示

    目录 前言 案例分析 代码 动图演示 结语 前言 动态生成表格是前端开发中非常重要的内容,常常是后端返回数据(大多是json类型),我们前端通过js循环来动态添加,所以这部分内容是十分重要的,今天我就来写写这部分内容,其实也很简单的,仔细看哦!!! 案例分析 因为里面的学生数据都是动态的,我们需要 js 动态生成.这里我们模拟数据,自己定义好数据.数据我们采取对象形式存储.所有的数据都是放到 tbody 里面的行里面.因为行很多,我们需要循环创建多个行(对应多少人). 代码 <!DOCTYPE

  • element表格行列的动态合并示例详解

    目录 效果图 代码详解 数据结构 行合并 列合并 完整代码+注释 效果图 合并行 合并列 element的table提供了合并行或者列的方法,并且有一个示例,传送入口:element.eleme.cn/#/zh-CN/com… 但是实际应用中,后台数据的返回格式和指定合并肯定是动态且没有规律的.element的示例过于简单,并且也没有什么太多的解释.实操中就碰到了这个问题.现在记录下来. 代码详解 实操中,需要合并的代码通常就是子数据需要进行合并,因为后台返回的格式都是父数据中包裹着子数据,这种

  • javascript 兼容FF的onmouseenter和onmouseleave的代码

    IE下有 onmouseenter和onmouseleave来解决. 可惜ff就没有.  我再想 , 为什么这么好的功能,为什么ff不引用呢? 还有ie中的onpropertychange  ,哎,ff中都没有... 对比例子中引入了一段js ,来兼容FF的onmouseenter和onmouseleave. : 复制代码 代码如下: var xb = {     evtHash: [], ieGetUniqueID: function(_elem)     {         if (_ele

  • js离开或刷新页面检测(且兼容FF,IE,Chrome)

    复制代码 代码如下: <!DOCTYPE html><html><head><script>  function closeIt()  {    return "Any string value here forces a dialog box to \n" +          "appear before closing the window.";  }  window.onbeforeunload = close

  • php动态生成函数示例

    以下就是php动态生成函数示例,示例中用到了eval函数,我感觉如果服务器上允许用户运行这样的函数是非常危险的 复制代码 代码如下: <?$a['a']=1;$a['b']=1;$a['c']=1;$str="function a(){global \$a;if(\$a['a']==1 && \$a['b']==1 && \$a['c']==1){return 'OK';}else{return 'ERR';}}";eval($str);if(a(

  • vue+elementUI封装一个根据后端变化的动态table(完整代码)

    实现了自动生成和插槽两个方式,主要把 el-table 和el-pagination封装在一起 效果图: 使用组件,启用自动生成 :auto="true" 自动生成-编辑 (包括请求已经实现了)新增和删除也是一样 ps:如有额外的按钮可以用插槽实现 查询的时候,只需要多返回下面数据,就可以自动生成列,和对应操作按钮 目录 table.vue <template> <div> <el-row v-if="auto"> <el-

  • js导出table到excel同时兼容FF和IE示例

    复制代码 代码如下: <pre name="code" class="html">前台调用(第一个参数是table的id): <input value="导出" type="button" /> function toExcel(inTblId, inWindow) { if ($.browser.msie) { //如果是IE浏览器 try { var allStr = ""; v

  • javascript:FF/Chrome与IE动态加载元素的区别说明

    复制代码 代码如下: <!doctype html><html><head> <title>ff 与 ie 动态加载元素的区别</title> <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <style type="text/css">  li{margin:0;p

随机推荐