css美化table的三个示例

最新推荐文章于 2024-12-24 23:46:30 发布

原创最新推荐文章于 2024-12-24 23:46:30 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#table #css #function #input #javascript #class

CSS 专栏收录该内容

31 篇文章

订阅专栏

本博客展示了使用CSS Rain实现的三个交互式表格样式，包括隔行、滑动和点击变色效果，以及多选框和单选框与表格行变色的结合。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>cssrain - demo</title>
<SCRIPT LANGUAGE="JavaScript" src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--

    $(document).ready(function () {
        //demo1:
        //-隔行,滑动,点击变色
        $('.cssraindemo1 tbody tr:even').addClass('odd');
        $('.cssraindemo1 tbody tr').hover(
   function () { $(this).addClass('highlight'); },
   function () { $(this).removeClass('highlight'); }
);
        $('.cssraindemo1 tbody tr').click(
   function () { $(this).toggleClass('selected'); }
);

        //demo2:
        $('.cssraindemo2 tbody tr:even').addClass('odd');
        $('.cssraindemo2 tbody tr').hover(
   function () { $(this).addClass('highlight'); },
   function () { $(this).removeClass('highlight'); }
);

        // 如果复选框默认情况下是选择的，变色.
        $('.cssraindemo2 input[type="checkbox"]:checked').parents('tr').addClass('selected');
        // 复选框
        $('.cssraindemo2 tbody tr').click(
   function () {
       if ($(this).hasClass('selected')) {
           $(this).removeClass('selected');
           $(this).find('input[type="checkbox"]').removeAttr('checked');
       } else {
           $(this).addClass('selected');
           $(this).find('input[type="checkbox"]').attr('checked', 'checked');
       }
   }
);

        //demo3:
        $('.cssraindemo3 tbody tr:even').addClass('odd');
        $('.cssraindemo3 tbody tr').hover(
   function () { $(this).addClass('highlight'); },
   function () { $(this).removeClass('highlight'); }
);

// 如果单选框默认情况下是选择的，变色.
$('.cssraindemo3 input[type="radio"]:checked').parents('tr').addClass('selected');

        // 单选框
        $('.cssraindemo3 tbody tr').click(
   function () {
       $(this).siblings().removeClass('selected');
       $(this).addClass('selected');
       $(this).find('input[type="radio"]').attr('checked', 'checked');
   }
);

});

//-->
</SCRIPT>

<h1>Demo1--隔行,滑动,点击变色.</h1>
</head>
<body>
<table class="cssraindemo1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>

<h1>Demo2--隔行,滑动,点击变色.+ 多选框选中的行变色.</h1>
<table class="cssraindemo2">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
    <td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" checked/></td>
     <td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
   <td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice1" value="" /></td>
    <td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="tablechoice2" value="" checked/></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>

</tbody>
</table>

<h1>Demo3--隔行,滑动,点击变色.+ 单选框选中的行变色.</h1>
<table class="cssraindemo3">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="tablechoice" value=""/></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
    <td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" checked /></td>
     <td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
   <td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
    <td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="radio" name="tablechoice" value="" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>

</tbody>
</table>
</body>
</html>