자바스크립트에서 테이블의 행을 삭제하는 방법

JavaScript에서 테이블 삭제를 구현하는 방법: 먼저 HTML 샘플 파일을 만든 다음 테이블을 정의하고 마지막으로 "function deleteRow(_this){...}" 메서드를 사용하여 행 삭제 기능을 구현합니다.

이 문서의 운영 환경: windows7 시스템, javascript 버전 1.8.5, DELL G3 컴퓨터

javascript에서 테이블의 행을 삭제하는 방법은 무엇입니까?

JavaScript는 테이블에 대한 행을 동적으로 추가하고 삭제합니다.

행 추가 기능을 구현하는 메서드는 총 3개, 행 삭제 기능을 구현하는 메서드는 하나를 작성했습니다. 실제로 이러한 것들은 모두 API 문서에 있습니다. JavaScript에 이 함수나 속성이 있는지 여부에 따라 달라지며, 이러한 속성과 함수를 통합하여 원하는 것을 얻을 수 있습니다.

모든 HTML 요소에서 사용할 수 있는 공통 함수: node.appendChild(node),

모든 HTML 요소에서 사용할 수 있는 공통 속성: element.tagName

문서 개체의 일반적인 메서드: document.createElement(name)

< 테이블>에서 일반적으로 사용되는 함수: tableObject.insertRow(index), tableObject.deleteRow(index)

< 테이블에서 일반적으로 사용되는 속성>: tableObject.rows, tableObject.rows.length

< ; 일반적으로 사용되는 함수: tablerowObject.insertCell(index)

일반적으로 사용되는 속성: tablerowObject.rowIndex

<style type="text/css">
    table{
        border:1px solid #000;
        border-collapse: collapse;
    }
    th,td{
        border:1px solid #000;
        padding:6px;
    }
</style>
<script type="text/javascript">
    function addRow1(){
        var userInfo = document.getElementById("userInfo");
        var row = document.createElement("tr");
        var td1 = document.createElement("td");
        td1.innerHTML = "李四";
        var td2 = document.createElement("td");
        td2.innerHTML = "102";
        var td3 = document.createElement("td");
        td3.innerHTML = "北海";
        var td4 = document.createElement("td");
        td4.innerHTML = "<a onclick=&#39;delete(this)&#39;>删除</a>";
        row.appendChild(td1);
        row.appendChild(td2);
        row.appendChild(td3);
        row.appendChild(td4);
        userInfo.appendChild(row);              
    }
    function addRow2(){
        var userInfo = document.getElementById("userInfo");
        var rowLength = userInfo.rows.length;
        //新行将被插入index所在行之前。若index等于表中的行数，则新行将被附加到表的末尾。
        //返回一个TableRow，表示新插入的行。
        var tableRow = userInfo.insertRow(rowLength);
        tableRow.innerHTML = "<td>李四</td><td>102</td><td>四海</td><td><a onclick=&#39;deleteRow(this)&#39;>删除</a></td>";
    }
    function addRow3(){
        var userInfo = document.getElementById("userInfo");
        //计算rows.length时会把表头包含在内
        var rowLength = userInfo.rows.length;
        var tableRow = userInfo.insertRow(rowLength);
        //新单元格将被插入当前位于 index 指定位置的表元之前
        //如果 index 等于行中的单元格数，则新单元格被附加在行的末尾。
        var tableCell0 = tableRow.insertCell(0);
        var tableCell1 = tableRow.insertCell(1);
        var tableCell2 = tableRow.insertCell(2);
        var tableCell3 = tableRow.insertCell(3);
        tableCell0.innerHTML = "李四";
        tableCell1.innerHTML = "103";
        tableCell2.innerHTML = "黑海";
        tableCell3.innerHTML = "<a onclick=&#39;deleteRow(this)&#39;>删除</a>";
    }
    //不能传初始化时当前元素所在行的rowIndex，因为删除操作之后当前元素所在行的rowIndex会发送变化
    function deleteRow(_this){
        var userInfo = document.getElementById("userInfo");
        var rowIndex = getTrIndex(_this);
        //deleteRow() 方法用于从表格删除指定位置的行
        //参数 index 指定了要删除的行在表中的位置
        userInfo.deleteRow(rowIndex);
    }
    function getTrIndex(element){
        if(element.tagName.toLowerCase() == "tr"){
            //rowIndex属性返回某一行在表格的行集合中的位置（row index）
            return element.rowIndex;
        }else{
            return getTrIndex(element.parentNode);
        }
    }
</script>

권장 학습: "javascript 고급 튜토리얼"

위 내용은 자바스크립트에서 테이블의 행을 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!