FF 및 IE_javascript 기술과 호환되는 자체 작성 동적 테이블 예

HTML 테이블 구조는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

< ;table id=" Dy_table" width="760" cellpadding="0" style="border-top: solid 1px #9cf"
class="tableStyle1" cellpacing="0">
;
< ;th style="width: 40px">일련번호
<입력 유형 ="hidden" name ="HF_tableRows" id="HF_tableRows" value="1" />
부분 모델 >부품 이름
수량
세금 제외 가격
세금 포함 가격
세액< ;/th>
결제;/th>
전체 금액
< th style="width:60px">작업

1 ;입력 이름='Dy_text_ljh' 스타일='너비: 110px' ondblclick='selectLj(this)' 유형='텍스트'
읽기 전용='true' /><입력 이름='Dy_hd_cpdm' 유형 ='숨김 ' onpropertychange='textChange(this)'
title='Product Code' />name='Dy_hd_rowState' type='hidden' value='1' title='행의 상태' /> type='hidden' value='0' title='부품 사양' />

<입력 이름='Dy_text_sl' value='1' onkeypress='onlyNumberIn1(this)' onkeyup='textChange(this) '
style='width: 35px' type='text' />

<입력 이름='Dy_text_hsj' style='width: 60px' type='text' readonly='true' />< ; /td>
<입력 이름='Dy_text_se' 스타일='너비: 60px' type='text' readonly='true' /> <입력 이름='Dy_text_hk' 스타일='너비: 60px' 유형='텍스트' readonly='true' />
<입력 이름='Dy_text_ze' 스타일 = '너비: 60px' 유형='텍스트' 읽기 전용='true' />
<입력 이름='del' 유형='버튼' 값='삭제' 클래스 = 'input-button' onclick='delnode1(this)' />




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 변수, 선택한 행을 저장하는 데 사용됨 up window
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; //마지막으로 표시되는 행 가져오기
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 = parsInt(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 = parsInt(rowCount) -
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 = parsInt(rowCount) - 1;
}
else
{
tr.style.display="none";
tr.cells[1].getElementsByTagName("input")[ 3].value = "2";
table.rows[0].cells[0] .getElementsByTagName("input")[1].value = parsInt(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;
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"
🎜>}
//데이터 제출 전 중복 행이 없는지 확인
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==" ") 계속;
for( var p= i 1; p < table.rows.length ;p ){
if(table.rows[p] .style.display == "없음") 계속;
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;
}
varDialogWin;//부품 창이 열려 있는지 여부
//부품 선택
기능 selectLj( o){
if(dialogWin == null){
selectRow = o.parentNode.parentNode;//전역 변수에 행 할당
var cpxh = selectRow.cells[1].getElementsByTagName ("입력")[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','ressible=1,status=0,menubar=0,scrollbars=1,height=400px,width=600px')
}

/ /테이블에서 비용 계산
function setClf(){}


이전에는 이전에 작성한
테이블을 동적으로 추가

한 내용이 개선되었습니다. 정말 js를 배운 직후인데 드디어 FF, IE와 호환이 되는군요.. 표준 DOM 스펙도 놓치지 않고 JS DOM을 사용하면서 많은 지식을 얻었습니다. MS DHTML 매뉴얼을 읽을 때 주의해야 할 점은 표준 메소드와 속성을 사용하는 것이 가장 좋은 것입니다.
이 동적 테이블은 테이블만큼 동적으로 증가하거나 감소할 수 있습니다. td가 몇 개인지 신경 쓸 필요가 없습니다. 숨겨진 관련 입력이 두 번째 td에 추가됩니다. 이 테이블에는 행이 있습니다. 데이터세트와 마찬가지로 행 상태를 사용하여 서버측에서 데이터를 업데이트, 삭제, 추가할 수 있습니다. 1개 추가, 2개 삭제, 3개 수정 팝업 창만 사용하면 FF 및 IE7에서는 작동하지 않습니다. iframe에서는 어떻게 작동하는지 모르겠습니다.
IE에서는 복제된 tr을 사용하여 td 컬렉션, FF를 얻을 수 없습니다. tr에 입력이 있고 onpropertychange 이벤트가 사용되므로 tr에 새로 추가된 입력 값이 제거될 때도 트리거되므로 이 이벤트에서는 이러한 상황을 제거하기 위해 if를 사용합니다. 브라우저 호환성은 정말 조금 번거롭습니다. FF에서는 여전히 문제가 있습니다. 페이지가 제출되지 않은 경우 FF가 페이지를 다시 로드하면 서버 측 컨트롤의 값이 저장되지만 IE에서는 실제로 다시 로드되어 페이지의 모든 값이 저장됩니다. 저장되지 않습니다. 서버 제어 값을 저장하는 FF의 동작은 asp.net 지원에 문제가 있어야 합니다. 이는 페이지를 제출하지 않고는 발생해서는 안 됩니다.