>웹 프론트엔드 >JS 튜토리얼 >table_javascript 기술을 동적으로 추가, 삭제 및 업데이트하는 Node.js 메소드

table_javascript 기술을 동적으로 추가, 삭제 및 업데이트하는 Node.js 메소드

WBOY
WBOY원래의
2016-05-16 16:14:541101검색

이 기사의 예에서는 js를 사용하여 테이블을 동적으로 추가, 삭제 및 업데이트하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

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

 
 
<머리> 
 
表格操작품 
<스타일 유형="텍스트/css"> 
본문 { 
   글꼴 크기: 13px; 
   줄 높이: 25px; 

테이블 { 
    테두리 상단: 1px 솔리드 #333; 
    테두리 하단: 1px 솔리드 #333; 
    너비: 300px; 

td { 
    테두리 오른쪽: 1px 단색 #333; 
    테두리 하단: 1px 솔리드 #333; 

.title { 
    텍스트 정렬: 중앙; 
    글꼴 두께: 굵게; 
    배경: #ccc; 

.center { 
    텍스트 정렬: 중앙; 

#displayInfo { 
    색상: 빨간색; 

 
<스크립트 유형="텍스트/자바스크립트"> 
   function addRow() { //增加一行 
       var tableObj = document.getElementById('myTable'); 
       var rowNums = tableObj.rows.length; 
       var newRow = tableObj.insertRow(rowNums); 
       var col1 = newRow.insertCell(0); 
       col1.innerHTML = "幸福从天而降"; 
       var col2 = newRow.insertCell(1); 
       col2.innerHTML = "$18.5"; 
       col2.align = "가운데"; 
       var divInfo = document.getElementById('displayInfo'); 
       divInfo.innerHTML = "상품 제작"; 
   } 
   function delRow() {  //删除第two行 
       document.getElementById('myTable').deleteRow(1); 
       var divInfo = document.getElementById('displayInfo'); 
       divInfo.innerHTML = "상품 제작"; 
   } 
   function updateRow() {  //새롭게 이동하기 
       var uRow = document.getElementById('myTable').rows[0]; 
       uRow.className = "제목"; 
   } 
 
 
<본문> 
 
    
        
        
    
    
        
        
    
     
        
        
    
 

 

 

 
 
 

希望本文所述对大家의 javascript는 程序设计有所帮助。

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이름价格
看得见风景的房间$30.00
60个瞬间$32.00