DOM small case

1. Click the button above and below the page, along with the printing data change

html code

<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><</button>
<span>1</span>
<button>></button>
</td>
<td>￥1000</td>
</tr>
<tr>
<td>商品2</td>
<td>￥600</td>
<td align="center">
<button><</button>
<span>1</span>
<button>></button>
</td>
<td>￥600</td>
</tr>
<tr>
<td>商品3</td>
<td>￥12000</td>
<td align="center">
<button><</button>
<span>1</span>
<button>></button>
</td>
<td>￥12000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">Total：</td>
<td>￥13600</td>
</tr>
</tfoot>

</table>

js part

// find button
var btns = document.getElementsByTagName ( 'button' );

// Each traversal btns BTN
for (var I = 0; I <btns.length; I ++) {
; // add onclick event for each button btns [I] = the Calculate .onclick
}

the Calculate function () {
// find each span tag
var span = this.parentNode.getElementsByTagName ( 'span') [0];
var = n-the parseInt (span.innerHTML);

n += this.innerHTML == ">" ? 1 : n > 0 ? -1 : 0;
span.innerHTML = n;

// 价格
var price = parseFloat(this.parentNode.previousElementSibling.innerHTML.slice(1));
// console.log(price)

// total of each of the two fractions are rounded by writing Subtotal
this.parentNode.nextElementSibling.innerHTML = '¥' + (price * n) .toFixed (2);

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

for (var i = 0, sum = 0; i < tds.length; i++) {
sum += parseFloat(tds[i].innerHTML.slice(1));

}

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

2. The form of words a user name and password requirements, will be prompted to enter the complete and correct errors

html part

<form the above mentioned id = "form1">
<h2> increase administrator </ h2>
<the Table>
<TR>
<td> Name: </ td>
<td>
<the INPUT name = "username" />
<span> * < / span>
</ TD>
<TD>
<div class = "vali_Info">
combination of letters within 10 characters, digits, or underscores the
</ div>
</ TD>
</ TR>
<TR>
<TD> password: </ TD>
<TD>
<INPUT type = "password" name = "pwd" />
<span> * </ span>
</ TD>
<TD>
<div class = "vali_Info">. 6 digits </ div >
</ TD>
</ TR>
<TR>
<td></td>
<td colspan="2">
<input type="submit" value="保存" />
<input type="reset" value="重填" />
</td>
</tr>
</table>
</form>

js part

// find a name for the username input label
var = textName document.getElementsByName ( 'username') [0];
// find the inpu tag name is pwd
var pwdname = document.getElementsByName ( 'pwd') [0];
// Console .log (textName)

// pwdname element binding to focus and textName obtained
textName.onfocus = the getFocus;
pwdname.onfocus = the getFocus;

the getFocus function () {
// pattern appears to add text style stores text box
this.className = 'txt_focus';
next sibling of the current element // find the first child of the parent element, for clarity class attribute value
this.parentNode.nextElementSibling.firstElementChild.className = '';
}
// loses focus
textName.onblur = function () {
// regular text box
vali (this, / ^ \ w {1,10} $ /) ;
}
pwdname.onblur = function () {
// regular password
Vali (the this, / ^ \. 6 {D} $ /);
}

Vali function (TXT, REG) {
// clear pattern loses focus City
txt.className = '';
var div = txt.parentNode.nextElementSibling.firstElementChild;
div.className = 'vali_Info';

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

Click on a menu, if the current secondary menu is open the second level menu away, the small icon changes +
If the current secondary menu is launched off the secondary menu, a small icon changes - and put away the other two level menu
page can only have a secondary menu was expanded state

html part

js部分

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

}

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

// 否则如果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';

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

}

4.全选和取消全选

html部分

<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>

js部分

// 全选
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;
}

}

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;
}
}
}
}

Guess you like