动态创建Table每行随机换色

  最近在学习javascript,所以写下例子,练习一下,记录今天,方便以后查看!

  JavaScript用的是静态私有变量,每个实例都没有自己的私有变量。

  Css代码如下:

 1 table {max-width: 100%;background-color: transparent;border-collapse: collapse;border-spacing: 0;}

 2 .table {width: 100%;margin-bottom: 20px;}

 3 .table th,.table td {padding: 8px;line-height: 20px;text-align: left;vertical-align: top;border-top: 1px solid #dddddd;}

 4 .table th {font-weight: bold;}

 5 .table thead th {vertical-align: bottom;}

 6 .table tbody + tbody {border-top: 2px solid #dddddd;}

 7 .table-hover tbody tr:hover td,.table-hover tbody tr:hover th {background-color: #f5f5f5;}

 8 .table tbody tr.success td {background-color: #dff0d8;}

 9 .table tbody tr.error td {background-color: #f2dede;}

10 .table tbody tr.warning td {background-color: #fcf8e3;}

11 .table tbody tr.info td {background-color: #d9edf7;}

12 .table-hover tbody tr.success:hover td {background-color: #d0e9c6;}

13 .table-hover tbody tr.error:hover td {background-color: #ebcccc;}

14 .table-hover tbody tr.warning:hover td {background-color: #faf2cc;}

15 .table-hover tbody tr.info:hover td {background-color: #c4e3f3;}

  JavaScript代码如下:

 1  function selectForm(lowerValue, upperValue) {

 2         return Math.floor(Math.random() * (upperValue - lowerValue + 1) + lowerValue);

 3     }

 4     (function() {

 5         var row = 10;

 6         var col = 5;

 7         var classNames = ["success", "error", "warning", "info"];

 8         Table = function() {

 9             if (arguments.length === 1) {

10                 row = arguments[0];

11             } else if (arguments.length === 2) {

12                 row = arguments[0];

13                 col = arguments[1];

14             } else if (arguments.length === 3) {

15                 row = arguments[0];

16                 col = arguments[1];

17                 classNames = arguments[2];

18             }

19         };

20         Table.prototype.getRows = function() {

21             return row;

22         };

23         Table.prototype.setRows = function(value) {

24             row = value;

25         }

26         Table.prototype.getCols = function() {

27             return col;

28         };

29         Table.prototype.setCols = function(value) {

30             col = value;

31         }

32         Table.prototype.getclassNames = function() {

33             return color;

34         };

35         Table.prototype.setclassNames = function(value) {

36             color = value;

37         }

38         Table.prototype.createTable = function() {

39             var data = new Array();

40             data.push("<table class=\"table table-hover\"><tbody id=\"myTab\">");

41             for (var i = 0; i < row; i++) {

42                 data.push("<tr>");

43                 for (var j = 0; j < col; j++) {

44                     data.push("<td>(" + i + "," + j + ")</td>");

45                 }

46                 data.push("</tr>");

47             }

48             data.push("</table></tbody>");

49             document.body.innerHTML = data.join("");

50         };

51         Table.prototype.setTableRowColor = function() {

52             var trs = document.getElementById("myTab").getElementsByTagName("tr");

53             for (var i = 0; i < trs.length; i++) {

54                 trs[i].className = classNames[selectForm(0, classNames.length - 1)];

55             }

56         }

57     })();

58     var table = new Table();

59     table.createTable();

60     table.setTableRowColor();

  Html代码如下:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2 <html xmlns="http://www.w3.org/1999/xhtml">

3 <head>

4     <title>动态创建Table每行随机换色</title>

5 </head>

6 <body>

7 

8 </body>

9 </html>

  运行效果图,如下所示:

  

你可能感兴趣的:(table)