表格鼠标成果免费素材下载 JavaScript完成可自界说排序行会高亮显示的表格

资源魔 2021-06-17 15:15:44 81 0

当鼠标滑过表格时，表格的行会高亮显示，鼠标分开颜色还原，假如鼠标点击，点击行会保留为白色没有变，成果十分适用
正在表格<head>区增加如下内容
[code]
<style type="text/css">
body{
font-size:0.8em;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin:0px;
padding:0px;
}
img{
border:0px;
}
thead td{
font-weight:bold;
color:#000;
background-color:#E2EBED;
}
td{
padding:2px;
}
table{
border:1px solid #000;
border-collapse: collapse;
}
h1{
font-size:1.3em;
margin-bottom:0px;
}
table,h1,p,#ads{
margin-left:10px;
}
#ads{
margin-top:20px;
}

/* These classes are used by the script as rollover effect for table 1 and 2 */

.tableRollOverEffect1{
background-color:#317082;
color:#FFF;
}
.tableRollOverEffect2{
background-color:#000;
color:#FFF;
}

.tableRowClickEffect1{
background-color:#F00;
color:#FFF;
}
.tableRowClickEffect2{
background-color:#00F;
color:#FFF;
}

</style>
<script type="text/javascript">
/*****************************************************
* Share JavaScript (//www.jb51.net)
* 应用此剧本顺序，请保存此申明
* 猎取此剧本和更多的JavaScript顺序，请拜访 //www.jb51.net
******************************************************/
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com
Alf Magne Kalleland

************************************************************************************************************/
var arrayOfRolloverClasses = new Array();
var arrayOfClickClasses = new Array();
var activeRow = false;
var activeRowClickArray = new Array();

function highlightTableRow()
{
var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;
if(this!=activeRow){
this.setAttribute('origCl',this.className);
this.origCl = this.className;
}
this.className = arrayOfRolloverClasses[tableObj.id];

activeRow = this;

}

function clickOnTableRow()
{
var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;

if(activeRowClickArray[tableObj.id] && this!=activeRowClickArray[tableObj.id]){
activeRowClickArray[tableObj.id].className='';
}
this.className = arrayOfClickClasses[tableObj.id];

activeRowClickArray[tableObj.id] = this;

}

function resetRowStyle()
{
var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;
if(activeRowClickArray[tableObj.id] && this==activeRowClickArray[tableObj.id]){
this.className = arrayOfClickClasses[tableObj.id];
return;
}

var origCl = this.getAttribute('origCl');
if(!origCl)origCl = this.origCl;
this.className=origCl;

}

function addTableRolloverEffect(tableId,whichClass,whichClassOnClick)
{
arrayOfRolloverClasses[tableId] = whichClass;
arrayOfClickClasses[tableId] = whichClassOnClick;

var tableObj = document.getElementById(tableId);
var tBody = tableObj.getElementsByTagName('TBODY');
if(tBody){
var rows = tBody[0].getElementsByTagName('TR');
}else{
var rows = tableObj.getElementsByTagName('TR');
}
for(var no=0;no<rows.length;no++){
rows[no].onmouseover = highlightTableRow;
rows[no].onmouseout = resetRowStyle;

if(whichClassOnClick){
rows[no].onclick = clickOnTableRow;
}
}

}
</script>
[/code]
正在网页<body>区增加如下代码
[code]
<h1>Table example 1</h1>
<table id="myTable">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>37</td>
<td>Managing director</td>
<td>90.000</td>
<td>Male</td>
</tr>
<tr>
<td>Susan</td>
<td>34</td>
<td>Partner</td>
<td>90.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>29</td>
<td>Head of production</td>
<td>70.000</td>
<td>Male</td>
</tr>
<tr>
<td>Laura</td>
<td>29</td>
<td>Head of marketing</td>
<td>70.000</td>
<td>Female</td>
</tr>
<tr>
<td>Kate</td>
<td>18</td>
<td>Marketing</td>
<td>50.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mona</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mike</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Male</td>
</tr>
<tr>
<td>Mark</td>
<td>25</td>
<td>Production</td>
<td>52.000</td>
<td>Male</td>
</tr>
</tbody>
</table>
<h1>Table example 2</h1>
<table id="myTable2">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>33</td>
<td>Production</td>
<td>55.000</td>
<td>Male</td>
</tr>
<tr>
<td>Jennifer</td>
<td>24</td>
<td>Production</td>
<td>49.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>25</td>
<td>Photography</td>
<td>51.000</td>
<td>Male</td>
</tr>
<tr>
<td>Anna</td>
<td>42</td>
<td>Head of photography</td>
<td>56.000</td>
<td>Female</td>
</tr>
<tr>
<td>Rita</td>
<td>30</td>
<td>Photography</td>
<td>54.000</td>
<td>Female</td>
</tr>
<tr>
<td>Magnus</td>
<td>25</td>
<td>Freelancer</td>
<td>65.000</td>
<td>Male</td>
</tr>
<tr>
<td>Johnny</td>
<td>29</td>
<td>Freelancer</td>
<td>63.000</td>
<td>Male</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
addTableRolloverEffect('myTable','tableRollOverEffect1','tableRowClickEffect1');
addTableRolloverEffect('myTable2','tableRollOverEffect2','tableRowClickEffect2');
</script>
[/code]
剧本设置装备摆设阐明
第一步：界说鼠标滑过成果的款式
界说鼠标滑过期的成果. 正在典范榜样里, 界说了两个css class，用于两个表格，款式代码以下:
[code]
.tableRollOverEffect1{
background-color:#317082;
color:#FFF;
}
.tableRollOverEffect2{
background-color:#000;
color:#FFF;
}
[/code]
第二步: 界说点击成果款式
界说鼠标点击时的成果. 典范榜样中界说了两个:
[code]
.tableRowClickEffect1{
background-color:#F00;
color:#FFF;
}
.tableRowClickEffect2{
background-color:#00F;
color:#FFF;
}
[/code]
第三步：创立表格
表格代码以下：
[code]
<table id="myTable">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>37</td>
<td>Managing director</td>
<td>90.000</td>
<td>Male</td>
</tr>
<tr>
<td>Susan</td>
<td>34</td>
<td>Partner</td>
<td>90.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>29</td>
<td>Head of production</td>
<td>70.000</td>
<td>Male</td>
</tr>
</tbody>
</table>
[/code]
留意给表格一个ID(example: "myTable"). 应用<THEAD> 以及 <TBODY> 标签宰割表格的头以及内容. 当表格内蕴含<TBODY>变迁后,剧本只会高亮显示<TBODY>标签内的行, 假如不<TBODY>一切的行城市高亮显示.
第四步：挪用JavaScript函数
最初挪用JavaScript函数来显示成果 Example:
[code]
<script type="text/javascript">
addTableRolloverEffect('myTable','tableRollOverEffect1','tableRowClickEffect1');
addTableRolloverEffect('myTable2','tableRollOverEffect2','tableRowClickEffect2');
</script>
[/code]
第一个参数是表格的ID,第二个参数是鼠标滑过是的款式，第三个参数是鼠标点击时的款式
此中第三个参数是可选的，假如你没有心愿鼠标点击时有任何变动，能够输出false。
(example: addTableRolloverEffect('myTable','tableRollOverEffect1','tableRowClickEffect1');).
剧本之家提示您：函数挪用了两次，是由于咱们的domo中有两个表格，没有要误会了，哈哈

标签：排序高亮显示

本文地址： http://ziyuanmo.com/sczy/26223.html