table隔行换色

最新推荐文章于 2024-07-12 18:29:20 发布
最新推荐文章于 2024-07-12 18:29:20 发布
阅读量410 收藏
点赞数
文章标签： table function xhtml html jquery border

<!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">  
<script src="http://www.pconline.com.cn/js/script/jquery-pconline.js"></script>  
<style>  
  
</style>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>表格显示效果</title>  
<script src="js/jquery.js"></script>  
<script>  
<!--   
$(function(){   
    $("#col1 td").css("text-indent","1em");   
    $("#col1 tr").each(function(i){    
           
        if(i%2 == 0){   
            $(this).css({ color: "#fff", background:"#000" });   
        }else{   
            $(this).css("background-color","#ccc");   
        }   
  
    });   
        $("#col1 th").css("background-color","#9e9e9e");   
});   
  
-->  
</script>  
  
</head>  
  
<body>  
  
<table width="410" border="0" cellspacing="0" cellpadding="0" id="col1" style="line-height:30px;">  
<tr height="40">  
    <th colspan="3">这是一个在Jquery控制下的表格</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>张三</td>  
    <td>20</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>李四</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>3</td>  
    <td>王五</td>  
    <td>24</td>  
  </tr>  
  <tr>  
    <td>4</td>  
    <td>赵六</td>  
    <td>23</td>  
  </tr>  
  <tr>  
    <td>5</td>  
    <td>阮七</td>  
    <td>36</td>  
  </tr>  
</table>  
  
</body>  
</html>  

cataclyam2000
关注
表格（table）隔行换色
古老的未来
08-04 1814
table, tr, td, th {             padding: 0;             margin: 0;             border-bottom: solid 1px #d9ebf3;           border-collapse: collapse;           }         table {            
layui数据表格table隔行换色
qq_41975676的博客
03-30 969
两种方法，一种是官方文档给的参数 第二种利用回调来操作 done:function(res, curr, count){ var that=this.elem.next() res.data.forEach((item,index) => { if(index%2==0){ var tr=that.find(".layui-table-box tbody tr[data-index='"+index+"']"
table 隔行换色
qq_38719039的博客
08-22 670
&lt;title&gt;使用JavaScript隔行变色的效果&lt;/title&gt; &lt;style type="text/css"&gt; body{font-size:12px; text-align:center } #tbStu{width:300px; border:so...
CSS实现table表格：隔行换色的效果
最新发布
pan_junbiao的博客
07-12 1057
表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列、标题等内容。在CSS中，可以使用 nth-child 选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，nth-child(odd) 可以匹配奇数行，nth-child(even) 可以匹配偶数行。使用CSS样式实现 table 表格隔行换色的效果。
table表格隔行换色
he19951124的博客
07-01 371
<%-- 表格隔行换色--%> 1. <style> table tr:nth-child(even){ background : #F4F4F4 ;} table tr:nth-child(odd){ background : #73B1E0 ;} </style> 2. // $("tr:odd").css("background-color","gray") 隔行换色
IE8 chrome中table隔行换色解决办法
10-29
本文将详细介绍如何在IE8及Chrome中解决table隔行换色的问题。 首先，我们来看IE8以上版本的解决方案。在这些较新的浏览器中，CSS3的特性通常能得到较好的支持。一个简单的CSS方法可以实现隔行换色，无需JavaScript...
jQuery实现table隔行换色和鼠标经过变色的两种方法
10-25
其中，操作表格（table）的视觉样式如隔行换色和鼠标经过变色是前端开发者经常要处理的场景。接下来，我们将从技术角度详细解读如何使用jQuery实现这两种效果。 首先，我们讨论如何实现table的隔行换色。隔行换色的...
bootstrap table隔行换色
前端视听
05-05 2512
在写表格插件的时候，要不断的进行表格优化，才会让界面的感观变得越来越好看，bootstrap table的隔行换色功能也是其中的一个，几行代码就OK了。 代码如下： #mytable tr:nth-child(even){ background: #fafafa; } #mytable th{ background: #efefef; } demo示例 <!DOC...
一眼就会table隔行换色、table表头固定、隔行色、鼠标移动行换色
刘贵庆的博客
08-24 4898
抽出时间整理笔记：table头部固定、超出宽度可横向移动，主信息隔行换色、鼠标移动变色。举例： code : <!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Table表头固定</title> <style> #div { .
CSS2+JS实现table隔行变色
05-07
CSS2+JS实现table隔行变色,简单易懂，拿来改改就可以用
jQuery动态生成隔行变色的table
04-27
jQuery动态生成隔行变色的table，使用jQuery+css+json实现
实现table、列表隔行换色
weixin_34021089的博客
04-16 470
2019独角兽企业重金招聘Python工程师标准>>> ...
Table 隔行换色效果代码
Chris Mao的专栏
06-21 229
CSS代码 .stripe { border-width: 1px; border-style: inset; border-color: gray; background-color: white; } .stripe tr, .stripe tr td { border-width: 1px; border-style:...
table表格元素：隔行添加背景色，合并单元格
Seike_113的博客
12-10 365
将边框会合并为一个单线的边框：border-collapse: collapse;合并后算一个格子，要注意合并之后样式的选择是根据代码的顺序显示的。colspan：列合并；rowspan：行合并。隔行添加背景色：可以借助伪类选择器。，匹配一列兄弟元素中的元素。
表格table隔行换色以及点击整行变色
xushichang的专栏
05-05 1055
<br />//表格table隔行换色以及点击整行变色<br />function senfe(o, a, b, c, d) {<br />    if (document.getElementById(o) != null) {<br />        var t = document.getElementById(o).getElementsByTagName("tr");<br />        for (var i = 0; i < t.length; i++) {<br />         
前端html利用CSS实现table表格斑马纹隔行换色效果
热门推荐
我是Sinlion
09-07 1万+
在网页中，表格是一种常用的数据展示方式，如下面的实例就是一个收支数据的表格。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
Jquery表格样式插件：隔行换色，移动换色，点击换色实现
"这篇内容主要介绍了一个基于Jquery的表格样式增强插件，该插件实现了表格隔行换色、鼠标移动换色以及点击选中换色的功能。通过编写JQUERY插件并应用到表格元素上，可以为表格提供更丰富的视觉效果。" 在网页设计中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值