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

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

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는 程序设计有所帮助。

성명：

이전 기사：Jquery_jquery의 CSS 선택기 사용 분석다음 기사：Jquery_jquery의 CSS 선택기 사용 분석

이름	价格
看得见风景的房间	$30.00
60个瞬间	$32.00

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

관련 기사