1. 程式人生 > >DOM練習 選擇框、表格添加、變色

DOM練習 選擇框、表格添加、變色

inf ble 技術分享 刪除行 屬性 bsp 點擊 round ack

多個選擇框,三個按鈕,顯示:全選、反選、不選

html部分,建立五個多選框,三個按鈕

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<button onClick="quan()">全選</button>//全選按鈕
<button onClick="fan()">反選</button>//反選按鈕
<
button onClick="bu()">不選</button>//不選按鈕

顯示結果:

技術分享圖片

表單中的多選按鈕:

<input type="checkbox" checked> 內容

checked 屬性是一個布爾屬性,默認選中,默認返回值為true.,選中為true,不選中為false.

var inputdom = [];//多選框
window.onload = function () {
    inputdom = document.getElementsByTagName("input");//獲取多選框
}
/*功能:全部選中*/
function quan() {
    
for (var i = 0; i < inputdom.length; ++i) { inputdom[i].checked = true; } } /*功能:反向選擇*/ function fan() { for (var i = 0; i < inputdom.length; ++i) { console.log(inputdom.length) if (inputdom[i].checked == true) { inputdom[i].checked = false; } else
{ inputdom[i].checked = true; } } } /*功能:全部不選*/ function bu() { for (var i = 0; i < inputdom.length; ++i) { inputdom[i].checked = false; } }

2、表格添加行、刪除行、隔行變色、移入變色

html中新建表頭

姓名:<input id="mingzi" type="text" placeholder="必填">
年齡:<input id="age" type="text" placeholder="必填">
<button onClick="add()">添加一行</button>//添加按鈕
<button onClick="color()">隔行變色</button>
<button onClick="">移入變色</button>
<table width="1000" border="1">
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年齡</th>
        <th>操作</th>
    </tr>
</table>

顯示結果:

技術分享圖片

js中內容,建立三個方法,添加一行、隔行變色、移入變色

var tab=null;//獲取表格
var tr_push=[];//添加行
var td_push=[];//添加單元格
var namedom=null;
var agedom=null;
window.onload = function () {
    tab=document.getElementsByTagName("table")[0];//獲取表格
    tr=document.getElementsByTagName("tr");
    th=document.getElementsByTagName("th");
    namedom=document.getElementById("mingzi");
    agedom=document.getElementById("age");
}
/*功能:添加行*/
function add(){
     tr_push = document.createElement("tr");//創建<tr>標簽
    for (var i = 0; i < th.length; ++i) {        
        if (i == 0) {
            td_push = document.createElement("td");
            td_push.innerHTML = tr.length;
//第一列的內容ID,排序,為tr的長度
        }
        if (i == 1) {
            td_push = document.createElement("td");
            td_push.innerHTML = namedom.value;
//第二列的內容姓名,為提取姓名框的內容
        }
        if (i == 2) {
            td_push = document.createElement("td");
            td_push.innerHTML = agedom.value;
//第二列的內容姓名,為提取年齡框的內容
        }
        if (i == 3) {
            td_push = document.createElement("td");
            td_push.innerHTML = "<button onClick=‘shan(this)‘>刪除</button>";
//將一個button標簽作為i=3的內容
//點擊時,調用方法刪除
        }
        tr_push.appendChild(td_push);
    }
    tab.appendChild(tr_push);    
}
/*功能:刪除行*/
function shan(obj) {
    obj.parentNode.parentNode.remove();
//移除button所在標簽的父標簽的父標簽(tr)

}
/*功能:隔行變色*/
function color(){
    for(var i = 0; i < tr.length; i=i+2)
//隔行變色,所以    i=i+2
    tr[i].style.background = "red";    
//給tr添加樣式background     
}

DOM練習 選擇框、表格添加、變色