Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Ẩn/hiện các dòng/cột của bảng
URL: https://www.javascriptbank.com/crossbrowser-x-table-toys.html
Hiệu ứng sẽ làm cho màu nền của các dòng/cột của bảng thay đổi khi ta rê con trỏ chuột vào chúng.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Ẩn/hiện các dòng/cột của bảng
URL: https://www.javascriptbank.com/crossbrowser-x-table-toys.html
<style type="text/css">.tCon { position:relative; height:180px;}table { position:absolute; top:0; width:300px; text-align:center; border:1px solid #000; padding:10px;}#table1, #table3, #table5 { left:0;}#table2, #table4, #table6 { left:310px;}#table1 td, #table2 td, #table3 td, #table4 td { cursor:pointer;}#table5 th, #table6 th { cursor:pointer;}.trOver { color:#000; background:#996;}.trOut { color:#000; background:#fff;}.tdOver { color:#000; background:#963;}.tdOut { color:#000; background:#fff;}.thOver { color:#000; background:#630;}.thOut { color:#000; background:#fff;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript">window.onload = function(){ if (window.winOnLoad) window.winOnLoad();}</script><script type="text/javascript">function winOnLoad(){ if (document.getElementById) { rowSetup(1, 2); rowSetup(2, 1); cellSetup(3, 4); cellSetup(4, 3); colSetup(5, 6); colSetup(6, 5); } }////////////// Rows (demo 1)function rowSetup(nThis, nRelated){ var sec, r, e; sec = document.getElementById('tbody' + nThis); if (sec && sec.rows) { for (r = 0; r < sec.rows.length; ++r) { e = sec.rows[r]; e.onmouseover = trOnMouseover; e.onmouseout = trOnMouseout; e.onclick = trOnClick; e.className = 'trOut'; e.nRelated = nRelated; } }}function trOnMouseover(){ this.className = 'trOver'; var sec = document.getElementById('tbody' + this.nRelated); sec.rows[this.sectionRowIndex].className = 'trOver';}function trOnMouseout(){ this.className = 'trOut'; var sec = document.getElementById('tbody' + this.nRelated); sec.rows[this.sectionRowIndex].className = 'trOut';}function trOnClick(){ var r = this.sectionRowIndex; var sec = document.getElementById('tbody' + this.nRelated); var dis = sec.rows[r].style.display; xTableRowDisplay(dis == 'none', sec, r);}////////////// Cells (demo 2)function cellSetup(nThis, nRelated){ var sec, r, c, e; sec = document.getElementById('tbody' + nThis); if (sec && sec.rows && sec.rows[0].cells) { for (r = 0; r < sec.rows.length; ++r) { for (c = 0; c < sec.rows[r].cells.length; ++c) { e = sec.rows[r].cells[c]; e.onmouseover = tdOnMouseover; e.onmouseout = tdOnMouseout; e.onclick = tdOnClick; e.className = 'tdOut'; e.nRelated = nRelated; } } }}function tdOnMouseover(){ this.className = 'tdOver'; var r = this.parentNode.sectionRowIndex, c = this.cellIndex; var sec = document.getElementById('tbody' + this.nRelated); sec.rows[r].cells[c].className = 'tdOver';}function tdOnMouseout(){ this.className = 'tdOut'; var r = this.parentNode.sectionRowIndex, c = this.cellIndex; var sec = document.getElementById('tbody' + this.nRelated); sec.rows[r].cells[c].className = 'tdOut';}function tdOnClick(){ var r = this.parentNode.sectionRowIndex, c = this.cellIndex; var sec = document.getElementById('tbody' + this.nRelated); var vis = sec.rows[r].cells[c].style.visibility; xTableCellVisibility(vis == 'hidden', sec, r, c);}////////////// Columns (demo 3)function colSetup(nThis, nRelated){ var sec, c, e; sec = document.getElementById('thead' + nThis); if (sec && sec.rows && sec.rows[0].cells) { for (c = 0; c < sec.rows[0].cells.length; ++c) { e = sec.rows[0].cells[c]; e.onmouseover = thOnMouseover; e.onmouseout = thOnMouseout; e.onclick = thOnClick; e.className = 'thOut'; e.nRelated = nRelated; } }}function thOnMouseover(){ this.className = 'thOver'; var c = this.cellIndex; var sec = document.getElementById('thead' + this.nRelated); sec.rows[0].cells[c].className = 'thOver';}function thOnMouseout(){ this.className = 'thOut'; var c = this.cellIndex; var sec = document.getElementById('thead' + this.nRelated); sec.rows[0].cells[c].className = 'thOut';}function thOnClick(){ var c = this.cellIndex; var sec = document.getElementById('thead' + this.nRelated); var dis = sec.rows[0].cells[c].style.display == 'none'; xTableColDisplay(dis, sec, c); sec = document.getElementById('tbody' + this.nRelated); xTableColDisplay(dis, sec, c);}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div class="leftContent"> <!-- Begin left content --><h2>X Table Toys</h2><h3>Description</h3><div class="collapsible"><p>This page is a test for three new X functions:<br>xTableRowDisplay(), xTableCellVisibility() and xTableColDisplay().</p></div> <!-- end collapsible --><h3>Demo 1: xTableRowDisplay()</h3><div class="collapsible"><p>Click a row in one table to toggle the <i>display</i> of the same row in the other table.</p><div class="tCon"><table id="table1"> <caption>Table 1</caption> <thead> <tr><th>Col 0</th><th>Col 1</th></tr> </thead> <tbody id="tbody1"> <tr class="trOut"><td>[Row0, Col0]</td><td>[Row0, Col1]</td></tr> <tr class="trOut"><td>[Row1, Col0]</td><td>[Row1, Col1]</td></tr> <tr class="trOut"><td>[Row2, Col0]</td><td>[Row2, Col1]</td></tr> <tr class="trOut"><td>[Row3, Col0]</td><td>[Row3, Col1]</td></tr> </tbody></table><table id="table2"> <caption>Table 2</caption> <thead> <tr><th>Col 0</th><th>Col 1</th></tr> </thead> <tbody id="tbody2"> <tr class="trOut"><td>[Row0, Col0]</td><td>[Row0, Col1]</td></tr> <tr class="trOut"><td>[Row1, Col0]</td><td>[Row1, Col1]</td></tr> <tr class="trOut"><td>[Row2, Col0]</td><td>[Row2, Col1]</td></tr> <tr class="trOut"><td>[Row3, Col0]</td><td>[Row3, Col1]</td></tr> </tbody></table></div></div> <!-- end collapsible --><h3>Demo 2: xTableCellVisibility()</h3><div class="collapsible"><p>Click a cell in one table to toggle the <i>visibility</i> of the same cell in the other table.</p><div class="tCon"><table id="table3"> <caption>Table 3</caption> <thead> <tr><th>Col 0</th><th>Col 1</th></tr> </thead> <tbody id="tbody3"> <tr><td class="tdOut">[Row0, Col0]</td><td class="tdOut">[Row0, Col1]</td></tr> <tr><td class="tdOut">[Row1, Col0]</td><td class="tdOut">[Row1, Col1]</td></tr> <tr><td class="tdOut">[Row2, Col0]</td><td class="tdOut">[Row2, Col1]</td></tr> <tr><td class="tdOut">[Row3, Col0]</td><td class="tdOut">[Row3, Col1]</td></tr> </tbody></table><table id="table4"> <caption>Table 4</caption> <thead> <tr><th>Col 0</th><th>Col 1</th></tr> </thead> <tbody id="tbody4"> <tr><td class="tdOut">[Row0, Col0]</td><td class="tdOut">[Row0, Col1]</td></tr> <tr><td class="tdOut">[Row1, Col0]</td><td class="tdOut">[Row1, Col1]</td></tr> <tr><td class="tdOut">[Row2, Col0]</td><td class="tdOut">[Row2, Col1]</td></tr> <tr><td class="tdOut">[Row3, Col0]</td><td class="tdOut">[Row3, Col1]</td></tr> </tbody></table></div></div> <!-- end collapsible --><h3>Demo 3: xTableColDisplay()</h3><div class="collapsible"><p>Click a column heading in one table to toggle the <i>display</i> of the same column in the other table.</p><div class="tCon"><table id="table5"> <caption>Table 5</caption> <thead id="thead5"> <tr><th class="thOut">Col 0</th><th class="thOut">Col 1</th></tr> </thead> <tbody id="tbody5"> <tr><td>[Row0, Col0]</td><td>[Row0, Col1]</td></tr> <tr><td>[Row1, Col0]</td><td>[Row1, Col1]</td></tr> <tr><td>[Row2, Col0]</td><td>[Row2, Col1]</td></tr> <tr><td>[Row3, Col0]</td><td>[Row3, Col1]</td></tr> </tbody></table><table id="table6"> <caption>Table 6</caption> <thead id="thead6"> <tr><th class="thOut">Col 0</th><th class="thOut">Col 1</th></tr> </thead> <tbody id="tbody6"> <tr><td>[Row0, Col0]</td><td>[Row0, Col1]</td></tr> <tr><td>[Row1, Col0]</td><td>[Row1, Col1]</td></tr> <tr><td>[Row2, Col0]</td><td>[Row2, Col1]</td></tr> <tr><td>[Row3, Col0]</td><td>[Row3, Col1]</td></tr> </tbody></table></div></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/form/crossbrowser/x_core.jshttp://javascriptbank.com/javascript/form/crossbrowser/x_table.js