1. 程式人生 > >js表單的基本操作

js表單的基本操作

javascript的增刪改查

//迴圈檢視tbody裡面的所有checkbox元素,只要有一個是沒選中的,那麼就非全選,否則就是全選
for ( var i=0; i<checkBoxes.length; i++ ) {
if ( !checkBoxes[i].checked ) {
checkAll.checked = false;
return;
}
}

                    //如果程式碼能走到這裡來,就說明上面的迴圈過程中,所有的checkbox都是選中的
                    checkAll.checked = true;
                }

            }
            td6.appendChild(btn2);

            tr.appendChild(td6);

            //給每一行新增滑鼠移入移出的事件處理函式
            //滑鼠移入
            tr.onmouseover = function() {
                //滑鼠移入的時候也需要根據當前tr裡面的checkbox的狀態去設定tr的class
                if (checkbox.checked) {
                    this.className = 'c4';
                } else {
                    this.className = 'c3';
                }
            }
            //滑鼠移出
            tr.onmouseout = function() {
                //當滑鼠離開tr的時候,需要根據當前tr裡面的checkbox的狀態去設定當前tr的class
                if (checkbox.checked) {
                    //如果當前tr裡面的checkbox是選中的,那麼離開tr以後,這個tr的class應該還是c4
                    this.className = 'c4';
                } else {
                    //如果當前tr裡面的checkbox不是選中的,那麼離開這個tr以後,應該回到當前tr最開始class
                    this.className = this.oldColor;
                }
            }

            tbody.appendChild(tr);
        }

       
       
    }
</script>
請選擇一個性別 男 女
全選 編號 姓名 性別 年齡 學校 操作
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20181227145030913.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzU2NTUyMQ==,size_16,color_FFFFFF,t_70)表單樣式