1、表格，隔行变色
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var otab=document.getElementById('tb1')
// otab.tBodies[0].rows[].cells[]
var oldColor=''
for (var i = otab.tBodies[0].rows.length - 1; i >= 0; i--) {
if(i%2){
otab.tBodies[0].rows[i].style.background='red'
}else{
otab.tBodies[0].rows[i].style.background='gray'
}
otab.tBodies[0].rows[i].onmouseover=function(){
oldColor=this.style.background
this.style.background='green'
}
otab.tBodies[0].rows[i].onmouseout=function () {
this.style.background=oldColor
}
}
}
</script>
</head>
<body>
<!-- table[id='tb1' border="1" width="500">thead>td*3+tbody>(tr>td*3)*3 -->
<table id="tb1" border="1" width="500">
<thead>
<td>ID</td>
<td>name</td>
<td>age</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>cxiong</td>
<td>29</td>
</tr>
<tr>
<td>2</td>
<td>mm</td>
<td>29</td>
</tr>
<tr>
<td>3</td>
<td>dd</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>2、表格的行的添加和删除
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var otab=document.getElementById('tb1')
// otab.tBodies[0].rows[].cells[]
var ob=document.getElementById('b1')
var oname=document.getElementById('name')
var oage=document.getElementById('age')
var id=otab.tBodies[0].rows.length+1
ob.onclick=function () {
//创建tr元素
var otr=document.createElement('tr')
//创建td元素
var otd=document.createElement('td')
otd.innerHTML=id++
otr.appendChild(otd)
var otd=document.createElement('td')
otd.innerHTML=oname.value
otr.appendChild(otd)
var otd=document.createElement('td')
otd.innerHTML=oage.value
otr.appendChild(otd)
var otd=document.createElement('td')
otd.innerHTML='<a href="javascript:">delete</a>'
otr.appendChild(otd)
otd.getElementsByTagName('a')[0].onclick=function () {
otab.tBodies[0].removeChild(this.parentNode.parentNode)
}
//添加元素
otab.tBodies[0].appendChild(otr)
}
}
</script>
</head>
<body>
<!-- table[id='tb1' border="1" width="500">thead>td*3+tbody>(tr>td*3)*3 -->
name: <input type="text" id="name">
age: <input type="text" id="age">
<input type="button" id="b1" value="添加">
<table id="tb1" border="1" width="500">
<thead>
<td>ID</td>
<td>name</td>
<td>age</td>
<td>action</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>cxiong</td>
<td>29</td>
</tr>
<tr>
<td>2</td>
<td>mm</td>
<td>29</td>
</tr>
<tr>
<td>3</td>
<td>dd</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>3、表格高亮、模糊、多关键字搜索
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var otab=document.getElementById('tb1')
var ot=document.getElementById('name')
var ob=document.getElementById('b1')
ob.onclick=function () {
// body...
for (var i = otab.tBodies[0].rows.length - 1; i >= 0; i--) {
//转换小写toLowerCase()
var arr=ot.value.toLowerCase().split(' ')
otab.tBodies[0].rows[i].style.background=''
// otab.tBodies[0].rows[i].style.display='none'
//多关键字、模糊搜索
for (var j = arr.length - 1; j >= 0; j--) {
if (otab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase().search(arr[j])!=-1) {
otab.tBodies[0].rows[i].style.background='yellow'
// otab.tBodies[0].rows[i].style.display='block'
}
}
}
}
}
</script>
</head>
<body>
<!-- table[id='tb1' border="1" width="500">thead>td*3+tbody>(tr>td*3)*3 -->
name: <input type="text" id="name">
<input type="button" value="search" id="b1">
<table id="tb1" border="1" width="500">
<thead>
<td>ID</td>
<td>name</td>
<td>age</td>
<td>action</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>cxiong</td>
<td>29</td>
</tr>
<tr>
<td>2</td>
<td>mm</td>
<td>29</td>
</tr>
<tr>
<td>3</td>
<td>dd</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>4、表格排序
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var ou1=document.getElementById('ul1')
var ou2=document.getElementById('ul2')
var ob=document.getElementById('b1')
ob.onclick=function () {
// body...
// var oli=ou1.children[0]
// ou1.removeChild(oli)
// appendChile，先把元素从原有父级上删掉，添加到新的父级上
// ou1.appendChild(oli)
// ou2.appendChild(oli)
var ali=ou1.getElementsByTagName('li')
var arr=[]
for (var i = ali.length - 1; i >= 0; i--) {
arr[i]=ali[i]
}
//排序：li中的内容innerHTML
arr.sort(function(li1,li2){
return (parseFloat(li1.innerHTML)-parseFloat(li2.innerHTML))
})
//根据排序结果，添加li元素
for (var i = arr.length - 1; i >= 0; i--) {
ou1.appendChild(arr[i])
}
}
}
</script>
</head>
<body>
<!-- table[id='tb1' border="1" width="500">thead>td*3+tbody>(tr>td*3)*3 -->
<ul id="ul1">
<li>1</li>
<li>22</li>
<li>3</li>
<li>14</li>
</ul>
<input type="button" value="sort" id="b1">
<ul id="ul2">
</ul>
</body>
</html>5、表单
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var of=document.getElementById('f1')
of.onsubmit=function () {
// body...
alert("submit")
}
of.onreset=function(){
alert("reset")
}
}
</script>
</head>
<body>
<!-- table[id='tb1' border="1" width="500">thead>td*3+tbody>(tr>td*3)*3 -->
<form id="f1" action="www.baidu.com" method="get" accept-charset="utf-8">
用户名： <input type="text" name="user"> <br>
密码： <input type="text" name="password" value=""><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
