-
.rows
表格元素特有的屬性，存放節(jié)點(diǎn)所有tr元素
查看全部 -
<!DOCTYPE html>
<html>
<head>
?<meta charset="UTF-8">
?<title></title>
?<style type="text/css">
??table {
???border-collapse: collapse;
??}
??td {
???border: 1px solid #333333;
??}
?</style>
?<script type="text/javascript">??window.onload = function () {
???// 獲取元素
???var table = document.getElementById('table');
???var tr = table.getElementsByTagName('tr');
???var del = document.getElementById('del');
???//事件函數(shù)
???del.onclick = function(){
????for(var i = 0; i<tr.length; i++){
?????var seItem = tr[i].getElementsByTagName('input')[0];
?????if (seItem.checked){
??????tr[i].parentNode.removeChild(tr[i]);
??????i--;
?????}
????}
???}
??}
?</script>
</head>
<body>
?<table id="table">
??<tr>
???<td><input type="checkbox"/></td>
???<td>1</td>
??</tr>
??<tr>
???<td><input type="checkbox"/></td>
???<td>2</td>
??</tr>
??<tr>
???<td><input type="checkbox"/></td>
???<td>3</td>
??</tr>
??<tr>
???<td><input type="checkbox"/></td>
???<td>4</td>
??</tr>
?</table>
?<button id='del'>刪除</button>
</script>
</body>
</html>查看全部 -
<!DOCTYPE html>
<html>
<head>
??????????????? <meta charset="UTF-8">
??????????????? <title></title>
??????????????? <style type="text/css">
??????????????????????????????? input { width: 60px; }
??????????????????????????????? div { margin: 10px 0 }
??????????????? </style>
</head>
<body>
??????????????? <input id="num1" type="text"/>
??????????????? <input id="num2" type="text"/>
??????????????? <div>結(jié)果：<span id="ret"></span></div>
??????????????? <button>+</button>
??????????????? <button>-</button>
??????????????? <button>*</button>
??????????????? <button>/</button>??????????????? <script type="text/javascript">
??????????????????????????????? window.onload = function () {
??????????????????????????????????????????????? // 獲取元素
?????????????????????????????????????????????? var num1 = document.getElementById('num1');
??????????????????????????????????????????????? var num2 = document.getElementById('num2');
??????????????????????????????????????????????? var ret = document.getElementById('ret');
??????????????????????????????????????????????? var btns = document.getElementsByTagName('button');
??????????????????????????????????????????????? var p = parseInt;??????????????????????????????????????????????? //為按鈕添加點(diǎn)擊事件，計(jì)算結(jié)果
??????????????????????????????????????????????? for (var i=0; i<btns.length; i++){
??????????????????????????????????????????????????????????????? btns[i].onclick = function(){
??????????????????????????????????????????????????????????????????????????????? switch(this.innerText){
??????????????????????????????????????????????????????????????????????????????????????????????? case? "+" :
??????????????????????????????????????????????????????????????????????????????????????????????????????????????? ret.innerHTML =?? p(num1.value) + p(num2.value);
??????????????????????????????????????????????????????????????????????????????????????????????????????????????? break;
??????????????????????????????????????????????????????????????????????????????????????????????? case? "-"? :
??????????????????????????????????????????????????????????????????????????????????????????????????????????????? ret.innerHTML =?? p(num1.value) - p(num2.value);
??????????????????????????????????????????????????????????????????????????????????????????????????????????????? break;
?????????????????????????????????????????????????????????????????????????????????????????????? case?? "*" :?
??????????????????????????????????????????????????????????????????????????????????????????????????????????????? ret.innerHTML =?? p(num1.value) * p(num2.value);
??????????????????????????????????????????????????????????????????????????????????????????????????????????????? break;
??????????????????????????????????????????????????????????????????????????????????????????????? case? "/"? :
?????????????????????????????????????????????????????????????????????????????????????????????????????????????? var? result =? p(num1.value) / p(num2.value);
?????????????????????????????????????????????????????????????????????????????????????????????????????????????? ret.innerHTML = result.toFixed(3);
?????????????????????????????????????????????????????????????????????????????????????????????????????????????? break;
??????????????????????????????????????????????????????????????????????????????? }
?????????????????????????????????????????????????????????????? }
?????????????????????????????????????????????? }
???????????????????????????????? }
??????????????? </script>
</body>
</html>查看全部 -
<!DOCTYPE html>
<html>
<head>
?<meta charset="UTF-8">
?<title></title>
?<style type="text/css">
??*{
???margin: 0;
???padding: 0;
???list-style: none;
??}
??body {
???padding: 20px;
??}??li {
???float: left;
???margin: 20px;
??}
??#total {
???clear: both;
??}
?</style>?<script type="text/javascript">
??window.onload = function () {
???// 獲取元素
???var all = document.getElementById('all');
???var list = document.getElementById('list');
???var inputs = list.getElementsByTagName('input');
???var total = document.getElementById('total');???// 計(jì)算已選項(xiàng)的總數(shù)
???function selSum() {
????var ret = 0;
????var len = inputs.length;
????for (var i = 0; i<len; i++){
?????if (inputs[i].checked) {
??????ret++;
??????
?????}
????}
????total.innerHTML = '已選：' + ret + ' 項(xiàng)';
???}???// 全選事件
???all.onchange = function () {
????var len = inputs.length;
????for (var j = 0; j < len; j++){
?????inputs[j].checked = all.checked;
????}
????selSum();
???}???// 每個(gè)選項(xiàng)的事件
???for (var k = 0, len = inputs.length; k< len; k++) {
????inputs[k].onchange = function () {
?????selSum();
?????if (inputs[k].checked == false) {
??????all.checked = false;
?????}
????}
???}
??}
?</script>
</head>
<body>
<div><label><input id="all" type="checkbox"/>全選</label></div>
<ul id="list">
?<li><label><input type="checkbox"/>選項(xiàng)1</label></li>
?<li><label><input type="checkbox"/>選項(xiàng)2</label></li>
?<li><label><input type="checkbox"/>選項(xiàng)3</label></li>
?<li><label><input type="checkbox"/>選項(xiàng)4</label></li>
?<li><label><input type="checkbox"/>選項(xiàng)5</label></li>
?<li><label><input type="checkbox"/>選項(xiàng)6</label></li>
</ul>
<div id="total">已選：0 項(xiàng)</div>
</body>
</html>查看全部 -
<!DOCTYPE html>
<html>
<head>
?<meta charset="UTF-8">
?<title></title>
?<script type="text/javascript">
??window.onload = function () {
???// h獲取元素
???var list = document.getElementById('list');
???var inputs = list.getElementsByTagName('input');
???var ok = document.getElementById('ok');
???var ret = document.getElementById('ret');???// 添加按鈕點(diǎn)擊事件
???ok.onclick = function () {
????var i = 0, len = inputs.length, checked = 0;????// 遍歷所有的勾選框，計(jì)算出已選總數(shù),存放在變量checked
????while(i < len) {
???? ?if (inputs[i].checked){
???? ??checked += 1;
???? ?}
?????i++;
????}
????//根據(jù)checked值更新結(jié)果
????if (checked >0){
?????ret.style.display = "block";
?????ret.innerHTML = "已選："+checked;
????}
????else{
?????ret.style.display = "none";
?????ret.innerHTML = "";
????}
???}
??}
?</script>
</head>
<body>
?<ul id="list">
??<li><label><input type="checkbox"/>1</label></li>
??<li><label><input type="checkbox"/>2</label></li>
??<li><label><input type="checkbox"/>3</label></li>
??<li><label><input type="checkbox"/>4</label></li>
??<li><label><input type="checkbox"/>5</label></li>
?</ul>
?<button id="ok">確定</button>
?<p id="ret" ></p>
</body>
</html>查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style type="text/css">
? ? ? ? #btn {
? ? ? ? ? ? display: none;
? ? ? ? }
? ? </style>
? ? <script type="text/javascript">
? ? ? ? window.onload = function () {
? ? ? ? ? ? // 獲取元素
? ? ? ? ? ? var inp = document.getElementById('inp');
? ? ? ? ? ? var btn = document.getElementById('btn');
? ? ? ? ? ??
? ? ? ? ? ? inp.onchange = function () {
? ? ? ? ? ? ? ? var checked = this.checked;
? ? ? ? ? ? ? ? // 根據(jù)checked 值來(lái)顯示隱藏按鈕
? ? ? ? ? ? ? ? if(checked){
? ? ? ? ? ? ? ? ? ? btn.style.display = 'block';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</head>
<body>
<div>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
</div>
<label><input id="inp" type="checkbox"/> 同意條款</label>
<p><button id="btn">下一步</button></p>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<html>
<head>
?<meta charset="UTF-8">
?<title>表格</title>
?<style type="text/css">
??????? table {
??????????? border-collapse: collapse;
??????????? background-color: #CCC;
??????? }
??????? td {
??????????? border: 1px solid black;
??????????? width: 100px;
??????????? text-align: center;;
??????? }
??? </style>
</head><body>
<!--table表格HTML-->
?<table>
??<tr>
???<td>html</td>
???<td>css</td>
???<td>JS</td>
??</tr>
??<tr>
???<td colspan="2">JQ</td>
???<!-- <td>java</td> -->
???<td>php</td>
??</tr>
??<tr>
???<td>Android</td>
???<td>Swift</td>
???<td>ios</td>
??</tr>
?</table>
</body>
</html>查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style type="text/css">
? ? ? ? #btn {
? ? ? ? ? ? display: none;
? ? ? ? }
? ? </style>
? ? <script type="text/javascript">
? ? ? ? window.onload = function () {
? ? ? ? ? ? // 獲取元素
? ? ? ? ? ? var inp = document.getElementById('inp');
? ? ? ? ? ? var btn = document.getElementById('btn');
? ? ? ? ? ? inp.onchange = function () {
? ? ? ? ? ? ? ? var checked = this.checked;
? ? ? ? ? ?if(checked){
? ? ? ? ? ? ? ? ?btn.style.display="block";
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ?btn.style.display="none";
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</head>
<body>
<div>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
? ? <p>我是內(nèi)容條款！</p>
</div>
<label><input id="inp" type="checkbox"/> 同意條款</label>
<p><button id="btn">下一步</button></p>
</body>
</html>
查看全部 -
rows:表格元素特有的屬性，存放節(jié)點(diǎn)所有tr元素
查看全部 -
.rows 表格里面所有tr查看全部
-
//計(jì)算已選項(xiàng)的總數(shù)
說(shuō)明一個(gè)變量ret，初始值為0；
遍歷所有列表項(xiàng)，如果此項(xiàng)已選，ret加1；
把ret的最終值寫入顯示結(jié)果的元素的html里；（id名.inner HTML的意思是把class=id名里的代碼內(nèi)容更換。ps：innertext的意思是把內(nèi)容里的文本內(nèi)容更換。）
function showToatal(){
var ret=0,i=0;len=inputs.length;
while(i<len){
if(inputs[i].checked){
ret++;}
i++;}
total.innerHTML='已選：'+ret+'項(xiàng)'
}
//全選事件
all.onchange=function(){ //all.onchange說(shuō)明全選框已被點(diǎn)擊激活
var i=0;len=inputs.length;
while(i<len){
inputs[i].checked=all.checked; //通過(guò)遍歷把全選的激活狀態(tài)賦值給每一個(gè)選項(xiàng)
i++;}
showToatal();//調(diào)用showToatal函數(shù)進(jìn)行innerHTML代碼更新。
}
//每個(gè)選項(xiàng)的事件
1.遍歷所有項(xiàng)，為每一項(xiàng)添加onchange觸發(fā)事件，調(diào)用showToatal計(jì)算已選項(xiàng)個(gè)數(shù)。
for(var i=0,len=inputs.length;i<len;i++){
inputs[i].onchange=function(){
showToatal();
if(!this.checked){
all.checked=false;
}
};
}
小結(jié)：第一步需要考慮的是通過(guò)遍歷判斷該項(xiàng)是否被觸發(fā)，并計(jì)算已選項(xiàng)；因?yàn)楹竺婷恳徊蕉家玫竭@個(gè)函數(shù)
第二步：判斷大范圍的全選事件，也是在全選框被激活后通過(guò)遍歷，把全選框的checked值賦給每一項(xiàng)，并調(diào)用函數(shù)showToatal進(jìn)行計(jì)算已選項(xiàng)。
第三步：考慮小范圍的單選事件，通過(guò)遍歷inputs[i].onchange觸發(fā)，調(diào)用showToatal函數(shù)計(jì)算已選項(xiàng)，在判斷是否全選！this.checked的意思是這個(gè)選項(xiàng)未選，this.checked的意思是這個(gè)選項(xiàng)已選。通過(guò)這個(gè)判斷就可以使全選的值變?yōu)閒alse。
查看全部
舉報(bào)