高亮显示(或取消)表格中点击过的行或列

最新推荐文章于 2023-03-20 15:48:40 发布

-布谷鸟-

最新推荐文章于 2023-03-20 15:48:40 发布

阅读量982

点赞数

文章标签： function xhtml c table class html

本文链接：https://blog.csdn.net/cuckoo1/article/details/5947714

版权

1,高亮显示(或取消)点击过的行或列
2,在标题行点击，只对此列有效
3,在正文中点击，可能此行/此列有效
4,不支持排序
5,支持偶/奇数行的颜色交换(****通过td标识来实现列的高亮显示)
6,当点击单元与上次不相同时:上次的高亮显示消失，相单元高亮显示
7,当点击单元与上次相同时:高亮显示交替出现

程序如下:

<!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>表格技术-3</title>
<style>
body,th,td{font-size: 10pt;}
span {margin-top:5px; margin-left:100px; font-size:36px; font-weight:600;}
.Tlist1 {border-collapse:collapse;table-layout:fixed;width:710px;}

.odd {background: #EEFFFF;}
.even {background: #DDFFFF;}

.outit {background: #EEDDFF;}
.ovrit {background: #AADDFF;}
.cross {background: #FFAAAA;}
.clkit {background: #DDAAAA;}
.clkcr {background: #AA7777;}
.title {background: #77FFFF;}

</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
var rc,rc1,rc2="";
var rs,rs1,rs2="";
var Nrow = 15,Ncol = 12;

$(document).ready(function(){
trid();
colid();
// $("col",$("#table3"))[rc[0]].addClass(clr);

run();

$("#table3 tbody tr:odd").addClass('odd');
$("#table3 tbody tr:even").addClass("even");

});

function run()
{
//当光标位于表单元上时
$("tbody tr td").mouseover(
  function () {
   rc = getRC($(this));
   $("#x").html("坐标(x,y): "+ rc[0] +","+ rc[1]);
   $("#y").html("标识(id:x,y): "+ rc[2] +","+ rc[3]);
   Cross_clr(rc,"ovrit",0);
  }
);
$("tbody tr td").mouseout(
  function () {
   Cross_rmv(rc,"ovrit",0);
  }
);
$("tbody tr td").click(function(){

   rc1 = getRC($(this));
   Cross_clr(rc1,"clkit",1);
//   if (!rc2=="") Cross_rmv(rc2,"clkit",1);
   if (!rs2=="") Column_rmv1(rs2,"clkit",1);

// 当点击单元与上次不相同时:上次的高亮显示消失，相单元高亮显示
// 当点击单元与上次相同时:高亮显示交替出现

   if(!rc2=="")
   {
    Cross_rmv(rc2,"clkit",1);
    if (rc1[0]==rc2[0]&&rc1[1]==rc2[1])
    {
     rc2="";
    } else
    {
     Cross_clr(rc1,"clkit",1);
     rc2 = getRC($(this));
    }
   } else
   {
    Cross_clr(rc1,"clkit",1);
    rc2 = getRC($(this));
   }
});

//当光标位于标题行上时
$("thead tr th")
.mouseover(
  function () {
   rs = getRC1($(this));
   $("#x").html("坐标(x): "+ rs[0] );
   $("#y").html("标识(id:x): "+ rs[1] );
   Column_clr1(rs,"ovrit",0);
  }
)
.mouseout(
  function () {
   Column_rmv1(rs,"ovrit",0);
  }
)
.click(function(){
   rs1 = getRC1($(this));

   if (!rc2=="") Cross_rmv(rc2,"clkit",1);
//   if (!rs2=="") Column_rmv1(rs2,"clkit",1);
   if(!rs2=="")
   {
    Column_rmv1(rs2,"clkit",1);
    if (rs1[0]==rs2[0])
    {
     rs2="";
    } else
    {
     Column_clr1(rs1,"clkit",1);
     rs2 = getRC1($(this));
    }
   } else
   {
    Column_clr1(rs1,"clkit",1);
    rs2 = getRC1($(this));
   }
});

}

// c:column, r:row
function getRC(td)
{
var c = $(td).parent().children().index($(td));
// td tr tds

var r = $(td).parent().parent().children().index($(td).parent());
// td tr tbody trs

var cs = $("col",$(td).parent().parent().parent())[c].id;
// td tr tbody table

var rs = $("tr" ,$(td).parent().parent())[r].id;
// td tr tbody

return [c,r,cs,rs];
}

// c:column, r:row
function getRC1(td)
{
var c = $(td).parent().children().index($(td));
// td th tds

var cs = $("col",$(td).parent().parent().parent())[c].id;
// td th thead table

return [c,cs];
}

function Column_clr1(rc,clr)
{
  $("#table3>tbody>tr").each(function(){$("td:eq("+rc[0]+")",$(this)).addClass(clr)});
//  $("#table3 col:eq("+rc[0]+")").addClass(clr);
  $("#table3>thead>tr>th:eq("+rc[0]+")").addClass("cross");
}

function Column_rmv1(rc,clr,flg)
{
  $("#table3>tbody>tr").each(function(){$("td:eq("+rc[0]+")",$(this)).removeClass(clr)});
//  $("#table3 col:eq("+rc[0]+")").removeClass(clr);
  $("#table3>thead>tr>th:eq("+rc[0]+")").removeClass("cross");
}

// $("col",$("#table3"))[0].addClass("ovrit"); XXX
// $("#table3 tr:eq(2)").addClass("ovrit"); VVV

// 为了能使排序与行高亮显示同时顺利进行，在每行tr加id
function trid()
{
for (var c=0;c<Nrow;c++ )
{
$("#table3>tbody>tr:eq("+c+")").attr("id","tr"+c);
}
}
function colid()
{
for (var c=0;c<Ncol;c++ )
{
$("#table3 col:eq("+c+")").attr("id","col"+c);
}
}
</script>
</head>

<body>
Gu Laicheng,jQuery Table skill / 2010.10.16<br/>
1,高亮显示(或取消)点击过的行或列<br/>
2,在标题行点击，只对此列有效<br/>
3,在正文中点击，可能此行/此列有效<br/>
4,不支持排序<br/>
5,支持偶/奇数行的颜色交换(****通过td标识来实现列的高亮显示)<br/>
6,当点击单元与上次不相同时:上次的高亮显示消失，相单元高亮显示<br/>
7,当点击单元与上次相同时:高亮显示交替出现<br/>

<table style=" margin-left:0px;" id="table3" border="1" cellpadding=4 cellspacing=0 bordercolor='#3377FF' align=center class=Tlist1>
<script>
for (var c=0;c<Ncol;c++ )
{
document.writeln("<col>");
}
document.writeln("<thead><tr class='title'>");
for (var c=0;c<Ncol;c++ )
{
document.writeln("<th>F"+(c)+"</th>");
}
document.writeln("</tr></thead>");

document.writeln("<tbody>");
for (var r=0;r<Nrow;r++ )
{
document.writeln("<tr>");
for (var c=0;c<Ncol;c++ )
{
document.writeln("<td>"+(r)+"."+(c)+"</td>");
}
document.writeln("</tr>");
}
document.writeln("</tbody>");
</script>
</table>
<span id="x"></span>
<span id="y"></span>
</body>
</html>