1.在鼠标悬停时突出显示一行
<!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>
<title></title>
<style type="text/css">
.hover
{
color:#fff;
background-color:#f00;
}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('tr').hover(function () {
$(this).find('td').addClass('hover');
}, function () {
$(this).find('td').removeClass('hover');
}
)
});
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>ID</th><th>Name</th><th>Mark</th>
</tr>
<tr><td>100</td><td>Steven</td><td>100</td></tr>
<tr><td>101</td><td>Mike</td><td>70</td></tr>
<tr><td>102</td><td>Robot</td><td>80</td></tr>
</thead>
</table>
</body>
</html>
2.过滤行
<!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>
<title></title>
<style type="text/css">
.hover
{
color:#fff;
background-color:#f00;
}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('table tr').hover(function () {
$(this).find('td').addClass('hover');
}, function () {
$(this).find('td').removeClass('hover');
});
$('table tr').click(function () {
$(this).find('td').hide();
})
});
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>ID</th><th>Name</th><th>Mark</th>
</tr>
<tr><td>100</td><td>Steven</td><td>100</td></tr>
<tr><td>101</td><td>Mike</td><td>70</td></tr>
<tr><td>102</td><td>Robot</td><td>80</td></tr>
</thead>
</table>
</body>
</html>
3.隐藏选定列
<!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>
<title></title>
<style type="text/css">
.hover
{
color:#fff;
background-color:#f00;
}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('th').hover(function () {
var $index = $(this).index();
$(this).addClass('hover');
$('td:nth-child(' + ($index + 1) + ')').addClass('hover');
}, function () {
$('table tr').children().removeClass('hover');
}
);
$('th').click(function () {
var $index = $(this).index();
$('table th:not(:nth-child(' + ($index + 1) + '))').hide();
$('table td:not(:nth-child(' + ($index + 1) + '))').hide();
})
});
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>ID</th><th>Name</th><th>Mark</th>
</tr>
<tr><td>100</td><td>Steven</td><td>100</td></tr>
<tr><td>101</td><td>Mike</td><td>70</td></tr>
<tr><td>102</td><td>Robot</td><td>80</td></tr>
</thead>
</table>
</body>
</html>
4.分页
<!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>
<title></title>
<style type="text/css">
.page
{
margin:5px;
}
.hover
{
background-color:#00f;
color:#fff;
cursor:hand;
}
</style>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var $rows = $('table tbody tr').length;
var $pagesize = 2;
var $pagecount = Math.ceil($rows / $pagesize);
var $div = $('<div id="pages"></div>');
for (var i = 0; i < $pagecount; i++) {
$('<span class="page">' + (i + 1) + '</span>').appendTo($div);
}
$div.appendTo('table');
$('.page').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
$('table tbody tr').hide();
var tr = $('table tbody tr');
for (var i = 0; i < $pagecount - 1; i++) {
$(tr[i]).show();
}
$('span').click(function () {
$('table tbody tr').hide();
for (i = ($(this).text() - 1) * $pagesize; i <= $(this).text() * $pagesize - 1; i++) {
$(tr[i]).show();
}
})
});
</script>
</head>
<body>
<table border="1" width="200px">
<thead>
<tr>
<th>ID</th><th>Name</th><th>Mark</th>
</tr>
</thead>
<tbody>
<tr><td>100</td><td>Steven</td><td>100</td></tr>
<tr><td>101</td><td>Mike</td><td>70</td></tr>
<tr><td>102</td><td>Robot</td><td>80</td></tr>
<tr><td>103</td><td>Perry</td><td>100</td></tr>
<tr><td>104</td><td>Lion</td><td>90</td></tr>
<tr><td>105</td><td>Andy</td><td>85</td></tr>
</tbody>
</table>
</body>
</html>