A. DOM高级06 表格搜索01

来源：互联网发布：慧通网络直播聊天室编辑：程序博客网时间：2024/05/16 11:58

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="txt1" type="text"/>
<input id="btn1" type="button" value="添加"/>
<input id="btn2" type="button" value="搜索"/>
<table id="table1" border="1px" width="400px" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>大卡</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>leo</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>莫莫</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>aaa</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>bbb</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>ccc</td>
<td>ccc</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
window.onload=function()
{
var oTab=document.getElementById("table1");
var oBtn=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var oTxt=document.getElementById("txt1");
var iNowId=oTab.tBodies[0].rows.length+1;//避免删除后重返id
/*==================搜索============================*/
oBtn2.onclick=function()
{
var i=0;

for(i=0;i<oTab.tBodies[0].rows.length;i++)
{

oTab.tBodies[0].rows[i].index=i;
if(oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase()==oTxt.value.toLowerCase())//忽略大小写
{

oTab.tBodies[0].rows[i].style.backgroundColor="yellow";//符合条件的变色
}
else//不符合条件的恢复颜色
{
oTab.tBodies[0].rows[i].style.backgroundColor=oTab.tBodies[0].rows[i].index%2?"#ccc":"";
}

}
};

/*===============添加表格=====================*/
oBtn.onclick=function()
{
var oTr=document.createElement("tr");
var oTd=null;

oTd=document.createElement("td");
oTd.innerHTML=iNowId++;//避免删除后重返id
oTr.appendChild(oTd);

oTd=document.createElement("td");
oTd.innerHTML=oTxt.value;
oTr.appendChild(oTd);

oTd=document.createElement("td");
oTd.innerHTML="<a href='javascript:;'>删除</a>";

oTr.appendChild(oTd);

/*===========================删除表格===============================*/
if(oTd.getElementsByTagName("a")[0])
{
oTd.getElementsByTagName("a")[0].onclick=function()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
};
}

oTab.tBodies[0].appendChild(oTr);

color();

};

/*=================高亮============================*/
color();
function color()
{
var i=0;
var oldColor;
for(i=0;i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].style.background=i%2?"#ccc":"";//给双行添加背景
oTab.tBodies[0].rows[i].index=i;
oTab.tBodies[0].rows[i].onmouseover=function()
{
oldColor=this.style.backgroundColor;//保存原来的背景颜色
this.style.background="yellow";

};
oTab.tBodies[0].rows[i].onmouseout=function()
{
this.style.background=this.index%2?oldColor:"";//恢复
};

}
}

};

</script>
</body>
</html>

0 0