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와 호환되지 않음, 나쁘다!

관련 라벨：

시트

원천：php.cn

이전 기사：입력 file_javascript 기술에서 선택한 파일을 지우는 두 가지 솔루션 다음 기사：mouse_javascript 기술로 드래그할 수 있는 DIV 구현 아이디어 및 코드

본 웹사이트의 성명

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

저자별 최신 기사

• NullPointerException은 무엇이며 어떻게 해결합니까?
  2024-10-22 09:46:29
• 초보자에서 코더까지: C 기초로 시작되는 여정
  2024-10-13 13:53:41
• PHP로 웹 개발 잠금 해제: 초보자 가이드
  2024-10-12 12:15:51
• C에 대한 이해: 새로운 프로그래머를 위한 명확하고 간단한 길
  2024-10-11 22:47:31
• 코딩 잠재력 발휘: 완전 초보자를 위한 C 프로그래밍
  2024-10-11 19:36:51
• 내면의 프로그래머를 깨워보세요: 완전 초보자를 위한 C
  2024-10-11 15:50:41
• C로 일상을 자동화하세요: 초보자를 위한 스크립트 및 도구
  2024-10-11 15:07:41
• PHP가 쉬워졌습니다: 웹 개발의 첫 번째 단계
  2024-10-11 14:21:21
• Python으로 무엇이든 빌드하기: 창의력을 발휘하기 위한 초보자 가이드
  2024-10-11 12:59:11
• 코딩의 핵심: 초보자를 위한 Python의 힘 활용
  2024-10-11 12:17:31

최신 이슈

Width 속성을 추가하여 콘텐츠를 왼쪽으로 이동합니다. 나는 본문에 여백을 제공했습니다. main {left margin: 200px; right margin: 200px; text alignment: center} ...

에서 2024-04-06 22:01:35

0

3

816

Javafx에서 인라인 CSS 스타일을 동적으로 수정합니다. 응용프로그램이 최대화되었을 때 창의 배경 이미지를 변경하려고 합니다. 내 배경은 인라인 CSS를 사용하여 설정됩니다. 스타일에 대해 두 개의 다른 변수와 if 문...

에서 2024-04-06 20:57:16

0

1

487

opentbs를 사용하여 odt 파일을 생성할 때 발생하는 문제: 동일한 키의 값이 별도의 열이 아닌 동일한 행에 표시됩니다. PHP를 사용하여 odt를 만들기 위해 OpenTbs라는 라이브러리를 사용하고 있는데, 열과 행이 동적으로 생성되기 때문에 사용하고 있습니다. 행과 열을 만드는 ...

에서 2024-04-06 20:18:18

0

1

483

모바일 보기에서 사용자가 링크를 클릭할 때 이 탐색 표시줄을 어떻게 닫을 수 있나요? 사용자가 웹 사이트를 탐색하기 위해 링크를 클릭하면 탐색 표시줄이 닫히지 않습니까? 내비게이션 바를 닫기 위해 각 링크에 클릭 이벤트 리스너를 추가해 보았지만 작...

에서 2024-04-06 19:23:03

0

1

411

JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}

에서 2024-04-06 19:25:49

0

1

505

관련 주제

더>

• 단어 삽입 테이블
• 테이블 평균
• 여러 페이지에 걸쳐 분산된 Word 테이블
• 테이블에서 중복 테이블 삭제
• 엑셀을 vcf로 변환하는 방법
• 데이터 저장 암호화 방법
• caj 파일 열기 방법
• 중국어 프로그래밍 언어는 무엇입니까?

인기 추천

• js는 무슨 뜻인가요?
• js에서 문자열을 배열로 변환하는 방법은 무엇입니까?
• 자바스크립트를 사용하여 페이지를 새로 고치는 방법
• sqrt 함수를 사용하는 방법
• js 배열에서 항목을 삭제하는 방법

인기 튜토리얼

더>

관련 튜토리얼

인기 추천

최신 강좌

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1423220
• 
  PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기

  4268777
• 
  JAVA 초보자용 비디오 튜토리얼

  2536637
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  507476
• 
  PHP 제로 기반 입문 튜토리얼

  862789

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1423220 학습 시간
• 
  JAVA 초보자용 비디오 튜토리얼

  2536637 학습 시간
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  507476 학습 시간
• 
  웹 프론트 엔드 개발에 대한 빠른 소개

  215856 학습 시간
• 
  PS 비디오 튜토리얼을 처음부터 마스터하세요

  890437 학습 시간

• 
  [웹 프런트엔드] Node.js 빠른 시작

  7475 학습 시간
• 
  해외 웹 개발 풀스택 강좌 총집합

  5962 학습 시간
• 
  Go 언어 실습 GraphQL

  4938 학습 시간
• 
  550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다

  697 학습 시간
• 
  기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬

  24741 학습 시간

최신 다운로드

더>

웹 효과

웹사이트 소스 코드

웹사이트 자료

프론트엔드 템플릿

• [양식 버튼] jQuery 기업 메시지 양식 연락처 코드
• [플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과
• [메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과
• [양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드
• [플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드
• [HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임
• [그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤
• [사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

• [PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)
• [PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)
• [배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)
• [PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)
• [PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)
• [PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)
• [배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)
• [PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

일련번호 <%--페이지 상태- -%> --숨겨진 행을 포함한 총 행 수--%> 행--%>	부품 번호	부품 이름	단가	제조업체	재료 출처	관리비
입력 이름='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' />