DOM練習 選擇框、表格添加、變色
阿新 • • 發佈:2018-06-23
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練習 選擇框、表格添加、變色