实现table跳转到指定行,并改变所在行的样式!
有客户要求:对一个列表中的数据进行查询,查出的数据只需跳到那一行,并改个醒目的样式.
我利用dhtml研究了一下,实现如下.记之以备后忘
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="JavaScript">
var tr;
function gorow()
{
var aa= document.getElementsByName('aa')[0].value;
if(aa !=""){
for(i=0;i<t1.rows.length;i++){
t1.rows[i].bgColor='';
}
//document.getElementById(aa).bgColor='white';
tr=document.getElementById(aa).parentElement;//返回该列的所在行tr
tr.bgColor='red';
window.location.href="#"+aa;
}
}
</script>
</head>
<body>
<table id="t1" width="100" border onClick="select(event.srcElement);">
<tr><td id="row1">row1<a name="row1"></td><td id="行1">行1<a name="行1"></td><input type="hidden" name="rownum0" value="10"></tr>
<tr><td id="row2">row2<a name="row2"></td><td id="行2">行2<a name="行2"></td><input type="hidden" name="rownum1" value="20"></tr>
<tr><td id="row3">row3<a name="row3"></td><td id="行3">行3<a name="行3"></td><input type="hidden" name="rownum2" value="30"></tr>
<tr><td id="row4">row4<a name="row4"></td><td id="行4">行4<a name="行4"></td><input type="hidden" name="rownum3" value="40"></tr>
<tr><td id="row5">row5<a name="row5"></td><td id="行5">行5<a name="行5"></td><input type="hidden" name="rownum4" value="50"></tr>
</table>
<input type="text" name="aa"><input type="button" value="Go" onClick="gorow()">
</body>
</html>
