FFとIEに対応した動的table例の自作
11385 ワード
HTMLのtable構造は以下の通りです.
jsコードは以下の通りです.
これは前に書いたダイナミックな表の改善であり、以前はjsを勉強して間もなく失敗した作品だった.これでやっとFFとIEの両立ができました.互換性の過程の中で、少なく標準dom規範を見ていないで、多くの知識を高めて、jsはdomを操作してmsのDHTMLマニュアルをめくる時、その中で言及した方法と属性が標準的ではないことに注意して、最も標準的なものを使うほうがいいです.
このダイナミックtableはHTMLでtableが決まっていれば動的に増減できるので、tdがどれだけあるか気にしないで、2番目のtdに関連するinput hiddenを加えることに注意してください.動的削除は表面的な機能にすぎず、このtableはdatasetと同様に行状態を有し、行状態でサーバ側でデータを更新、削除、新規化することができる.1新規、2削除、3修正.ただ、ポップアップウィンドウでFFとIE 7では効果が出ないので、iframeでは効果がわかりません.
IEではcloneから出たtrに対してcellsでtdの集合を取得することはできず,FFでは可能である.tr内にinputがonpropertychangeイベントを使用しているため,新規のtr内input値を削除する際にもトリガーされるため,このイベントではifでこの状況を排除した.ブラウザの互換性は本当に面倒です.FFの下には、ページがコミットされていない場合、FFがページを再ロードすると、サーバ側のコントロールの値が保存され、IEの下では本当に再ロードされ、ページ上の値は保持されないという問題もあります.FFのこのサーバコントロール値を保存する行為はaspに対するものであるべきである.Netサポートに問題があり、ページをコミットしていない場合は発生しないはずです.
class="tableStyle1" cellspacing="0">
1
readonly='true' />title=' ' />name='Dy_hd_rowState' type='hidden' value='1' title=' ' />type='hidden' value='0' title=' ' />
style='width: 35px' type='text' />
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;ifor(var p=0;pif(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がどれだけあるか気にしないで、2番目のtdに関連するinput hiddenを加えることに注意してください.動的削除は表面的な機能にすぎず、このtableはdatasetと同様に行状態を有し、行状態でサーバ側でデータを更新、削除、新規化することができる.1新規、2削除、3修正.ただ、ポップアップウィンドウでFFとIE 7では効果が出ないので、iframeでは効果がわかりません.
IEではcloneから出たtrに対してcellsでtdの集合を取得することはできず,FFでは可能である.tr内にinputがonpropertychangeイベントを使用しているため,新規のtr内input値を削除する際にもトリガーされるため,このイベントではifでこの状況を排除した.ブラウザの互換性は本当に面倒です.FFの下には、ページがコミットされていない場合、FFがページを再ロードすると、サーバ側のコントロールの値が保存され、IEの下では本当に再ロードされ、ページ上の値は保持されないという問題もあります.FFのこのサーバコントロール値を保存する行為はaspに対するものであるべきである.Netサポートに問題があり、ページをコミットしていない場合は発生しないはずです.