every table with class data now has mark and hover effect

This commit is contained in:
Sebastian Mendel
2005-10-20 11:57:20 +00:00
parent c4acd45adf
commit f892e93431
2 changed files with 52 additions and 10 deletions

View File

@@ -15,6 +15,8 @@ $Source$
* sql.php, footer.inc.php: refresh left frame on view creation * sql.php, footer.inc.php: refresh left frame on view creation
* left.php: view icon for views * left.php: view icon for views
* libraries/left.js: dropped * libraries/left.js: dropped
* libraries/function.js: tuned PMA_merkRowsInit():
every table with class data now has mark and hover effect
2005-10-19 Alexander M. Turek <me@derrabus.de> 2005-10-19 Alexander M. Turek <me@derrabus.de>
* lang/*.inc.php, libraries/mysql_charsets.lib.php: Correct description * lang/*.inc.php, libraries/mysql_charsets.lib.php: Correct description

View File

@@ -465,20 +465,27 @@ var marked_row = new Array;
/** /**
* enables highlight and marking of rows in data tables * enables highlight and marking of rows in data tables
*
*/ */
function tabdataInit() { function PMA_markRowsInit() {
// in every table ...
var tables = document.getElementsByTagName('table'); var tables = document.getElementsByTagName('table');
for (var t=0; t<tables.length; t++) { for (var t=0; t<tables.length; t++) {
// ... with the class 'data' ...
if ( 'data' != tables[t].className ) { if ( 'data' != tables[t].className ) {
continue; continue;
} }
// ... in tbody ...
var body = tables[t].getElementsByTagName('tbody') var body = tables[t].getElementsByTagName('tbody')
// ... for every row ('tr') ...
var rows = body[0].getElementsByTagName('tr'); var rows = body[0].getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) { for (var i = 0; i < rows.length; i++) {
rows[i].style.cursor = 'pointer'; // ... add event listeners ...
// ... to highlight the row on mouseover ...
if ( navigator.appName == 'Microsoft Internet Explorer' ) { if ( navigator.appName == 'Microsoft Internet Explorer' ) {
// but only for IE, other browsers are handled by :hover in css
rows[i].onmouseover = function() { rows[i].onmouseover = function() {
this.className += ' hover'; this.className += ' hover';
} }
@@ -486,27 +493,60 @@ function tabdataInit() {
this.className = this.className.replace(' hover', ''); this.className = this.className.replace(' hover', '');
} }
} }
// ... and to mark the row on click ...
rows[i].onmousedown = function() { rows[i].onmousedown = function() {
if ( ! this.id ) { var unique_id;
return; var checkbox;
}
if ( typeof(marked_row[this.id]) == 'undefined' || !marked_row[this.id] ) { var checkbox = this.getElementsByTagName('input')[0];
marked_row[this.id] = true; if ( checkbox && checkbox.type == 'checkbox' ) {
if ( checkbox.id.length > 0 ) {
unique_id = checkbox.id;
} else {
unique_id = checkbox.name + checkbox.value;
}
} else if ( this.id.length > 0 ) {
unique_id = this.id;
} else { } else {
marked_row[this.id] = false; return;
}
if ( typeof(marked_row[unique_id]) == 'undefined' || !marked_row[unique_id] ) {
marked_row[unique_id] = true;
} else {
marked_row[unique_id] = false;
} }
if ( marked_row[this.id] ) { if ( marked_row[unique_id] ) {
this.className += ' marked'; this.className += ' marked';
} else { } else {
this.className = this.className.replace(' marked', ''); this.className = this.className.replace(' marked', '');
} }
if ( checkbox && checkbox.disabled == false ) {
checkbox.checked = marked_row[unique_id];
}
} }
// ... and disable label ...
var labeltag = rows[i].getElementsByTagName('label')[0];
if ( labeltag ) {
labeltag.onclick = function() {
return false;
}
}
// .. and checkbox clicks
var checkbox = rows[i].getElementsByTagName('input')[0];
if ( checkbox ) {
checkbox.onclick = function() {
// opera does not recognize return false;
this.checked = ! this.checked;
}
}
} }
} }
} }
window.onload=tabdataInit; window.onload=PMA_markRowsInit;
/** /**
* Sets/unsets the pointer and marker in browse mode * Sets/unsets the pointer and marker in browse mode