Js를 사용하여 self_javascript 기술로 작성된 테이블 예제를 동적으로 추가하세요.

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

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.insertRow()
var cell0= tr.insertCell( );
var cell1=tr.insertCell();
var cell2=tr.insertCell();
var cell4=tr. insertCell();
var cell5=tr.insertCell();
var cell6=tr.insertCell()
var cell8=tr.insertCell( );
var cell9=tr.insertCell();
var Hidden1=document.createElement("") ;
var Hidden2=document.createElement("<입력 이름='Dy_hd_sx' 유형='숨김' >")
var Hidden3=document.createElement("<입력 이름='Dy_hd_mxid' 유형 ='hidden' >");
var Hidden4=document.createElement("");//행 상태
var Hidden5=document .createElement("");//단가 숨기기
var input1=document.createElement("");
var input2=document.createElement("<입력 유형='text' 스타일 ='width:100px ' name='Dy_text_cpmc' >");
var input3=document.createElement("");
var input4=document.createElement("var input5=document.createElement("");
var input6 =document.createElement( "")
var input7=document.createElement("<입력 유형='text' readonly='true' style='width:40px' name='Dy_text_glf' >");
var input8=document.createElement("<입력 유형='text' readonly='true' style='width:60px' name='Dy_text_je' >") ;
var input9=document.createElement("<입력 유형='버튼' 이름='del' 값='삭제' 클래스='input-button' onclick='delnode1(this)' >")
var oOption1= document.createElement("option");
var oOption2=document.createElement("option");
var oOption3=document.createElement("option"); document.createElement(" 옵션");
input6.options.add(oOption1);
input6.options.add(oOption3); options.add(oOption4 );
oOption1.innerText="계약 부품";
oOption2.innerText="아웃소싱 부품"; "아웃소싱 부품" ";
oOption3.innerText="예비 부품 부서";
oOption3.value="예비 부품 부서";
oOption4.innerText="제조업체 공급 부품";
oOption4. value="제조업체 제공 부품";
var rowIndex
rowIndex = table.rows.length-2;
var rowCount = table.rows[0].cells[0].getElementsByTagName("input" )[2].value ;//사용자에게 표시되는 행 수
cell0.innerText=parseInt(rowCount) 1
table.rows[0].cells[0].getElementsByTagName("input" )[2].value =parseInt(rowCount) 1;
hidden2.value =parseInt(table.rows[0].cells[0].getElementsByTagName("input")[1].value) 1; >table.rows[0].cells [0].getElementsByTagName("input")[1].value=hidden2.value;
cell1.appendChild(input1);
cell1.appendChild(hidden1);/ /제품 코드
cell1.appendChild(hidden2);//내부 시퀀스
cell1.appendChild(hidden3);//수정 및 삭제에 사용되는 이 행의 ID
cell1.appendChild(hidden4);/ /이 행의 상태
cell2 .appendChild(input2);
cell3.appendChild(input3);
cell4.appendChild(input4);
cell5. appendChild(input5);
cell6 .appendChild(input6);
cell8.appendChild(input8);
var tt =function(obj)
{
반환 함수(){textChange(obj);}
}
var ttt=function(obj)
{
반환 함수(){selectChange (obj);}
}
addEvent(input1,"change",tt(input1))
addEvent(input2,"change",tt(input1))
addEvent(input3, "change",tt(input1)) ;
addEvent(input4,"change",tt(input1))
addEvent(input5,"change",tt(input1))
addEvent(input6) ,"change",ttt(input6) );
addEvent(input7,"change",tt(input1))
// addEvent(input8,"change",tt(input1)); }
delnode()/ /삭제 시 이벤트
{
var table=document.getElementById("Dy_table")
var rowCount = table.rows[0].cells[0]. getElementsByTagName("input")[2 ].value;//사용자에게 표시되는 행 수
var row;//마지막으로 표시되는 행 저장
for( var i=table.rows.length-1 ; i>=0 ;i--)
{
if(table.rows[i].style.display!="none")
{
row=table.rows[i] ;
휴식
}
}
var rowId=row.cells[1].getElementsByTagName("input")[3].value;
if( rowCount > 1 )
{
if(rowId=="") //새로 추가된 행이 데이터베이스에 기록되지 않으면 직접 삭제하세요.
{
row.removeNode(true)
table.rows[0].cells[0].getElementsByTagName("input ")[ 2].value = parsInt(rowCount) - 1;
}
else//데이터베이스에서 삭제해야 하는 경우 삭제 표시
{
row.style을 설정하세요. display="none";
row.cells[1].getElementsByTagName("input")[4].value = "2";
table.rows[0].cells[0].getElementsByTagName(" input")[2].value = parsInt(rowCount-1);
}
}
else
{
if(rowId == "")//새 행이 다음과 같은 경우 데이터베이스에 기록되지 않았으면 지우세요
{
row.cells.item(1).getElementsByTagName("input")[0].value=""
row.cells.item(1) .getElementsByTagName("input")[1 ].value="";
row.cells.item(2).getElementsByTagName("input")[0].value="";
row.cells. item(3).getElementsByTagName("input ")[0].value="1";
row.cells.item(4).getElementsByTagName("input")[0].value=""
row.cells.item(7) .getElementsByTagName("input")[0].value="";
row.cells.item(5).getElementsByTagName("input")[0].value=" ";
row.cells.item(6).getElementsByTagName("select")[0].selectedIndex=0;
}
else//데이터베이스에서 삭제해야 하는 경우 삭제 표시
{
row.style.display="none";
row.cells[1].getElementsByTagName("input")[4].value = "2"; 행[0].cells[0].getElementsByTagName(" 입력")[2].value =parseInt(rowCount) - 1;
addnode();
}
setClf() ;
}
function delnode1(o) //삭제 시 이벤트
{
var tr=o.parentElement.parentElement
var table=document.getElementById("Dy_table"); 🎜>var rowCount = table.rows[0].cells[0].getElementsByTagName("input")[2].value;//사용자에게 표시되는 행 수
var rowId=tr.cells[1 ].getElementsByTagName("input")[3].value; if( rowCount > 1 )
{
if(rowId=="")//새로 추가된 행이 기록되지 않은 경우 데이터베이스를 직접 삭제하세요.
{
tr.removeNode(true );
table.rows[0].cells[0].getElementsByTagName("input")[2].value =parseInt(rowCount ) - 1;
else
{
tr.style.display="none";
tr.cells[1].getElementsByTagName("input")[4].value = "2";
table.rows[0].cells[0 ].getElementsByTagName("input")[2].value = parsInt(rowCount-1)
}
}
else
{
if(rowId=="")// 새로 추가된 행이 데이터베이스에 기록되지 않으면 직접 삭제하세요.
{
tr.cells.item(1).getElementsByTagName ("input")[0].value="";
tr.cells.item(1).getElementsByTagName("input")[1].value=""
tr.cells.item( 2).getElementsByTagName("input")[0].value="";
tr.cells.item(3).getElementsByTagName("input")[0].value="1"
tr .cells.item(4).getElementsByTagName("input")[0].value=" ";
tr.cells.item(7).getElementsByTagName("input")[0].value="";
tr.cells.item(5).getElementsByTagName("input")[0] .value="";
tr.cells.item(6).getElementsByTagName("select")[0].selectedIndex =0;
}
else//데이터베이스에서 삭제해야 하는 경우 삭제 태그
{
tr.style.display="none"; cells[1].getElementsByTagName("input")[4].value = "2";
table.rows[0].cells[0].getElementsByTagName("input")[2].value = parsInt( rowCount) - 1;
addnode();
}
}
//다음 루프는 중간에서 삭제할 때 테이블 행 번호를 업데이트하는 데 사용됩니다.
rowCount = table.rows [0].cells[0].getElementsByTagName("input")[2].value;
for( var i= 1, p = 1; i < table.rows.length ;i )
{
if(table.rows[i].style.display!="none")
{
table.rows [i].cells[0].innerText = p
p
}
}
setClf();
}
//수정 시 발생하는 이벤트
function textChange(o)
{
setClf()
var tr=o.parentElement.parentElement;
var rowState = tr.cells[1].getElementsByTagName("input")[4] .value;
if( rowState == "1")
return ;
else
tr.cells[1].getElementsByTagName("input")[4].value = "3";
}
//드롭다운 상자 옵션 변경 setClf() 여기에 제공되지 않은 금액을 계산합니다.
function selectChange(o)
{
var tr=o.parentElement.parentElement;
var glf = tr.cells[7].getElementsByTagName("input ")[0];
var dj = tr.cells[4].getElementsByTagName("input")[0];
var dj1 = tr.cells[4].getElementsByTagName("input")[1 ];
if( o.selectedIndex==0)//계약
{
glf.value='0.00';
dj.value=dj1.value;
setClf();
return;
}
if( o.selectedIndex==1)//외주 부품
{
glf.value='0.20'
dj.value=dj1.value ;
setClf();
return;
}
if( o.selectedIndex==2)// 예비 부품 부서
glf.value='0.00'; 🎜>dj.value=dj1.value;
setClf();
return;
}
if( o .selectedIndex==3)//제조업체 공급
{
glf .value='0.00';
dj.readOnly=true;
setClf()
}
}
//제출하기 전에 데이터를 확인하여 중복 행이 없는지 확인
function checkSameData()
{
var table=document.getElementById("Dy_table")// var rowCount = table .rows[0].cells[0].getElementsByTagName("input")[2].value;//사용자에게 표시되는 행 수
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;
function selectLj( o)//부분 선택
{
if(dialogWin == null)
{
selectRow = o.parentElement.parentElement;//다음에 행 할당 전역 변수
dialogWin = window.showModelessDialog("../jddgl/Select_lj.aspx",window,
"center:yes;dialogWidth:550px;dialogHeight:400px;help:no;status:no;" );
}
}

========
첫 페이지

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

td>




1



;td><입력 이름='del' 유형='버튼' 값='삭제' 클래스='input-button' onclick='delnode1(this)' /> 🎜>



이 프로젝트에는 이 기능이 필요하며 여러 가지 방법을 사용해 보았습니다. (결국 작성하는 데 많은 시간을 보냈습니다. 하하) 저는 js에 능숙하지 않습니다. 개선하고 개선하도록 도와주세요. 실패한 작업, FF와 호환되지 않음, 나쁘다!

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：입력 file_javascript 기술에서 선택한 파일을 지우는 두 가지 솔루션다음 기사：입력 file_javascript 기술에서 선택한 파일을 지우는 두 가지 솔루션

관련 기사

더보기

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술

• 집

• 강의

• Q&A

• 나의

• 집
• 강의
• 기사
• Q&A
• 사전
• 수동
• 다운로드
• 주제

집

기사

Q&A

강의

주제

다운로드

게임

사전

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

일련번호 <%--페이지 상태- -%> --숨겨진 행을 포함한 총 행 수--%> 행--%>	부품 번호	부품 이름	단가	제조업체	재료 출처	관리비
입력 이름='Dy_text_ljh' 스타일='너비:100px' ondblclick='selectLj(this)' onchange='textChange(this)' type='text' /> <입력 이름='Dy_hd_cpdm' type= 'hidden' onpropertychange='textChange(this)' title='제품 코드' />				<선택 name=' Dy_select_clly' onchange='selectChange(this)' >계약 부분 외주 부분< option><옵션 값='예비 부품 부서'>예비 부품 부서 <옵션 값='제조업체 공급 부품'>제조업체 공급 부품< ; /td>	<입력 이름='Dy_text_glf' readonly='true' onchange='textChange(this)' style='width:40px' type='text' value='0.00' / > ;	<입력 이름='Dy_text_je' readonly='true' style='width:60px' type='text' />