返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: javascript学习 >

快速使用HeatColor插件修改表格颜色

2020-04-27 文章标签: jquery 插件 浏览次数:

我们继续讲解jquery插件,今天介绍的是使用HeatColor表格颜色,该插件特点快速修改表格。使表格看起来更加美观。使用的语法也很简单

jquery操作创建元素

我们看看效果图

HeatColor表格颜色

代码如下

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tablesorter</title>
<link href="//freemuban.com/js/427/table.css" rel="stylesheet" type="text/css" media="all">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/427/jquery.heatcolor.0.0.1.js"></script>
<script type="text/javascript">
$(function(){
$("#grid > tbody > tr").heatcolor(
function() { return $("td:nth-child(3)", this).text(); }
);
})
</script>
</head>
<body>
<h1>HeatColor表格颜色</h1>
<table id="grid">
    <thead>
        <tr>
            <th nowrap="nowrap">排名</th>
            <th nowrap="nowrap">校名</th>
            <th nowrap="nowrap">总得分</th>
            <th nowrap="nowrap">人才培养总得分</th>
            <th nowrap="nowrap">研究生培养得分</th>
            <th nowrap="nowrap">本科生培养得分</th>
            <th nowrap="nowrap">科学研究总得分</th>
            <th nowrap="nowrap">自然科学研究得分</th>
            <th nowrap="nowrap">社会科学研究得分</th>
            <th nowrap="nowrap">所属省份</th>
            <th nowrap="nowrap">分省排名</th>
            <th nowrap="nowrap">学校类型</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>清华大学 </td>
            <td>296.77</td>
            <td>128.92</td>
            <td>93.83</td>
            <td>35.09</td>
            <td>167.85</td>
            <td>148.47</td>
            <td>19.38</td>
            <td width="16">京 </td>
            <td width="12">1 </td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>2</td>
            <td>北京大学 </td>
            <td>222.02</td>
            <td>102.11</td>
            <td>66.08</td>
            <td>36.03</td>
            <td>119.91</td>
            <td>86.78</td>
            <td>33.13</td>
            <td>京 </td>
            <td>2 </td>
            <td>综合 </td>
        </tr>
        <tr>
            <td>3</td>
            <td>浙江大学 </td>
            <td>205.65</td>
            <td>94.67</td>
            <td>60.32</td>
            <td>34.35</td>
            <td>110.97</td>
            <td>92.32</td>
            <td>18.66</td>
            <td>浙 </td>
            <td>1</td>
            <td>综合 </td>
        </tr>
        <tr>
            <td>4</td>
            <td>上海交大</td>
            <td>150.98</td>
            <td>67.08</td>
            <td>47.13</td>
            <td>19.95</td>
            <td>83.89</td>
            <td>77.49</td>
            <td>6.41</td>
            <td>沪 </td>
            <td>1</td>
            <td>综合 </td>
        </tr>
        <tr>
            <td>5</td>
            <td>南京大学</td>
            <td>136.49</td>
            <td>62.84</td>
            <td>40.21</td>
            <td>22.63</td>
            <td>73.65</td>
            <td>53.87</td>
            <td>19.78</td>
            <td>苏</td>
            <td>1</td>
            <td>综合 </td>
        </tr>
        <tr>
            <td>6</td>
            <td>复旦大学 </td>
            <td>136.36</td>
            <td>63.57</td>
            <td>40.26</td>
            <td>23.31</td>
            <td>72.78</td>
            <td>51.47</td>
            <td>21.31</td>
            <td>沪</td>
            <td>2</td>
            <td>综合 </td>
        </tr>
        <tr>
            <td>7</td>
            <td>华中科大</td>
            <td>110.08</td>
            <td>54.76</td>
            <td>30.26</td>
            <td>24.50</td>
            <td>55.32</td>
            <td>47.45</td>
            <td>7.87</td>
            <td>鄂 </td>
            <td>1</td>
            <td>理工 </td>
        </tr>
        <tr>
            <td>8</td>
            <td>武汉大学 </td>
            <td>103.82</td>
            <td>50.21</td>
            <td>29.37</td>
            <td>20.84</td>
            <td>53.61</td>
            <td>36.17</td>
            <td>17.44</td>
            <td>鄂 </td>
            <td>2</td>
            <td>综合</td>
        </tr>
        <tr>
            <td>9</td>
            <td>吉林大学 </td>
            <td>96.44</td>
            <td>48.61</td>
            <td>25.74</td>
            <td>22.87</td>
            <td>47.83</td>
            <td>38.13</td>
            <td>9.70</td>
            <td>吉 </td>
            <td>1</td>
            <td>综合</td>
        </tr>
        <tr>
            <td>10</td>
            <td>西安交大</td>
            <td>92.82</td>
            <td>47.22</td>
            <td>24.54</td>
            <td>22.68</td>
            <td>45.60</td>
            <td>35.47</td>
            <td>10.13</td>
            <td>陕</td>
            <td>1</td>
            <td>综合</td>
        </tr>
    </tbody>
</table>
</body>
</html>

 

建站咨询 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。