<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<style type="text/css">
*{
margin:0;
padding:0;
}
.blue{
background:gray;
}
.yellow{
background: yellow;
}
.red{
background:red;
}
</style>
<body>
姓名<input id="name" type="text">
年龄<input id="age" type="text">
<button id="add">添加</button><br />
<input id="ser" type="text">
<button id="search">搜索</button>
<button id="sort">按照id降序排列</button>
<table border="1" width="600" id="tab">
<thead>
<td>id</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>10</td>
<td>zhangsan</td>
<td>23</td>
<td><a href="javascript:;" class="del" >删除</a></td>
</tr>
<tr>
<td>3</td>
<td>lisi</td>
<td>30</td>
<td><a href="javascript:;" class="del" >删除</a></td>
</tr>
<tr>
<td>6</td>
<td>李四</td>
<td>32</td>
<td><a href="javascript:;" class="del" >删除</a></td>
</tr>
<tr>
<td>5</td>
<td>张三</td>
<td>32</td>
<td><a href="javascript:;" class="del" >删除</a></td>
</tr>
<tr>
<td>17</td>
<td>小明</td>
<td>32</td>
<td><a href="javascript:;" class="del" >删除</a></td>
</tr>
<tr>
<td>8</td>
<td>xiaoming</td>
<td>32</td>
<td><a href="javascript:;" class="del" >删除</a></td>
</tr>
</tbody>
</table>
<hr>
要求：
<ol>
<li>表格的隔行变色</li>
<li>鼠标移入某一行时，将该行背景变为黄色，移出该行时还原背景色</li>
<li>按照输入的姓名和年龄，添加到表格中，要求：id要从当前最大值加1开始，并且在某一行删除后，该行的id在后续的添加中，将不再出现</li>
<li>单击删除，可以将该行从表格中删除</li>
<li>完成对姓名的多关键字搜索，并且将搜索到的行改为红色背景</li>
<li>点击按照id降序排列后，要求将所有的行按照id值大小，从大到小，重新排列</li>
</ol>
</body>
<script type="text/javascript">
window.onload = function(){
var tab=document.getElementById('tab');
var tb1=tab.getElementsByTagName('tbody');
var tr1 = tb1[0].getElementsByTagName('tr');
var sort1 = document.getElementById('sort');
var add = document.getElementById('add');
var search = document.getElementById('search');
var globalnum=num();
function color(){
for (var i = 0; i < tr1.length; i++) {
if (i%2==0) {
tr1[i].className='blue';
}else{
tr1[i].className='';
}
}
}
color();
function yellow1(){
for (var i = 0; i < tr1.length; i++) {
tr1[i].οnmοuseοver=function(){
color();
this.style.background='';
this.className='yellow';
}
tr1[i].οnmοuseοut=function(){
search2();
color();
}
}
}
yellow1();
function num(){
var n=0;
var arr=[];
for (var i = 0; i < tr1.length; i++) {
var index1= tr1[i].getElementsByTagName('td')[0];
arr[i]=index1.innerHTML;
}
var index1 = arr.sort(sortmethod)[0];
index1 = parseInt(index1);
function sortmethod(a,b){
return b-a;
}
++n;
return index1+n;
}
add.οnclick=function(){
var name1 = document.getElementById('name');
var age1 = document.getElementById('age');
var name1= name1.value;
var age1 = age1.value;
var newtr = document.createElement('tr')
var newtd1 = document.createElement('td');
newtd1.innerHTML=globalnum;
++globalnum;
var newtd2 = document.createElement('td');
newtd2.innerHTML=name1;
var newtd3 = document.createElement('td');
newtd3.innerHTML=age1;
var newtda = document.createElement('td');
newtda.innerHTML='<a href=\'javascript:;\' class="del">删除</a>';
tb1[0].appendChild(newtr);
if(tb1[0].lastElementChild){
var last1=tb1[0].lastElementChild;
}else{
var last1 = tb1[0].lastChild;
}
last1.appendChild(newtda);
if(last1.firstElementChild){
var first1=last1.firstElementChild;
}else{
var first1= last1.firstChild;
}
last1.insertBefore(newtd1,first1);
last1.insertBefore(newtd2,first1);
last1.insertBefore(newtd3,first1);
color();
del();
search2();
yellow1();
sortmethod();
}
function del(){
var hrefs=document.getElementsByClassName('del');
var hrefl=hrefs.length;
for (var i = 0; i < hrefl; i++) {
hrefs[i].οnclick=function(){
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
}}
del();
function search2(){
search.onclick = function(){
var sarr=[];
var ser = document.getElementById('ser').value;
var ser=ser.split(' ');
if(ser ==''){
return;
}
for (var i = 0; i < tr1.length; i++) {
var sname=tr1[i].getElementsByTagName('td')[1];
var sname = sname.innerHTML;
sname=sname.toLocaleLowerCase();
tr1[i].style.background='';
for(var j=0;j<ser.length;j++){
ser[j]=ser[j].toLocaleLowerCase();
if(sname.search(ser[j])!='-1'){
tr1[i].style.background='red';
}
}
}
}
}
search2();
function sortmethod(){
sort1.οnclick=function(){
var sortarr=[];
for (var i = 0; i < tr1.length; i++) {
var nosort=tr1[i];
sortarr.push(nosort);
}
sortarr=sortarr.sort(method);
function method(a,b){
var ida = a.cells[0].innerHTML * 1;
var idb = b.cells[0].innerHTML * 1;
if(ida > idb) return -1;
else if(ida < idb) return 1;
else return 0;
}
for(var i =0;i<sortarr.length;i++){
tb1[0].appendChild(sortarr[i]);
}
color();
}
}
sortmethod();
}
</script>
</html>
关于上面的代码 初学者做了一天多时间很多属性用的不熟
关于新创建的元素怎么绑定事件==》只需要在新创建的元素后面调用需要绑事件的方法
关于ID自增以及让他删除后ID不再重复==》在全局定义一个变量每次创建写入值时调用全局值
其他的再补充
450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
