이 기사의 예에서는 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 = "제목";
}
<본문>
