Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Trang trí bảng biểu
URL: https://www.javascriptbank.com/alternating-rows-for-static-spreadsheet.html
Đoạn mã JavaScript này kết hợp CSS và JavaScript để trang trí cho bảng dữ liệu hoạt động trên nền web trở nên đẹp và dễ đọc hơn, bạn chỉ cần tinh chỉnh theo ý thích và sử dụng thoải mái, bởi vì đoạn mã JavaScript này được tác giả công bố như mã nguồn mã và tuân theo giấy phép Creative Commons License.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Trang trí bảng biểu
URL: https://www.javascriptbank.com/alternating-rows-for-static-spreadsheet.html
<style type="text/css"><!--.arc90_altrows-Brown { font-family: Georgia, serif;}.arc90_altrowsBrown0 { background-color: #D0997E;}.arc90_altrowsBrown1 { background-color: #E5C6B7;}.arc90_altrowsBrown2 { background-color: #F3E4DD;}.arc90_altrows-Brown td { font-size: .85em;padding: .5em;}.arc90_altrows-Brown th {border: 1px solid #BF5623;padding: .5em;color: #FFF;}--></style><script language="javascript"><!--// Created by: Arc90, Inc. :: http://arc90.com/// Licensed under: Creative Commons License/* Globals */var arc90_isIE = document.all? true: false;function arc90_altrows() {var parts = ['TABLE', 'THEAD', 'TFOOT', 'TBODY'];for (var t = 0, r = parts.length; t < r; t++) {var T = document.getElementsByTagName(parts[t]);// create the alterNationfor (var i = 0, l = T.length, c = 0; i < l; i++) {var tc = T[i].className;var a = tc.indexOf('altrows');var n = tc.indexOf('norows');if (n >= 0) {T[i].className = 'arc90_norows';var R = T[i].getElementsByTagName('TR');for (var j = 0, m = R.length; j < m; j++) {R[j].style.background = '';R[j].className = 'arc90_norows';}} else if (a >= 0 ) {var c = T[i].className.slice(a), s = c.indexOf(' '), x = null, z = '', cn = '';c = T[i].className.slice(a, s > 0? s: T[i].className.length).split('-');if (c.length == 2) { // themecn = c[1];} else if (c.length > 2) { // rotating colourscn = c.slice(1);x = c.length - 1;z = -1;}// now go through every sub row and assign alternating row coloursR = T[i].getElementsByTagName('TR');for (var j = 0, m = R.length; j < m; j++) {n = R[j].className.indexOf('norows');if (n >= 0)continue;z = (x != null && z+1 < x? z+1: x != null? 0: j % 2); // either the rotating row number or theme alternationif (x == null) R[j].className = 'arc90_altrows'+cn+''+z;else R[j].style.backgroundColor = '#'+ cn[z];}}}}}/* Events */function arc90_isString(o) { return (typeof(o) == "string"); }function arc90_isNumeric(o) { return (typeof(parseFloat(o).toString() == 'NaN'? 'xxx': parseFloat(o)) == "number" && parseFloat(o) != ''); }function arc90_addEvent(e, meth, func, cap) {if (arc90_isString(e))e = document.getElementById(e);if (e.addEventListener){e.addEventListener(meth, func, cap); return true;}else if (e.attachEvent)return e.attachEvent("on"+ meth, func);return false;}/* Nodes */function arc90_newNode(t, i, s, x, c) {var node = document.createElement(t);if (x != null && x != '') {var n = document.createTextNode(x);node.appendChild(n);}if (i != null && i != '')node.id = i;if (s != null && s != '')node.className = s;if (c != null && c != '')node.appendChild(c);return node;}/* Onload */arc90_addEvent(window, 'load', arc90_altrows);//--></script><table class="arc90_altrows-Brown" summary="Acme Employee List"><tbody><tr class="arc90_altrowsBrown0"><th>Name</th><th>Extension</th><th>Start date</th></tr><tr class="arc90_altrowsBrown1"><td>Bloggs, Fred</td><td>1353</td><td>08/18/2003</td></tr><tr class="arc90_altrowsBrown0"><td>Turvey, Kevin</td><td>2342</td><td>02/05/1979</td></tr><tr class="arc90_altrowsBrown1"><td>Mbogo, Arnold</td><td>2755</td><td>09/08/1998</td></tr><tr class="arc90_altrowsBrown0"><td>Shakespeare, Bill</td><td>3211</td><td>12/11/1961</td></tr><tr class="arc90_altrowsBrown1"><td>Fitz, Marvin</td><td>5554</td><td>05/22/1995</td></tr></tbody></table>