이 기사에서는 JS가 동적 추가, 삭제 및 테이블 업데이트를 구현하는 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> 테이블 작동 </title>
<스타일 유형 = "텍스트/CSS">
몸 {
글꼴 크기 : 13px;
라인 높이 : 25px;
}
테이블 {
테두리 : 1px 고체 #333;
국경 바닥 : 1px 고체 #333;
너비 : 300px;
}
TD {
경계 오른쪽 : 1px 솔리드 #333;
국경 바닥 : 1px 고체 #333;
}
.제목 {
텍스트 정렬 : 센터;
글꼴 중량 : 대담한;
배경 : #CCC;
}
.center {
텍스트 정렬 : 센터;
}
#DisplayInfo {
색상 : 빨간색;
}
</스타일>
<script type = "text/javaScript">
함수 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 = "성공적으로 제품 추가";
}
함수 delrow () {// 두 번째 줄을 삭제합니다
document.getElementById ( 'mytable'). deleterow (1);
var divinfo = document.getElementById ( 'displayInfo');
divinfo.innerhtml = "제품을 성공적으로 삭제하십시오";
}
function updaterow () {// 라인 정보를 업데이트합니다
var urow = document.getElementById ( 'mytable'). 행 [0];
urow.classname = "제목";
}
</스크립트>
</head>
<body>
<table cellPadding = "0"CellPacing = "0"id = "mytable">
<tr id = "row1">
<td> 책 제목 </td>
<td> 가격 </td>
</tr>
<tr id = "row2">
<td> 전망이있는 방 </td>
<td> $ 30.00 </td>
</tr>
<tr id = "row3">
<td> 60 순간 </td>
<td> $ 32.00 </td>
</tr>
</테이블>
<input name = "b1"type = "button"value = "한 줄 추가"onclick = "javaScript : addrow ();" /> <br />
<입력 이름 = "b2"type = "button"value = "두 번째 줄 삭제"onclick = "javaScript : delrow ();" /> <br />
<input name = "b3"type = "button"value = "title modify"onclick = "javaScript : updateRow ();" /> <br />
<div id = "displayInfo"> </div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.