<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -200px; z-index: 10; } </style> </head> <body style="margin: 0"> <div> <input type="button" value="添加" onclick="ShowModel();"/> <input type="button" value="全选" onclick="ChooseAll();"/> <input type="button" value="取消" onclick="CancleAll(); "/> <input type="button" value="反选" onclick="ReverseAll();"/> <table> <thead> <tr> <th>选择</th> <th>主机名</th> <th>端口</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox"> </td> <td> 1.1.1.1 </td> <td>190</td> </tr> <tr> <td><input type="checkbox" id="test"/></td> <td>1.1.1.2</td> <td>192</td> </tr> <tr> <td><input type="checkbox"/></td> <td>1.1.1.3</td> <td>193</td> </tr> </tbody> </table> </div> <!-- 遮罩层开始 --> <div id ='i1' class="c1 hide"></div> <!-- 遮罩层结束 --> <div id="i2" class="c2 hide"> <p><input type="text"></p> <p><input type="text"></p> <p> <input type="button" value="取消" onclick="HideModel();"/> <input type="button" value="确认"/> </p> </div> <!-- 弹出框结束 --> <script> function ShowModel() { document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } function HideModel() { document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } function ChooseAll() { var tbody= document.getElementById('tb'); //获取所有的tr var tr_list = tbody.children; for (var i =0;i<tr_list.length;i++){ // 循环所有的tr,current_tr var current_tr = tr_list[i]; var checkbox=current_tr.children[0].children[0]; checkbox.checked=true } } function CancleAll() { var tbody = document.getElementById('tb'); //获取所有的tr var tr_list = tbody.children; for (var i =0;i<tr_list.length;i++){ // 循环所有的tr,current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; checkbox.checked=false } } function ReverseAll() { var tbody = document.getElementById('tb'); //获取所有的tr var tr_list = tbody.children; for (var i=0;i<tr_list.length;i++){ // 循环所有的tr,current_tr var current_tr = tr_list[i]; var checkbox = current_tr.children[0].children[0]; if(checkbox.checked){checkbox.checked=false;}else {checkbox.checked=true;} } } </script> </body> </html>
Dom操作
1.找到标签
获取单个元素
document.getElementById('i1')
获取多个元素(列表)
document.getElementsByTagName('div')
获取多个元素(列表)
document.getElementsByClassName('c1')
a.直接找:
document.getElementById(arg) // 根据ID获取一个标签对象
document.getElementsByClassName(arg) // 根据class属性获取标签对象集合
document.getElementsByName(arg) // 根据name属性值获取标签对象集合
document.getElementsByTagName(arg) // 根据标签名获取标签对象集合
b.间接找
tag=document.getElementById('i1')
tag.parentElement // 找当前标签对象的父标签对象
tag.children // 找当前标签对象的所有子标签对象
tag.firstElementChild // 找当前标签对象的第一个子标签对象
tag.lastElementChild // 找当前标签对象最后一个子标签对象
tag.nextElementtSibling // 找当前标签对象下一个兄弟标签对象
tag.previousElementSibling // 找当前标签对象上一个兄弟标签对象
2.标签操作
获取标签中的文本内容
标签.innerText
对标签内部文本进行重新赋值
标签.innerText =""
b.classname
tag.className=> 直接整体做操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名')删除指定样式
c.checkbox
//获取值
checkbox.checked
//赋值
checkbox.checked = true
写的时候注意:
tbody要放在table下
JavaScript必须加分号