js 표 데이터 추가 삭제

이것 은 간단 한 데이터 수정 추가 삭제 입 니 다.
1. 수정 버튼 을 추가 하면 모드 창 이 뜨 고 데 이 터 를 편집 합 니 다.
2. 간단 한 체크 아 이 디 와 비밀 번 호 를 만 들 었 습 니 다. 빈 전화 3 ~ 5 - 8 메 일 영문 과 숫자 조합 + @ 영어 +. com 으로 검증 할 수 없습니다.  생년월일 에 시간 컨트롤 이 붙 어 있어 서 인터넷 에 많 을 거 예요.
3. 페이지 가 초기 화 될 때 로 컬 파일 에서 json 형식의 파일 을 읽 고 tr td 로 동적 으로 불 러 옵 니 다.
4. 체크 상 자 를 누 르 면 이 줄 의 텍스트 가 파란색 으로 변 합 니 다.
5. 일괄 삭제 가 가능 하 며, 전체 선택 을 클릭 하면 모든 데이터 가 삭 제 됩 니 다.
누추 한 작품 이 겠 지만 js 에 대한 지식 이 많이 들 어가 있어 서 원리 성 을 소개 하지 않 은 것 을 간단하게 배 울 수 있 습 니 다. 주로 실천 입 니 다.
css 가 많이 들 어가 지 않 아서 어 쩔 수 없 이 저 는 예술 세균 이 부족 해 요. 코드 가 너무 많아 서 보기 싫 으 실 수도 있어 요. 그럼 제 가 이 루어 진 디 테 일 을 말씀 드릴 게 요.
구체 적 인 실현 과정 을 살 펴 보 겠 습 니 다.
/ / 홈 페이지 index. html 표 초기 화

<IE:Download ID="oDownload1" STYLE="behavior:url(#default#download)"/><!--          ie     --> 

function onDownloadDone1(downData){
	readTxt1=eval('('+downData+')');//  json     eval   json  
	
}
oDownload1.startDownload('json.txt',onDownloadDone1);
//json       
{person:[{userId:"admin",name:"name",password:"123"}，[{userId:"admin",name:"name",password:"123"}，[{userId:"admin",name:"name",password:"123"}]}

읽 기 person 내 에서 하나의 배열 순환 으로 읽 으 면 됩 니 다. 예 를 들 어 readTxt1. person [i]. userId;

//          readTxt1.person.length            

 var otr=getElelmentById('tableId').inserRow();
 var otd=otr.innsertCell();

//       
function deleteObj(obj){//obj            
	var otable1=document.getElementById('table1');
	//alert(otable1.outerHTML);
	//alert(obj.parentNode.parentNode.outerHTML);
	otable1.deleteRow(obj.parentElement.parentElement.rowIndex);
}
//               checkbox       :D            checkbox name            
function deleteSelectedAll(){
	var otable1=document.getElementById('table1');
	
	var checkboxSelectObj=document.getElementsByName('checkbox1');
	var len=checkboxSelectObj.length;
	for(var i=0;i<len;i++){
		//alert(checkboxSelectObj.length);
		var otbody=checkboxSelectObj[i].parentNode.parentNode.parentNode;
		var otr=checkboxSelectObj[i].parentNode.parentNode;
		if(checkboxSelectObj[i].checked==true){
				otbody.removeChild(otr);
				i--;//                 checkbox length      
		}
	}
}

/ / 페이지 추가 가 바 뀐 것 같 습 니 다. 팝 업 모드 창 추가 를 누 르 면 정 보 를 추가 합 니 다.

<input type="button" value="  " onclick="addInfo()">
function addInfo()
{
	var obj={win:window}<!--         -->
   var result = window.showModalDialog("add.html",obj,"dialogWidth:400px;dialogHeight:300px;");<!--             1.       url             ，2.     3.             -->
   
}

페이지 추가 add. html 매개 변수 가 져 오기

var obj = window.dialogArguments;
var otable=obj.win.document.getElementById("table1");//           table id           
//                                 tr                tr            

정규 간단 한 검사 에 대한 검 사 는 복잡 할 수 있 습 니 다. 저 는 상당히 어 지 러 웠 습 니 다.

//     3~5-8   
var reg=/^[0-9]{3,5}-[0-9]{8}$/;
//   
var reg2=/^(([0-9]+[a-zA-Z]+)|([a-zA-Z]+[0-9]+))@[a-zA-Z]+(\.com)$/;
var telObj=document.getElementById('telephoneId');
reg.test(telObj.value);//                 

제 가 소스 코드 를 올 리 지 않 았 어 요. 주로 생각 도 있 고 방법 도 있어 요. 혼자 가서 해 야 돼 요. 시간 컨트롤 을 올 려 주세요.