兼容FF和IE的動(dòng)態(tài)table示例自寫(xiě)
<table id="Dy_table" width="760" cellpadding="0" style="border-top: solid 1px #9cf"
class="tableStyle1" cellspacing="0">
<tr>
<th style="width: 40px">序號(hào)<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">零件型號(hào)</th>
<th style="width:130px">零件名稱</th>
<th style="width:45px">數(shù)量</th>
<th style="width:70px">無(wú)稅價(jià)</th>
<th style="width:70px">含稅價(jià)</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='產(chǎn)品代碼' /><input name='Dy_hd_mxid' type='hidden' value='' title='該行的Id,用來(lái)修改和刪除' /><input
name='Dy_hd_rowState' type='hidden' value='1' title='該行的狀態(tài)' /><input name='Dy_hf_ljgg'
type='hidden' value='0' title='零件規(guī)格' /></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;//頁(yè)面級(jí)js變量,用來(lái)存被選中的行,好在彈出窗口中對(duì)該行賦值
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")//行狀態(tài)特殊對(duì)待
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;//用戶可見(jiàn)的行數(shù)
tr.firstChild.innerHTML=parseInt(rowCount)+1;
table.rows[0].cells[0].getElementsByTagName("input")[1].value = parseInt(rowCount)+1;//可見(jiàn)行數(shù)+1
table.rows[0].cells[0].getElementsByTagName("input")[0].value = table.rows.length;//總行數(shù),包含隱藏的
var tbody=table.getElementsByTagName("tbody");
if(tbody!=null){
tbody[0].appendChild(tr);
}else
table.appendChild(tr);
}
//刪除時(shí)的事件
function delnode(){
var table=document.getElementById("Dy_table");
var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[1].value;//用戶可見(jiàn)的行數(shù)
var row;//獲取最后一個(gè)可見(jiàn)的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=="")//新增的行未寫(xiě)入數(shù)據(jù)庫(kù)時(shí),直接刪除
{
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//需要從數(shù)據(jù)庫(kù)刪除的,置上刪除標(biāo)記
{
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 == ""){//新增的行未寫(xiě)入數(shù)據(jù)庫(kù)時(shí),清空
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{//需要從數(shù)據(jù)庫(kù)刪除的,置上刪除標(biāo)記
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();
}
//刪除時(shí)的事件
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;//用戶可見(jiàn)的行數(shù)
var rowId=tr.cells[1].getElementsByTagName("input")[2].value;
if( rowCount > 1 ){
if(rowId=="")//新增的行未寫(xiě)入數(shù)據(jù)庫(kù)時(shí),直接刪除
{
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==""){//新增的行未寫(xiě)入數(shù)據(jù)庫(kù)時(shí),直接清空
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{//需要從數(shù)據(jù)庫(kù)刪除的,置上刪除標(biāo)記
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();
}
}
//以下循環(huán)用于從中間刪除時(shí)更新表格行號(hào)
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();
}
//修改時(shí)發(fā)生的事件,改變行狀態(tài)
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();
}
//提交前驗(yàn)證數(shù)據(jù),保證沒(méi)有重復(fù)的行
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("零件部分存在重復(fù)的項(xiàng),不能保存!");return false;}
}
}
return true;
}
var dialogWin;//零件窗口是否打開(kāi)
//選零件
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');
}
//計(jì)算table內(nèi)費(fèi)用
function setClf(){}
這算是對(duì)之前寫(xiě)的動(dòng)態(tài)增加表格的改進(jìn),之前那個(gè)實(shí)在是學(xué)習(xí)了js沒(méi)多久而作的失敗作品?,F(xiàn)在這個(gè)總算是可以兼容FF和IE了。在兼容的過(guò)程中,沒(méi)少看標(biāo)準(zhǔn)dom規(guī)范,提高了不少知識(shí),js操作dom翻看ms的DHTML手冊(cè)的時(shí)候要注意它里面提到的方法和屬性是不是標(biāo)準(zhǔn)的,最好用標(biāo)準(zhǔn)的。
此動(dòng)態(tài)table只要HTML里定好了table就可以動(dòng)態(tài)的增減,不用關(guān)心它有多少個(gè)td,注意在第二個(gè)td里面加上相關(guān)的input hidden。動(dòng)態(tài)增刪只是一個(gè)表面的功能,這個(gè)table和dataset一樣具有一個(gè)行狀態(tài),用行狀態(tài)可以在服務(wù)器端對(duì)數(shù)據(jù)進(jìn)行更新、刪除和新增。1新增,2刪除,3修改。只是用彈出窗口在FF和IE7下效果不行,不知道用iframe效果怎么樣。
IE下對(duì)于clone出來(lái)的tr不能通過(guò)cells來(lái)獲取td的集合,F(xiàn)F下則是可以。由于tr內(nèi)有input用了onpropertychange事件,在去掉新增的tr內(nèi)input值的時(shí)候也會(huì)觸發(fā),所以在這個(gè)事件里用一個(gè)if排除了這種情況。瀏覽器的兼容還真是有些麻煩。FF下面還存在一個(gè)問(wèn)題,從沒(méi)有提交頁(yè)面的情況下,F(xiàn)F重新載入頁(yè)面的時(shí)候,服務(wù)器端控件的值會(huì)被保存下來(lái),而IE下則是真的重新載入,頁(yè)面上的任何值都不會(huì)保留。FF的這個(gè)保存服務(wù)器控件值的行為應(yīng)該是它對(duì)asp.net支持存在問(wèn)題,沒(méi)有提交頁(yè)面的情況下這是不應(yīng)該發(fā)生的。
相關(guān)文章
webpack打包時(shí)如何修改文件名的實(shí)現(xiàn)示例
本文主要介紹了webpack打包時(shí)如何修改文件名的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06使用ajax的post同步執(zhí)行(實(shí)現(xiàn)方法)
下面小編就為大家分享一篇使用ajax的post同步執(zhí)行(實(shí)現(xiàn)方法),具有很好的參考價(jià)值,希望對(duì)大家有所幫助2017-12-12JavaScript?canvas實(shí)現(xiàn)字符雨效果
這篇文章主要為大家詳細(xì)介紹了JavaScript?canvas實(shí)現(xiàn)字符雨效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06Uncaught?SyntaxError:Unexpected?token?'<'?(
這篇文章主要為大家介紹了JS判斷趨近于直線的多邊形(退化多邊形)實(shí)例探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01JavaScript實(shí)現(xiàn)梯形乘法表的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)梯形乘法表的方法,涉及基本javascript結(jié)合表格操作的技巧,需要的朋友可以參考下2015-04-04JS截取url中問(wèn)號(hào)后面參數(shù)的值信息
JS截取url獲取一些信息類似的文章可以在網(wǎng)上找很多,本文在重復(fù)講述一遍,有不會(huì)的朋友可以鞏固一下2014-04-04JS根據(jù)Unix時(shí)間戳顯示發(fā)布時(shí)間是多久前【項(xiàng)目實(shí)測(cè)】
小編最近在實(shí)現(xiàn)這樣的需求類似微信朋友圈顯示發(fā)布時(shí)間為距離當(dāng)前時(shí)間多久之前這樣的功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2019-07-07用Javascript判斷圖片是否存在,不存在則顯示默認(rèn)圖片的代碼
用Javascript判斷圖片是否存在,不存在則顯示默認(rèn)圖片的代碼,需要的朋友可以參考下。2007-03-03