이 기사의 예에서는 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 = "제목";
}
스크립트>
머리>
<본문>
이름 |
价格 |
看得见风景的房间 |
$30.00 |
60个瞬间 |
$32.00 |
테이블>
希望本文所述对大家의 javascript는 程序设计有所帮助。
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31