FF および IE_javascript スキルと互換性のある自作の動的テーブルの例-jsチュートリアル-php.cn

FF および IE_javascript スキルと互換性のある自作の動的テーブルの例

WBOY

リリース： 2016-05-16 17:19:25

オリジナル

1028 人が閲覧しました

HTML テーブルの構造は次のとおりです:

コードをコピーコードは次のとおりです:

< ;table id=" Dy_table" width="760" cellpadding="0" style="border-top: Solid 1px #9cf"
class="tableStyle1" cellpacing="0">
;
シリアル番号 ="hidden" name ="HF_tableRows" id="HF_tableRows" value="1" />
部品モデル >パーツ名
数量
税抜価格
税込価格
税額< ;/th>
支払い
全額
< th style="width:60px">アクション

;input name='Dy_text_ljh' style='width: 110px' ondblclick='selectLj(this)' type='text'
readonly='true' />title='製品コード' />name='Dy_hd_rowState' type='hidden' value='1' title='行のステータス' /> type='hidden' value='0' title='パーツ仕様' />

style='width: 35px' type='text' />

< /td>

次のように:

コードをコピー

コードは次のとおりです:

 
function addEvent (o,c,h){ 
if(o.attachEvent){ 
o.attachEvent('on' c,h); 
 o.addEventListener(c,h,false); 
} 
return true; 
} 
var selectRow;//選択された行を保存するために使用される、pop- 
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); 
table.appendChild(tr); >//削除時のイベント 
 function delnode(){ 
var table=document.getElementById("Dy_table"); 
var rowCount = table.rows[0].cells[0].getElementsByTagName(" input")[1].value; //ユーザーに表示される行の数 
var 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{// データベースから削除する必要がある場合は、削除します。 Tag
row.style.display="none"; 
row.cells[1].getElementsByTagName("input")[3] ].value = "2"; 
table.rows[0].getElementsByTagName("input")[1].value = parseInt(rowCount) - 1; 🎜>} 
} 
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]。値 = "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"; ].cells[0] .getElementsByTagName("input")[1].value = parseInt(rowCount) - 1; 
} 
} 
// 次のループは行番号
for( var i= 1,p = 1; i if(table.rows[i]. style.display!="none") 
{ 
table.rows[i].cells[0].innerHTML = p; 
} 
} 
setClf( ); 
} 
/ / 変更時に発生するイベント、行ステータスの変更 
function textChange(o){ 
var tr=o.parentElement.parentElement; 
if(o.parentElement. parentElement.parentElement==null)return;/ /新しく追加された行の場合は return 
var rowState = tr.cells[1].getElementsByTagName("input")[3].value; 
if( rowState == "1") 
return ; 
else 
tr.cells[1].getElementsByTagName("input")[3].value = "3"; 🎜>} 
//送信データの前に重複行がないことを確認します。 
function checkSameData(){ 
var table=document.getElementById("Dy_table"); 
for( var i= 1; 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") 続行; 
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;//パーツウィンドウが開いているかどうか
//パーツを選択
関数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'); 
} 

/ /テーブル内のコストを計算します
function setClf(){} 

 
これは、以前に作成した 
テーブルを動的に追加する
 を改良したものです。これは、私が JS を学んだ直後の失敗作です。互換性の過程で、標準の DOM 仕様を見逃すことなく、JS DOM を使用する際の多くの知識が向上しました。 MS DHTML マニュアルを読むときに注意してください。そこに記載されているメソッドと属性は標準のものを使用するのが最善です。

この動的テーブルは、テーブルの長さに従って動的に増減できます。 HTML 内で設定されている td の数を気にする必要はありません。このテーブルには、2 番目の td に追加される動的追加と削除が含まれています。データセットと同様に行ステータスを使用して、サーバー側でデータの更新、削除、追加を行うことができます。 ポップアップ ウィンドウを使用するだけでは、FF および IE7 では機能しません。 iframe でどのように動作するのかわかりません。

IE では、クローンされた tr を使用して td コレクションを取得することはできません。次のことが可能です。 tr に入力があり、onpropertychange イベントが使用されているため、tr に新しく追加された入力値が削除されたときにもイベントがトリガーされるため、この状況を排除するためにこのイベントで if が使用されます。ブラウザの互換性は本当に少し面倒です。 FF ではまだ問題があり、ページが送信されない場合、FF がページをリロードするとサーバー側コントロールの値が保存されますが、IE では実際にリロードされ、ページ上の値はすべて保存されます。保存されません。サーバーコントロール値を保存する FF の動作は、その asp.net サポートに問題があるはずです。これは、ページを送信しないと発生しません。