实现多功能的表格的各行选择变色（点击、单选、多选）

最新推荐文章于 2022-05-17 15:06:55 发布

duoduo220

最新推荐文章于 2022-05-17 15:06:55 发布

阅读量2.3k

点赞数

分类专栏： jquery 文章标签： function javascript border xhtml 电话 input

本文链接：https://blog.csdn.net/wo1354691371/article/details/7396867

版权

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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>
</head>
<style>
tr.odd{
background-color:#F99;}
tr.even{
background-color:#FF9;}
tr.hover{
background-color:#03C;}
tr.selected{
background-color:#39C;}

</style>
<script Xlanguage="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<script Xlanguage="javascript" type="text/javascript">
$(document).ready(function (){
//隔行、滑动、点击、变色
$("#tb1 tr").each(function (index,domEle){

$("tr:even").addClass("odd");
$("tr:odd").addClass("even");

  $(this).click(function(){

   $(this).toggleClass("selected");
  });

}).hover(function (){

   $(this).addClass("hover");
    },function (){

   $(this).removeClass("hover");
   });


//多选框实现表格的隔行变色
$(" #tb2 tr").each(function (index,domEle){
     $("input[name=box]").each(function (index,domEle){
var $tr;
$("tr:even").addClass("odd");
$("tr:odd").addClass("even");

  $(this).click(function(){
     $tr=$(this).parents("tr");
   $tr.toggleClass("selected");
  });
});
}).hover(function (){

   $(this).addClass("hover");
    },function (){

   $(this).removeClass("hover");
   });

//单选实现表格的隔行变色
$(" #tb3 tr").each(function (index,domEle){
     $("input[name=ra]").each(function (index,domEle){
var $tr;
$("tr:even").addClass("odd");
$("tr:odd").addClass("even");

  $(this).click(function(){
     $tr=$(this).parents("tr");
   $tr.toggleClass("selected");

  });
  $(this).blur(function(){
   $tr.toggleClass("selected");
  });

});
}).hover(function (){

   $(this).addClass("hover");
    },function (){

   $(this).removeClass("hover");
   });
});

</script>
<body>
<span>隔行、滑动、点击、变色</span>
<table width=" 600" border="1" id="tb1">
<tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>电话</td>
</tr>
<tr>
    <td>张三</td>
    <td>20</td>
    <td>110</td>
</tr>
<tr>
    <td>李四</td>
    <td>30</td>
    <td>120</td>
</tr>
<tr>
    <td>王五</td>
    <td>19</td>
    <td>119</td>
</tr>
<tr>
    <td>赵柳</td>
    <td>23</td>
    <td>123</td>
</tr>
</table>
二、多选框实现表格的隔行变色
<table width=" 600" border="1" id="tb2">
<tr>
    <td>选择</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>电话</td>
</tr>
<tr>
   <td><input type="checkbox" name="box"></td>
    <td>张三</td>
    <td>20</td>
    <td>110</td>
</tr>
<tr>
<td><input type="checkbox" name="box"></td>
    <td>李四</td>
    <td>30</td>
    <td>120</td>
</tr>
<tr>
<td><input type="checkbox" name="box"></td>
    <td>王五</td>
    <td>19</td>
    <td>119</td>
</tr>
<tr>
<td><input type="checkbox" name="box"></td>
    <td>赵柳</td>
    <td>23</td>
    <td>123</td>
</tr>
</table>
二、单选实现表格的隔行变色
<table width=" 600" border="1" id="tb3">
<tr>
    <td>选择</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>电话</td>
</tr>
<tr>
   <td><input type="radio" name="ra"></td>
    <td>张三</td>
    <td>20</td>
    <td>110</td>
</tr>
<tr>
<td><input type="radio" name="ra"></td>
    <td>李四</td>
    <td>30</td>
    <td>120</td>
</tr>
<tr>
<td><input type="radio" name="ra"></td>
    <td>王五</td>
    <td>19</td>
    <td>119</td>
</tr>
<tr>
<td><input type="radio" name="ra"></td>
    <td>赵柳</td>
    <td>23</td>
    <td>123</td>
</tr>
</table>

</body>
</html>

效果：

注：以上方法比较复杂，相信有更简单的方法实现以上功能，正在探索中.......希望有建议多多提点

duoduo220

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现多功能的表格的各行选择变色（点击、单选、多选）

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">实现多动能的表格的各行选择变色tr.odd{ background-color:#F99;}tr.even{ background-color:#FF9;} tr.hover{
复制链接

扫一扫