JS中表格的全選和刪除要注意的問題

      在項目開發中，由於剛剛開始做項目，我對js還不是很精通，所以在用js對表格的全選和刪除中遇到了不少問題，后來通過查找資料解決了，之后總結了一下關於js表格的全選和刪除出現的一些問題，希望能幫助到大家。

     以下是我自己做的一個小例子，用來更簡單明了的說明js全選和刪除。

一、全選的說明：當選中全選的checkbox時，下面1-5都會選中，沒有選中時1-5都不會選中，這個實現不難，步驟如下：

1、獲取全選框的選中狀態，

2、for循環設置所有的單選框的選中狀態

主要代碼：

    //1.獲取全選按鈕
    var chkAllObj = document.getElementById("chkAll");
    //2.獲取所有單選框
    var chkOneObjs = document.getElementsByClassName("chkOne");
    //3.設置點擊事件
    chkAllObj.onclick = function () {
        //3.1獲取全選框的選中狀態
        var isChecked = this.checked;
        //3.2for循環設置所有的單選框的選中狀態
        for (var i = 0; i < chkOneObjs.length; i++) {
            chkOneObjs[i].checked = isChecked;
        }
    }
 

 

二、全選中注意細節

如圖：當我們選中1時，全選按鈕也應該選中，有一個單選沒選中時，全選也應該不選中

主要代碼：

 //4.為所有單選框設施點擊事件--實現勾選全部單選框,全選框也被勾選
    for (var i = 0; i < chkOneObjs.length; i++) {
        //4.1設置點擊事件
        chkOneObjs[i].onclick = function () {
            //4.2循環所有的單選框
            for (var j = 0; j < chkOneObjs.length; j++) {
                if (chkOneObjs[j].checked == false) {
                    //將全選框的選中狀態改為false
                    chkAllObj.checked = false;
                    return;
                }
            }
            //4.3如果代碼可以執行到這里,全選都被選中了
            chkAllObj.checked = this.checked;

        }
    }

 

三、刪除中應注意的問題

js中的刪除時調用父元素將其子元素刪除，對於上面的表格我們將其父子關系從小到大為：checkbox->td->tr->tBody->table

      1、注意:tr的父元素是tBody而不是table,這點可能很多人都會認為tr的父元素是table，但是我查找過一些資料，有的資料對這個定義也不是很明確，還有瀏覽器的兼容性問題等等,所以刪除的方法也不止一種，但是我們可以采用通用的代碼tr.parentNode.removeChild(tr)進行刪除。