FF 및 IE_javascript 기술과 호환되는 자체 작성 동적 테이블 예-JS 튜토리얼-php.cn

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(){} 

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