js_javascript 기술을 사용하여 테이블 행을 동적으로 추가 및 삭제하는 샘플 코드

아래와 같습니다.

코드를 복사하세요코드는 다음과 같습니다.

//동적으로 행 추가
function addRow(){
var table = document.getElementById("tableID");
var newRow = table.insertRow() ; //새 행 만들기
var newCell1 = newRow.insertCell(); //새 셀 만들기
newCell.innerHTML = ""; //셀 내용
newCell.setAttribute("align" ,"가운데"); //위치 설정
}

//동적으로 행 삭제
function deleteRow(){
var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;
var styles = document.getElementById("tableID");
styles.deleteRow(rowIndex);
}

상품명	상품 수량 < /td>	제품 단가
< ; 이름="a"> <옵션 값="전자제품">전자제품 <옵션 값="전기제품">전자제품 < ;/select>

<입력 유형= " 버튼" name="Submit2" value="추가" onclick="addRow()">
<script><br>function addRow(){<br>//행 추가 <p>var newTr = testTbl.insertRow();<br>//열 추가<br>var newTd0 = newTr.insertCell();<br>var newTd1 = newTr.insertCell();<br>var newTd2 = newTr .insertCell();<br>var newTd3 = newTr.insertCell();<br>//열 내용 및 속성 설정</p> <p>newTd0.innerText = document.all("a").options[document.all("a").selectedIndex].text;<br>newTd1.innerText = document.all("b").value; <br>newTd2.innerText = document.all("c").value;<br>newTd3.innerHTML= '<input type="button" name="del" value="삭제" onclick="del(this )">';<br>}<br>function del(o)<br>{<br>var t=document.getElementById('testTbl');<br>t.deleteRow(o.parentNode.parentNode. rowIndex)<br>}<br></script>