广州网站建设丿新科送推广,网络推广方案swot分析,大数据营销的运营方式有哪些,广州市律师网站建设价格一、目标
制作一个表格#xff0c;第一行分别为选择、主机名和端口增加一个按钮#xff0c;名称为添加点击添加按钮#xff0c;出现一个半透明的遮罩层#xff0c;遮罩层中间有个弹出框弹出框中有两个输入框#xff0c;分别为主机名和端口#xff0c;还有两个按钮#…一、目标
制作一个表格第一行分别为选择、主机名和端口增加一个按钮名称为添加点击添加按钮出现一个半透明的遮罩层遮罩层中间有个弹出框弹出框中有两个输入框分别为主机名和端口还有两个按钮分别为确定和取消点击取消按钮遮罩层和弹出框消失表格下方增加三个按钮分别为 全选、取消和反选点击全选则选择这一列的选择框全部选上取消则全部不选择反选则和已选状态相反。 效果 二、事例 2.1 制作表格和添加按钮 !DOCTYPE html
html langen
head
meta charsetUTF-8
titleTitle/title
/head
body
div
!--添加按钮--
input typebutton value添加 /
/div
div
!--表格--
table border1
thead
tr
th选择/th
th主机名/th
th端口/th
/tr
/thead
tbody
tr
tdinput typecheckbox //td
td1.1.1.1/td
td191/td
/tr
tr
tdinput typecheckbox //td
td1.1.1.2/td
td192/td
/tr
tr
tdinput typecheckbox //td
td1.1.1.3/td
td193/td
/tr
/tbody
/table
/div
/body
/html
2.2 实现遮罩层和弹出框 # body 中html
!--遮罩层--
div classc1/div
!--弹出框--
div classc2
div stylemargin-left: 120px; margin-top: 15px
span主机名:/span
input typetext /
/div
div stylemargin-left: 120px; margin-top: 18px
span端口号:/span
input typetext /
/div
div stylemargin-left: 200px; margin-top: 20px
input typebutton value确定
input typebutton 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点击添加出现遮罩层和弹出框点击取消则没有 利用displaynone可以是标签消失的特性为遮罩层和弹出框都在增加一个hidden的CSS样式。修改原理的HTML代码 # 增加一个CSS样式
.hidden{
display: none;
}
# 修改遮罩层和弹出框
!--遮罩层--
div idi1 classc1 hidden
!--弹出框--
div idi2 classc2 hidden
# 为添加和取消按钮增加一个onclick事件
!--添加按钮--
input typebutton value添加 onclickAddModel(); /
input typebutton value取消 onclickHideModel(); /
# 添加JS代码
!--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 stylepadding: 5px 0
input typebutton value全选 onclickChooseAll(); /
input typebutton value取消 onclickCancelAll(); /
input typebutton value反选 onclickReverseAll(); /
/div
2为tbody增加一个id属性 tbody idtb
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 i0;it_list.length;i ){
var check t_list[i].children[0].children[0];
// 设置checkentrue为选中
check.checked true
}
}
// 取消
function CancelAll() {
var tag document.getElementById(tb);
var t_list tag.children;
for(var i0;it_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 i0;it_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 langen
head
meta charsetUTF-8
titleTitle/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 typebutton value添加 onclickAddModel(); /
/div
div
!--表格--
table border1
thead
tr
th选择/th
th主机名/th
th端口/th
/tr
/thead
tbody idtb
tr
tdinput typecheckbox //td
td1.1.1.1/td
td191/td
/tr
tr
tdinput typecheckbox //td
td1.1.1.2/td
td192/td
/tr
tr
tdinput typecheckbox //td
td1.1.1.3/td
td193/td
/tr
/tbody
/table
/div
!--遮罩层--
div idi1 classc1 hidden/div
!--弹出框--
div idi2 classc2 hidden
div stylemargin-left: 120px; margin-top: 15px
span主机名:/span
input typetext /
/div
div stylemargin-left: 120px; margin-top: 18px
span端口号:/span
input typetext /
/div
div stylemargin-left: 200px; margin-top: 20px /
input typebutton value确定
input typebutton value取消 onclickHideModel(); /
/div
/div
!--全选、取消和反选--
div stylepadding: 5px 0
input typebutton value全选 onclickChooseAll(); /
input typebutton value取消 onclickCancelAll(); /
input typebutton value反选 onclickReverseAll(); /
/div
!--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);
}
// 全选
function ChooseAll() {
// tag获取标签tbody
var tag document.getElementById(tb);
// 通过children获取所有子标签组成的数组
var t_list tag.children;
/*
循环t_list,先获取tr即每行
再获取每行中的第一个元素即第一个td
再获取第一个td中的第一个属性checkbox
*/
for(var i0;it_list.length;i ){
var check t_list[i].children[0].children[0];
// 设置checkentrue为选中
check.checked true
}
}
// 取消
function CancelAll() {
var tag document.getElementById(tb);
var t_list tag.children;
for(var i0;it_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 i0;it_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
