DOM的小案例

概述1.点击页面的大于和小于按钮,相印的数据跟着改变 html代码 <table id="data" width="500px" border="1" cellspacing="0" align="center"> <thead> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>小计</th> </thead> <tbody> <tr> <td>商品1</td> <

1.点击页面的大于和小于按钮,相印的数据跟着改变@H_404_7@

HTML代码@H_404_7@

<table ID="data" wIDth="500px" border="1" cellspacing="0" align="center">
<thead>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>￥1000</td>
<td align="center">
<button>&lt;</button>
<span>1</span>
<button>&gt;</button>
</td>
<td>￥1000</td>
</tr>
<tr>
<td>商品2</td>
<td>￥600</td>
<td align="center">
<button>&lt;</button>
<span>1</span>
<button>&gt;</button>
</td>
<td>￥600</td>
</tr>
<tr>
<td>商品3</td>
<td>￥12000</td>
<td align="center">
<button>&lt;</button>
<span>1</span>
<button>&gt;</button>
</td>
<td>￥12000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">Total：</td>
<td>￥13600</td>
</tr>
</tfoot>@H_404_7@

</table>@H_404_7@

Js部分@H_404_7@

// 找到按钮
var btns = document.getElementsByTagname(‘button‘);@H_404_7@

// 遍历btns中的每一个btn
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = calculate; // 为每个按钮添加onclick事件
}@H_404_7@

function calculate() {
// 找到每个span标签
var span = this.parentNode.getElementsByTagname(‘span‘)[0];
var n = parseInt(span.INNERHTML);@H_404_7@

n += this.INNERHTML == "&gt;" ? 1 : n > 0 ? -1 : 0;
span.INNERHTML = n;@H_404_7@

// 价格
var price = parsefloat(this.parentNode.prevIoUsElementSibling.INNERHTML.slice(1));
// console.log(price)@H_404_7@

// 每个的总价 按2位小数四舍五入 写入小计
this.parentNode.nextElementSibling.INNERHTML = ‘￥‘ + (price * n).toFixed(2);@H_404_7@

// 小计
var tds = document.querySelectorAll(‘table#data>tbody td:last-child‘);@H_404_7@

for (var i = 0,sum = 0; i < tds.length; i++) {
sum += parsefloat(tds[i].INNERHTML.slice(1));@H_404_7@

}@H_404_7@

//总价
var td = document.querySelector(‘table#data>tfoot td:last-child‘);
td.INNERHTML = ‘￥‘ + sum.toFixed(2);
}@H_404_7@

@H_404_7@@H_404_7@

 @H_404_7@

2.表单中用户名和密码的字数规定,输入完成后会提示错误和正确@H_404_7@

HTML部分@H_404_7@

<style>
table {
wIDth: 700px
}
/*父元素下的第1个，第n个，最后一个td子元素*/

td:first-child {
wIDth: 60px
}
/*IE不支持nth-child*/

td:nth-child(2) {
wIDth: 200px
}
/*IE*/

td:first-child+td {
wIDth: 200px
}
/*IE不支持--可以靠总宽度来调节
td:last-child{wIDth:340px}*/

td span {
color: red
}

.vali_Info {
/* 页面初始，验证消息不显示 */
display: none;
}

.txt_focus {
/*当文本框获得焦点时穿上*/
border-top: 2px solID black;
border-left: 2px solID black;
background-color: #ffcc00;
}
/*当文本框失去焦点时脱下*/

.vali_success,
.vali_fail {
background-repeat: no-repeat;
background-position: left center;
display: block;
}
/* 验证消息：验证通过时的样式 */

.vali_success {
background-image: url("img/ok.png");
padding-left: 20px;
wIDth: 0px;
height: 20px;
overflow: hIDden;
}
/* 验证消息：验证失败时的样式 */

.vali_fail {
background-image: url("img/warning.png");
border: 1px solID red;
background-color: #ddd;
color: Red;
padding-left: 30px;
}
</style>@H_404_7@

<form ID="form1">
<h2>增加管理员</h2>
<table>
<tr>
<td>姓名：</td>
<td>
<input name="username" />
<span>*</span>
</td>
<td>
<div >
10个字符以内的字母、数字或下划线的组合
</div>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="pwd" />
<span>*</span>
</td>
<td>
<div >6位数字</div>
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="submit" value="保存" />
<input type="reset" value="重填" />
</td>
</tr>
</table>
</form>@H_404_7@

Js部分@H_404_7@

// 找到name为username input标签
var textname = document.getElementsByname(‘username‘)[0];
// 找到name为pwd的 inpu标签
var pwdname = document.getElementsByname(‘pwd‘)[0];
// console.log(textname)@H_404_7@

// 为textname和pwdname元素绑定获得的焦点
textname.onfocus = getFocus;
pwdname.onfocus = getFocus;@H_404_7@

function getFocus() {
// 给文本加上样式 店家文本框时出现的样式
this.classname = ‘txt_focus‘;
// 找到当前元素的父元素的下一个兄弟的第一个子元素,为其清楚class属性值
this.parentNode.nextElementSibling.firstElementChild.classname = ‘‘;
}
// 失去焦点
textname.onblur = function() {
// 文本框的正则
vali(this,/^\w{1,10}$/);
}
pwdname.onblur = function() {
// 密码的正则
vali(this,/^\d{6}$/);
}@H_404_7@

function vali(txt,reg) {
//失去焦点市清楚样式
txt.classname = ‘‘;
var div = txt.parentNode.nextElementSibling.firstElementChild;
div.classname = ‘vali_Info‘;@H_404_7@

// 正则检测
// var reg = /^\w{1,10}$/;
if (reg.test(txt.value)) {
div.classname = "vali_success";
} else {
div.classname = "vali_fail";
}
}@H_404_7@

@H_404_7@

@H_404_7@@H_404_7@

@H_404_7@@H_404_7@

3.@H_404_7@

点击一级菜单，如果当前二级菜单是打开状态则二级菜单收起，小图标变成+
如果当前二级菜单是关闭状态则展开二级菜单，小图标变成- 并且收起其他的二级菜单
页面中的二级菜单最多只能有一个是展开状态@H_404_7@

HTML部分@H_404_7@

<style>
li {
List-style: none;
}

li span {
padding-left: 20px;
cursor: pointer;
}

.open {
background: url("img/minus.png") no-repeat center left;
}

.closed {
background: url("img/add.png") no-repeat center left;
}

.show {
display: block;
}

.hIDe {
display: none;
}
</style>@H_404_7@

<ul >
<li>
<span >考勤管理</span>
<ul >
<li>日常考勤</li>
<li>请假申请</li>
<li>加班/出差</li>
</ul>
</li>
<li>
<span >信息中心</span>
<ul >
<li>通知公告</li>
<li>公司新闻</li>
<li>规章制度</li>
</ul>
</li>
<li>
<span >协同办公</span>
<ul >
<li>公文流转</li>
<li>文件中心</li>
<li>内部邮件</li>
<li>即时通信</li>
<li>短信提醒</li>
</ul>
</li>
</ul>@H_404_7@

Js部分@H_404_7@

// 找到span标签
var span = document.getElementsByTagname(‘span‘)
// 遍历span
for (var i = 0; i < span.length; i++) {
span[i].onclick = fun;@H_404_7@

}@H_404_7@

function fun() {
// 判断 如果一级菜单打开
if (this.classname == ‘open‘) {
// 就将其关闭
this.classname = ‘closed‘;
// 将其内容隐藏
this.nextElementSibling.classname = ‘hIDe‘;@H_404_7@

// 否则 如果classNanme为closed
} else if (this.classname == ‘closed‘) {
for (var j = 0; j < span.length; j++) {
if (span[j].classname == ‘open‘) {
span[j].classname = ‘closed‘;
// 修改span的下一个兄弟,修改span的classname为hIDe
span[j].nextElementSibling.classname = ‘hIDe‘;@H_404_7@

}
}
// 修改当前span的classname为open
// 修改span的下一个兄弟,将其classname改为show
this.classname = ‘open‘;
this.nextElementSibling.classname = ‘show‘;
}@H_404_7@

}@H_404_7@

@H_404_7@

@H_404_7@@H_404_7@

 @H_404_7@

4.全选和取消全选@H_404_7@

HTML部分@H_404_7@

<style>
/*伪类选择器*/

table>thead th:first-child>input {
/* border: 2px red solID; */
background-color: aliceblue;
}

table>tbody td:first-child>input {
border: 2px blue solID;
}
</style>@H_404_7@

<h2>管理员列表</h2>
<table border="1px" wIDth="500px" cellspacing="0">
<thead>
<tr>
<th><input type="checkBox" />全选</th>
<th>管理员ID</th>
<th>姓名</th>
<th> *** 作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkBox" name="adminID" /></td>
<td>1</td>
<td>Tester</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkBox" name="adminID" /></td>
<td>2</td>
<td>Manager</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkBox" name="adminID" /></td>
<td>3</td>
<td>Analyst</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkBox" name="adminID" /></td>
<td>4</td>
<td>admin</td>
<td>修改 删除</td>
</tr>
</tbody>
</table>@H_404_7@

 @H_404_7@

Js部分@H_404_7@

// 全选
var taball = document.querySelector(‘table>thead th:first-child>input‘);
// console.log(taball);
var chk = document.querySelectorAll(‘table>tbody td:first-child>input‘);
// console.log(chk);
taball.onclick = function() {
for (var i = 0; i < chk.length; i++) {
chk[i].checked = this.checked;
}@H_404_7@

}@H_404_7@

for (var j = 0; j < chk.length; j++) {
chk[j].onclick = function() {
for (var j = 0; j < chk.length; j++) {
if (chk[j].checked == false) {
taball.checked = false;
break
} else {
taball.checked = true;
}
}
}
}@H_404_7@

@H_404_7@

@H_404_7@@H_404_7@ 总结

以上是内存溢出为你收集整理的DOM的小案例全部内容，希望文章能够帮你解决DOM的小案例所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。