• 本站已对IE放弃治疗,请在Chrome、Firefox等现代浏览器浏览本站。记住我们的域名:wanysys.cc 加入本站QQ群,大家一起HIGH: QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 传送门:#

table样式之——table表格隔行换变色功能

HTML 张昊翔 3年前 (2016-06-01) 974次浏览 2个评论 扫描二维码

前段时间素梅好翔博主给一个莆田系医院做了个专题,用到了个table样式做的隔行换色的表格,table边框清晰,样式漂亮,发出来,方便以后用到。
table样式之——table表格隔行换变色功能

html:

<!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>简单的cssjs控制table隔行换色</title>
</head>
 <body>
<!–微创手术–>
<div class=”tb”>
 <table class=”tb1″ width=”50%” id=”tb1″ style=”float:left;”>
     <tr>
        <th width=”230″>检查项目</th><th width=”50″ >次数</th><th width=”120″>国家定价</th><th width=”100″>活动优惠价</th>
    </tr>
    <tr>
        <td>卵巢囊肿剔除术</td>
        <td> 单侧</td>
        <td>原价<span style=”color:red;”><strong>1600</strong></span>元</td>
        <td>优惠<strong><span style=”color:red;”>50%</span></strong></td>
    </tr>
     <tr>
        <td>输卵管结扎术</td>
        <td>次</td>
        <td>原价<span style=”color:red;”><strong>1200</strong></span>元</td>
        <td>优惠<strong><span style=”color:red;”>50%</span></strong></td>
    </tr>
     <tr>
        <td>经腹腔镜盆腔粘连分离术</td>
        <td>次</td>
        <td>原价<span style=”color:red;”><strong>1200</strong></span>元</td>
        <td>优惠<strong><span style=”color:red;”>50%</span></strong></td>
    </tr>
     <tr>
        <td>经宫腔镜子宫肌瘤切除术</td>
        <td>次</td>
        <td>原价<span style=”color:red;”><strong>8600</strong></span>元</td>
        <td>优惠<strong><span style=”color:red;”>50%</span></strong></td>
    </tr>
      <tr>
        <td>经输卵管镜插管通水术</td>
        <td>次</td>
        <td>原价<span style=”color:red;”><strong>1200</strong></span>元</td>
        <td>优惠<strong><span style=”color:red;”>50%</span></strong></td>
    </tr>
     <tr>
        <td>宫颈糜烂</td>
        <td>次</td>
        <td>原价<span style=”color:red;”><strong>1900</strong></span>元</td>
        <td>优惠<strong><span style=”color:red;”>50%</span></strong></td>
    </tr>
     <tr>
        <td>微创人流术</td>
        <td>次</td>
        <td>原价<span style=”color:red;”><strong>1580</strong></span>元</td>
        <td>优惠<strong><span style=”color:red;”>50%</span></strong></td>
    </tr>
</table>
 <table class=”tb2″  width=”50%” id=”tb2″ style=”float:left;”>
     <tr>
        <th width=”230″>检查项目</th><th width=”50″ >次数</th><th width=”120″>国家定价</th><th width=”100″>活动优惠价</th>
    </tr>
    <tr>
        <td>经腹子宫肌瘤剔除术</td>
        <td>次</td>
        <td>原价<span style=”color:red;”><strong>6000</strong></span>元</td>
        <td>优惠<strong><span style=”color:red;”>50%</span></strong></td>
    </tr>
     <tr>
        <td>子宫次全切除术</td>
        <td>次</td>
        <td>原价<span style=”color:red;”><strong>8000</strong></span>元</td>
        <td>优惠<strong><span style=”color:red;”>50%</span></strong></td>
    </tr>
     <tr>
        <td>阴式全子宫切除术</td>
        <td>次</td>
        <td>原价<span style=”color:red;”><strong>9000</strong></span>元</td>
        <td>优惠<strong><span style=”color:red;”>50%</span></strong></td>
    </tr>
     <tr>
        <td>盆腔巨大肿瘤切除术</td>
        <td>次</td>
        <td>原价<span style=”color:red;”><strong>8600</strong></span>元</td>
        <td>优惠<strong><span style=”color:red;”>50%</span></strong></td>
    </tr>
      <tr>
        <td>阴道直肠痿修补术</td>
        <td>次</td>
        <td>原价<span style=”color:red;”><strong>3500</strong></span>元</td>
        <td>优惠<strong><span style=”color:red;”>50%</span></strong></td>
    </tr>
     <tr>
        <td>盆腔炎</td>
        <td>次</td>
        <td>原价<span style=”color:red;”><strong>1800</strong></span>元</td>
        <td>优惠<strong><span style=”color:red;”>50%</span></strong></td>
    </tr>
     <tr>
        <td>盆腔积液</td>
        <td>次</td>
        <td>原价<span style=”color:red;”><strong>1600</strong></span>元</td>
        <td>优惠<strong><span style=”color:red;”>50%</span></strong></td>
    </tr>
</table>
 </div>
<!– end 微创手术–>
</body>
</html>

 

CSS:

<style type=”text/css” >
    *{margin:0px; padding:0px;}
    .tb{
        margin:0 auto;
        width:1000px;
        font-family: verdana,arial,sans-serif;
        border-width:1px;
        border-color:#dad4c8;
        border-style:solid;
        color:#333333;
        }
    table{
        border-collapse: collapse;
        }
    table.tb1 th ,table.tb2 th{
        border-width: 1px;
        border-style:solid;
        padding: 8px;
        border-width: 1px;
        border-color:#c2b7a2;
        color:#ba0005;
        height:45px;
        background-color:#ded3b9;
        }
    table.tb1 td,table.tb2 td{
        border-width: 1px;
        border-style: solid;
        border-color: #dad4c8;
        text-align:center;
        padding: 8px;
        }
    .tr1{
        background-color:#fff9ec;
    }
    .tr2{
        background-color:#eee5d0;
    }
</style>

JS:

<script type=”text/javascript”>
function $(id){return document.getElementById(id);}
onload=function(){Table(“tb1″,”tr1″,”tr2”);Table(“tb2″,”tr1″,”tr2”);}
var trs=””;
function Table(str1,str2,str3){
var tr=$(str1).getElementsByTagName(“tr”);
for(var i=0;i<tr.length;i++){
   if(i%2==0){tr[i].className=str2;}else{tr[i].className=str3;}
   tr[i].onmouseover=Function(“trs=this.className;this.className=’tr3′;”);
   tr[i].onmouseout=Function(“this.className=trs”);
}
}
</script>

素梅好翔博客 , 版权所有丨如未注明 , 均为原创 , 转载请注明出处:http://www.wanysys.cc/coding/html/315.html
喜欢 (0)
[18586878276]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 这个不错
    旧拾光2016-06-13 10:24 回复 Windows 7 | Chrome 48.0.2564.116
    • 张昊翔
      欢迎来访,,,
      张昊翔2016-06-13 13:34 回复 Windows 10 | Firefox浏览器 45.0