아래와 같이:
다음과 같이 코드 코드를 복사합니다.
//동적으로 행 추가
함수 addRow(){
var table = document.getElementById("tableID");
var newRow = table.insertRow(); //새 행 생성
var newCell1 = newRow.insertCell(); //새 셀 생성
newCell.innerHTML = ""; //셀 내의 내용
newCell.setAttribute("align","center"); //위치 설정
}
//동적으로 행 삭제
함수 deleteRow(){
var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;
var styles = document.getElementById("tableID");
styles.deleteRow(rowIndex);
}
<html>
<머리>
<제목></제목>
</head>
<본문>
<테이블 id="testTbl" 테두리=1>
<tr>
<TD>
제품명
</td>
<TD>
제품 수량
</td>
<TD>
제품단가
</td>
</tr>
<tr>
<TD>
<이름 선택="a">
<option value="전자">전자</option>
<option value="전기제품">전자제품</option>
</select></td>
<TD>
<입력 유형="텍스트" 이름="b">
</td>
<TD>
<입력 유형="텍스트" 이름="c">
</td>
</td>
</table>
<input type="button" name="Submit2" value="추가" onclick="addRow()">
<스크립트>
함수 addRow(){
//행 추가
var newTr = testTbl.insertRow();
//열 추가
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
//열 내용 및 속성 설정
newTd0.innerText = document.all("a").options[document.all("a").selectedIndex].text;
newTd1.innerText = document.all("b").value;
newTd2.innerText = document.all("c").value;
newTd3.innerHTML= '<input type="button" name="del" value="삭제" onclick="del(this)">';
}
함수del(o)
{
var t=document.getElementById('testTbl');
t.deleteRow(o.parentNode.parentNode.rowIndex)
}
</script>
</body>
</html>