JS中级 - 02：表单、表格
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
返回文档中所有指定类名的元素集合，作为 NodeList 对象。
自定义 getElementsByClassName 方法
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8">
<title>Document</title><script type="text/javascript">
window.onload =function (argument) {
var oUl1 = document.getElementById('ul1');
console.info(oUl1)
var aLi = getElementsByClassName(oUl1,'li','box');
//设置 aLi 背景色
for (var i = 0; i < aLi.length; i++) {
aLi[i].style.background = 'red';
}alert(aLi.length);
//自定义getElementsByClassName方法
function getElementsByClassName(parent,tagName,className){
var aEls = parent.getElementsByTagName(tagName);
var arr = [];for (var i = 0; i < aEls.length; i++) {
var aClassName = aEls[i].className.split(' ');
console.log(aClassName.length);
for (var j = 0; j < aClassName.length; j++) {
if (aClassName[j] == className) {
arr.push(aEls[i]);
//class="box box" 出于各种原因，出现这种情况
//用break只向 arr 添加第1个 box
break;
} }// if (aEls[i].className == className) {
// arr.push(aEls[i]);
// }
}return arr;
}}</script></head><body><ul id ="ul1">
<li>1111111</li>
<li class="box box">2222222</li>
<li class="box1">3333333</li>
<li class="box box2">4444444</li>
</ul><ul id="ul2">
<li>1111111</li>
<li class="box box">2222222</li>
<li class="box1">3333333</li>
<li class="box box2">4444444</li>
</ul><p class="box"></p>
</body></html> tHead :表格头
tBodies：表格正文 //数组
tFoot：表格尾
rows：行 //数组
cells ：列 //数组
<table id="tab1" width="80%" border="1px">
<thead><tr>
<th>编号</th>
<th>Name</th> <th>Sex</th><th>操作</th>
</tr>
</thead> <tbody> <tr><td>1</td>
<td>Li Lei</td> <td>男</td> <td><a href="javascript:;">删除</a>
</td> </tr> <tr><td>2</td>
<td>Han MeiMei</td> <td>女</td> <td><a href="javascript:;">删除</a>
</td> </tr> </tbody> </table> JS方法
/*
tHead :表格头 tBodies ：表格正文 tFoot ：表格尾 rows ：行 cells ：列 */console.log("tHead:");
console.log(oTable.tHead); //<tHead>..</tHead>
console.log("tBodies:");
console.log(oTable.tBodies); //[tbody]
console.log("tFoot:");
console.log(oTable.tFoot); //null
console.log("rows:");
console.log(oTable.rows); //[tr,tr,tr]
console.log("cells:");
console.log(oTable.cells); // undefined
//console.info(oTable.children[1].children[1].children[1].innerHTML) //Han MeiMei
console.info(oTable.tBodies[0].rows[1].cells[1].innerHTML) //Han MeiMei
表格的创建
数据添加
隔行变色
删除一行
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8">
<title>Document</title><script type="text/javascript">
window.onload = function (argument) {
var data = [{id:1,username:'leo',sex:'男'},
{id:2,username:'xiaomei',sex:'女'},
{id:3,username:'wangliang',sex:'男'},
{id:4,username:'telly',sex:'女'}
];var oTab = document.getElementById('tab1');
var oTbody = oTab.tBodies[0];
for (var i = 0; i < data.length; i++) {
var oTr = document.createElement('tr');
//编号
var oTd =document.createElement('td');
oTd.innerHTML = data[i].id;oTr.appendChild(oTd);
//姓名
oTd =document.createElement('td');
oTd.innerHTML = data[i].username;oTr.appendChild(oTd);
//性别
oTd =document.createElement('td');
oTd.innerHTML = data[i].sex;oTr.appendChild(oTd);
//删除
oTd =document.createElement('td');
var oA = document.createElement('a');
oA.innerHTML ='删除';
oA.href ='javascript:;';
oA.onclick =function (){
//删除一行
oTbody.removeChild(this.parentNode.parentNode);
//重新渲染
for (var i = 0; i < oTbody.rows.length; i++) {
if (i%2) {
oTbody.rows[i].style.background="gray";
}else{
oTbody.rows[i].style.background="white";
} } };oTd.appendChild(oA);
oTr.appendChild(oTd);
/*
* 隔行变色 */if (i%2) {
oTr.style.background="gray";
}oTbody.appendChild(oTr);
} }</script></head><body><table id="tab1" width="80%" border="1px">
<thead> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table></body></html> 
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8">
<title>Document</title><script type="text/javascript">
window.onload = function(argument) {
var oForm = document.getElementById('form1');
/*
* 查找表单下的控件（使用name） * 表单.控件name * alert(oForm.text1.value) //文本框 *//*
*【onchange】 :当值发生改变的时候触发 * text : 当光标离开的时候如果内容有变化就触发 * radio/checkbox: 标准下值变了就触发 * 非标准下焦点离开的时候如果值变了就会触发 */oForm.city.onchange = function() {
//alert(this.value)
}oForm.button.onclick = function() {
//性别radio
if (oForm.sex[0].checked) {
console.log('性别：男');
} else {
console.log('性别：女');
}//多选checkbox
var content = "";
for (var i = 0; i < oForm.checkbox.length; i++) {
if (oForm.checkbox[i].checked) {
content += oForm.checkbox[i].value + ' ';
} }console.log(content);
//地区select
console.log(oForm.city.options[oForm.city.selectedIndex].value)
} } </script></head><body><form id="form1">
<div><input type="text" name="text1" value="文本框"></div>
<div><input type="radio" name="sex" value="男" checked>
男<input type="radio" name="sex" value="女">女</div>
<div><input type="checkbox" name="checkbox" value="html">
html<input type="checkbox" name="checkbox" value="css">
css<input type="checkbox" name="checkbox" value="js">js</div>
<div><select name="city" id="mySelect">
<option value="">请选择</option>
<option value="北京">北京</option>
<option value="重庆">重庆</option>
<option value="上海">上海</option>
</select> </div><input type="button" value="提交" name="button">
</form></body></html> 
浙公网安备 33010602011771号