當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

模态对话框和全选反选

發布時間：2023/12/2 编程问答 45 豆豆

生活随笔收集整理的這篇文章主要介紹了模态对话框和全选反选小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、目標

制作一個表格，第一行分別為選擇、主機名和端口
增加一個按鈕，名稱為添加
點擊添加按鈕，出現一個半透明的遮罩層，遮罩層中間有個彈出框
彈出框中有兩個輸入框，分別為主機名和端口，還有兩個按鈕，分別為確定和取消
點擊取消按鈕，遮罩層和彈出框消失
表格下方增加三個按鈕，分別為全選、取消和反選
點擊全選則選擇這一列的選擇框全部選上，取消則全部不選擇，反選則和已選狀態相反。

　　效果：

二、事例

　　2.1 制作表格和添加按鈕　　

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div><input type="button" value="添加" /></div><div><table border="1"><thead><tr><th>選擇</th><th>主機名</th><th>端口</th></tr></thead><tbody><tr><td><input type="checkbox" /></td><td>1.1.1.1</td><td>191</td></tr><tr><td><input type="checkbox" /></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> </body> </html>

　　2.2 實現遮罩層和彈出框　

# body 中html<div class="c1"></div><div class="c2"><div style="margin-left: 120px; margin-top: 15px"><span>主機名:</span><input type="text" /></div><div style="margin-left: 120px; margin-top: 18px"><span>端口號:</span><input type="text" /></div><div style="margin-left: 200px; margin-top: 20px"><input type="button" value="確定"><input type="button" value="取消"></div></div># css樣式 <style>.c1{position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: black;opacity: 0.6;z-index: 9;}.c2{position: fixed;height: 150px;width: 500px;top: 50%;left: 50%;margin-top: -200px;margin-left: -250px;background-color: white;z-index: 10;} </style>

　　效果：

　　2.3 實現js，點擊添加出現遮罩層和彈出框，點擊取消則沒有

　　利用display：none可以是標簽消失的特性，為遮罩層和彈出框都在增加一個hidden的CSS樣式。修改原理的HTML代碼　

# 增加一個CSS樣式 .hidden{display: none;}# 修改遮罩層和彈出框  <div id="i1" class="c1 hidden">  <div id="i2" class="c2 hidden"># 為添加和取消按鈕增加一個onclick事件  <input type="button" value="添加" onclick="AddModel();" /><input type="button" value="取消" onclick="HideModel();" /># 添加JS代碼 <script>function AddModel() {document.getElementById('i1').classList.remove('hidden');document.getElementById('i2').classList.remove('hidden');}function HideModel() {document.getElementById('i1').classList.add('hidden');document.getElementById('i2').classList.add('hidden');}</script>

　　實現效果：點擊添加按鈕則出現遮罩層和彈出框，點擊取消則恢復原樣

　　2.4 實現全選、取消和反選的功能

?　　（1）增加3個按鈕功能

<div style="padding: 5px 0"><input type="button" value="全選" onclick="ChooseAll();" /><input type="button" value="取消" onclick="CancelAll();" /><input type="button" value="反選" onclick="ReverseAll();" /></div>

　　（2）為<tbody>增加一個id屬性　

　　（3）編輯JS　

// 全選function ChooseAll() {// tag獲取標簽<tbody>var tag = document.getElementById('tb');// 通過children獲取所有子標簽組成的數組var t_list = tag.children;/*循環t_list,先獲取tr即每行再獲取每行中的第一個元素，即第一個td再獲取第一個td中的第一個屬性checkbox*/for(var i=0;i<t_list.length;i ){var check = t_list[i].children[0].children[0];// 設置checken，true為選中check.checked = true}}// 取消function CancelAll() {var tag = document.getElementById('tb');var t_list = tag.children;for(var i=0;i<t_list.length;i ){var check = t_list[i].children[0].children[0];check.checked = false}}// 反選function ReverseAll() {var tag = document.getElementById('tb');var t_list = tag.children;for(var i=0;i<t_list.length;i ){var check = t_list[i].children[0].children[0];if(check.checked){check.checked = false;}else {check.checked = true;}}}

　　完整代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.hidden{display: none;}.c1{position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: black;opacity: 0.6;z-index: 9;}.c2{position: fixed;height: 150px;width: 500px;top: 50%;left: 50%;margin-top: -200px;margin-left: -250px;background-color: white;z-index: 10;}</style> </head> <body><div><input type="button" value="添加" onclick="AddModel();" /></div><div><table border="1"><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>191</td></tr><tr><td><input type="checkbox" /></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 hidden"></div><div id="i2" class="c2 hidden"><div style="margin-left: 120px; margin-top: 15px"><span>主機名:</span><input type="text" /></div><div style="margin-left: 120px; margin-top: 18px"><span>端口號:</span><input type="text" /></div><div style="margin-left: 200px; margin-top: 20px" /><input type="button" value="確定"><input type="button" value="取消" onclick="HideModel();" /></div></div><div style="padding: 5px 0"><input type="button" value="全選" onclick="ChooseAll();" /><input type="button" value="取消" onclick="CancelAll();" /><input type="button" value="反選" onclick="ReverseAll();" /></div><script>function AddModel() {document.getElementById('i1').classList.remove('hidden');document.getElementById('i2').classList.remove('hidden');}function HideModel() {document.getElementById('i1').classList.add('hidden');document.getElementById('i2').classList.add('hidden');}// 全選function ChooseAll() {// tag獲取標簽<tbody>var tag = document.getElementById('tb');// 通過children獲取所有子標簽組成的數組var t_list = tag.children;/*循環t_list,先獲取tr即每行再獲取每行中的第一個元素，即第一個td再獲取第一個td中的第一個屬性checkbox*/for(var i=0;i<t_list.length;i ){var check = t_list[i].children[0].children[0];// 設置checken，true為選中check.checked = true}}// 取消function CancelAll() {var tag = document.getElementById('tb');var t_list = tag.children;for(var i=0;i<t_list.length;i ){var check = t_list[i].children[0].children[0];check.checked = false}}// 反選function ReverseAll() {var tag = document.getElementById('tb');var t_list = tag.children;for(var i=0;i<t_list.length;i ){var check = t_list[i].children[0].children[0];if(check.checked){check.checked = false;}else {check.checked = true;}}}</script> </body></html>

更多專業前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的模态对话框和全选反选的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： js中的 return false;
下一篇： img、列表和table标签