如何使用js让下一条记录高亮
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!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=utf-8" />
<title>无标题文档</title>
<style>
.hover {
background:red;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="dy_list dy_list2" width="500">
<tr bgcolor="#dcd2d1" height="32" class="list_title">
<td width="84">显示编号</td>
<td width="310">商品名称</td>
<td>商品状态</td>
</tr>
<tr id="t1" class="hover">
<td>34</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t2">
<td>35</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t3">
<td>36</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t4">
<td>37</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t5">
<td>38</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t6">
<td>39</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t7">
<td>40</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
</table>
<a href="#">上一条</a>|<a href="#">下一条</a>
</body>
</html>
怎么实现点击了下一条之后，当前高亮记录的下一条高亮呢？点击上一条之后，当前记录的上一条高亮。
如果当前是第一条，点击上一条之后无效。
如果当前是最后一条，点击下一条之后无效。
本人不会js麻烦会的给个代码，谢谢了！ 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.hover {
background:red;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="dy_list dy_list2" width="500">
<tr bgcolor="#dcd2d1" height="32" class="list_title">
<td width="84">显示编号</td>
<td width="310">商品名称</td>
<td>商品状态</td>
</tr>
<tr id="t1" class="hover">
<td>34</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t2">
<td>35</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t3">
<td>36</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t4">
<td>37</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t5">
<td>38</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t6">
<td>39</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t7">
<td>40</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
</table>
<a href="#">上一条</a>|<a href="#">下一条</a>
</body>
</html>
怎么实现点击了下一条之后，当前高亮记录的下一条高亮呢？点击上一条之后，当前记录的上一条高亮。
如果当前是第一条，点击上一条之后无效。
如果当前是最后一条，点击下一条之后无效。
本人不会js麻烦会的给个代码，谢谢了！ 展开
3个回答
展开全部
<a href="javascript:;" onclick="changeColor('prev')">上一条</a>
<a href="javascript:;" onclick="changeColor('next')" >下一条</a>使用jquery实现：你需要在页面头部引入jquery文件
<script type="text/javascript" charset="utf-8">
function changeColor(flag) {
var idx = $("tr.hover").index(), // 高亮那条所在位置
count = $("table tr").length; //tr的数量
switch (flag) {
case "prev":
if (idx !== 1) {
$("table tr").eq(idx).removeClass("hover").end().eq(idx - 1).addClass("hover");
}
break;
case "next":
if (idx < count - 1) {
$("table tr").eq(idx).removeClass("hover").end().eq(idx + 1).addClass("hover");
}
break;
default:
break;
}
return;
}
</script>
使用jquery实现比较方便，灵活通用，多少条记录都适用！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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=utf-8" />
<title>无标题文档</title>
<style>
.hover {
background:red;
}
</style>
</head>
<body>
<script>
var intI = 1;
function a(){
if(intI==1)alert("已经是第一条");
else{
document.getElementById("t"+intI).style.background='white';
intI = intI-1;
document.getElementById("t"+intI).style.background='red';
}
}
function b(){
if(intI==7)alert("已经是最后一条");
else{
document.getElementById("t"+intI).style.background='white';
intI = intI+1;
document.getElementById("t"+intI).style.background='red';
}
}
</script>
<table cellpadding="0" cellspacing="0" border="0" class="dy_list dy_list2" width="500">
<tr bgcolor="#dcd2d1" height="32" class="list_title">
<td width="84">显示编号</td>
<td width="310">商品名称</td>
<td>商品状态</td>
</tr>
<tr id="t1" class="hover">
<td>34</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t2">
<td>35</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t3">
<td>36</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t4">
<td>37</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t5">
<td>38</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t6">
<td>39</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t7">
<td>40</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
</table>
<a href="#" onclick="a()">上一条</a>|<a href="#" onclick="b()">下一条</a>
</body>
</html>
望采纳
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.hover {
background:red;
}
</style>
</head>
<body>
<script>
var intI = 1;
function a(){
if(intI==1)alert("已经是第一条");
else{
document.getElementById("t"+intI).style.background='white';
intI = intI-1;
document.getElementById("t"+intI).style.background='red';
}
}
function b(){
if(intI==7)alert("已经是最后一条");
else{
document.getElementById("t"+intI).style.background='white';
intI = intI+1;
document.getElementById("t"+intI).style.background='red';
}
}
</script>
<table cellpadding="0" cellspacing="0" border="0" class="dy_list dy_list2" width="500">
<tr bgcolor="#dcd2d1" height="32" class="list_title">
<td width="84">显示编号</td>
<td width="310">商品名称</td>
<td>商品状态</td>
</tr>
<tr id="t1" class="hover">
<td>34</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t2">
<td>35</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t3">
<td>36</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t4">
<td>37</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t5">
<td>38</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t6">
<td>39</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t7">
<td>40</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
</table>
<a href="#" onclick="a()">上一条</a>|<a href="#" onclick="b()">下一条</a>
</body>
</html>
望采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<title>无标题文档</title>
<style>
</style>
<script>
window.onload=function()
{
//oTab.tBodies[0].rows(表oTab的第一个tbody标签里面的所有行(tr))
var oTab=document.getElementById('tab1');
var aA=document.getElementsByTagName('a');
var n=0;//定义当前行的索引，默认第一行为背景红
//单击上一条
aA[0].onclick=function()
{
if(n<=0)
{
n=0;
}
else
{
n--;
}
//先把所有的行的背景去掉
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].style.background='';
}
//再把当前行的背景变为红
oTab.tBodies[0].rows[n].style.background='red';
}
//单击下一条
aA[1].onclick=function()
{
if(n>=oTab.tBodies[0].rows.length-1)
{
n=oTab.tBodies[0].rows.length-1;
}
else
{
n++;
}
//先把所有的行的背景去掉
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].style.background='';
}
//再把当前行的背景变为红
oTab.tBodies[0].rows[n].style.background='red';
}
}
</script>
</head>
<body>
<table id="tab1" cellpadding="0" cellspacing="0" border="0" class="dy_list dy_list2" width="500">
<thead>
<tr bgcolor="#dcd2d1" height="32" class="list_title">
<td width="84">显示编号</td>
<td width="310">商品名称</td>
<td>商品状态</td>
</tr>
</thead>
<tbody>
<tr id="t1" style="background:red">
<td>34</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t2">
<td>35</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t3">
<td>36</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t4">
<td>37</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t5">
<td>38</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t6">
<td>39</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t7">
<td>40</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
</tbody>
</table>
<a href="#">上一条</a>|<a href="#">下一条</a>
</body>
</html>
<style>
</style>
<script>
window.onload=function()
{
//oTab.tBodies[0].rows(表oTab的第一个tbody标签里面的所有行(tr))
var oTab=document.getElementById('tab1');
var aA=document.getElementsByTagName('a');
var n=0;//定义当前行的索引，默认第一行为背景红
//单击上一条
aA[0].onclick=function()
{
if(n<=0)
{
n=0;
}
else
{
n--;
}
//先把所有的行的背景去掉
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].style.background='';
}
//再把当前行的背景变为红
oTab.tBodies[0].rows[n].style.background='red';
}
//单击下一条
aA[1].onclick=function()
{
if(n>=oTab.tBodies[0].rows.length-1)
{
n=oTab.tBodies[0].rows.length-1;
}
else
{
n++;
}
//先把所有的行的背景去掉
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].style.background='';
}
//再把当前行的背景变为红
oTab.tBodies[0].rows[n].style.background='red';
}
}
</script>
</head>
<body>
<table id="tab1" cellpadding="0" cellspacing="0" border="0" class="dy_list dy_list2" width="500">
<thead>
<tr bgcolor="#dcd2d1" height="32" class="list_title">
<td width="84">显示编号</td>
<td width="310">商品名称</td>
<td>商品状态</td>
</tr>
</thead>
<tbody>
<tr id="t1" style="background:red">
<td>34</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t2">
<td>35</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t3">
<td>36</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t4">
<td>37</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t5">
<td>38</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t6">
<td>39</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
<tr id="t7">
<td>40</td>
<td>商品 1</td>
<td>正在打印</td>
</tr>
</tbody>
</table>
<a href="#">上一条</a>|<a href="#">下一条</a>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
