Хотел было помочь, да сам увяз в этой проблеме.
Сделал несколько вариантов, но к сожалению кроссбраузерности добиться так и не удалось...
Вот то как это сделано в phpMyAdmin:
| Код |
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type='text/javascript'>
/**
* This array is used to remember mark status of rows in browse mode
*/
var marked_row = new Array;
/**
* Sets/unsets the pointer and marker in browse mode
*
* @param object the table row
* @param integer the row number
* @param string the action calling this script (over, out or click)
* @param string the default background color
* @param string the color to use for mouseover
* @param string the color to use for marking a row
*
* @return boolean whether pointer is set or not
*/
function setPointer(theRow, theRowNum, theAction, theDefaultColor, thePointerColor, theMarkColor)
{
var theCells = null;
// 1. Pointer and mark feature are disabled or the browser can't get the
// row -> exits
if ((thePointerColor == '' && theMarkColor == '')
|| typeof(theRow.style) == 'undefined') {
return false;
}
// 2. Gets the current row and exits if the browser can't get it
if (typeof(document.getElementsByTagName) != 'undefined') {
theCells = theRow.getElementsByTagName('td');
}
else if (typeof(theRow.cells) != 'undefined') {
theCells = theRow.cells;
}
else {
return false;
}
// 3. Gets the current color...
var rowCellsCnt = theCells.length;
var domDetect = null;
var currentColor = null;
var newColor = null;
// 3.1 ... with DOM compatible browsers except Opera that does not return
// valid values with "getAttribute"
if (typeof(window.opera) == 'undefined'
&& typeof(theCells[0].getAttribute) != 'undefined') {
currentColor = theCells[0].getAttribute('bgcolor');
domDetect = true;
}
// 3.2 ... with other browsers
else {
currentColor = theCells[0].style.backgroundColor;
domDetect = false;
} // end 3
// 3.3 ... Opera changes colors set via HTML to rgb(r,g,b) format so fix it
if (currentColor.indexOf("rgb") >= 0)
{
var rgbStr = currentColor.slice(currentColor.indexOf('(') + 1,
currentColor.indexOf(')'));
var rgbValues = rgbStr.split(",");
currentColor = "#";
var hexChars = "0123456789ABCDEF";
for (var i = 0; i < 3; i++)
{
var v = rgbValues[i].valueOf();
currentColor += hexChars.charAt(v/16) + hexChars.charAt(v%16);
}
}
// 4. Defines the new color
// 4.1 Current color is the default one
if (currentColor == ''
|| currentColor.toLowerCase() == theDefaultColor.toLowerCase()) {
if (theAction == 'over' && thePointerColor != '') {
newColor = thePointerColor;
}
else if (theAction == 'click' && theMarkColor != '') {
newColor = theMarkColor;
marked_row[theRowNum] = true;
// Garvin: deactivated onclick marking of the checkbox because it's also executed
// when an action (like edit/delete) on a single item is performed. Then the checkbox
// would get deactived, even though we need it activated. Maybe there is a way
// to detect if the row was clicked, and not an item therein...
// document.getElementById('id_rows_to_delete' + theRowNum).checked = true;
}
}
// 4.1.2 Current color is the pointer one
else if (currentColor.toLowerCase() == thePointerColor.toLowerCase()
&& (typeof(marked_row[theRowNum]) == 'undefined' || !marked_row[theRowNum])) {
if (theAction == 'out') {
newColor = theDefaultColor;
}
else if (theAction == 'click' && theMarkColor != '') {
newColor = theMarkColor;
marked_row[theRowNum] = true;
// document.getElementById('id_rows_to_delete' + theRowNum).checked = true;
}
}
// 4.1.3 Current color is the marker one
else if (currentColor.toLowerCase() == theMarkColor.toLowerCase()) {
if (theAction == 'click') {
newColor = (thePointerColor != '')
? thePointerColor
: theDefaultColor;
marked_row[theRowNum] = (typeof(marked_row[theRowNum]) == 'undefined' || !marked_row[theRowNum])
? true
: null;
// document.getElementById('id_rows_to_delete' + theRowNum).checked = false;
}
} // end 4
// 5. Sets the new color...
if (newColor) {
var c = null;
// 5.1 ... with DOM compatible browsers except Opera
if (domDetect) {
for (c = 0; c < rowCellsCnt; c++) {
theCells[c].setAttribute('bgcolor', newColor, 0);
} // end for
}
// 5.2 ... with other browsers
else {
for (c = 0; c < rowCellsCnt; c++) {
theCells[c].style.backgroundColor = newColor;
}
}
} // end 5
return true;
} // end of the 'setPointer()' function
</script>
</head>
<body bgcolor="#F5F5F5">
<table border="0" cellpadding="2" cellspacing="1">
<tr>
<th id="th1"> </th>
<th id="th2"> Поле </th>
<th id="th3">Тип</th>
<th>Сравнение</th>
<th id="th5">Ноль</th>
</tr>
<tr onmouseover="setPointer(this, 1, 'over', '#E5E5E5', '#CCFFCC', '#FFCC99');" onmouseout="setPointer(this, 1, 'out', '#E5E5E5', '#CCFFCC', '#FFCC99');" onmousedown="setPointer(this, 1, 'click', '#E5E5E5', '#CCFFCC', '#FFCC99');">
<td align="center" bgcolor="#E5E5E5">
<input type="checkbox" name="selected_fld[]" value="Host" id="checkbox_row_1" />
</td>
<td onmousedown="document.getElementById('checkbox_row_1').checked = (document.getElementById('checkbox_row_1').checked ? false : true);" bgcolor="#E5E5E5" nowrap="nowrap"> <label onclick="return (document.getElementById('checkbox_row_1') ? false : true)" for="checkbox_row_1"><u>Host</u></label> </td>
<td onmousedown="document.getElementById('checkbox_row_1').checked = (document.getElementById('checkbox_row_1').checked ? false : true);" bgcolor="#E5E5E5" nowrap="nowrap">char(60)<bdo dir="ltr"></bdo></td>
<td bgcolor="#E5E5E5" onmousedown="document.getElementById('checkbox_row_1').checked = (document.getElementById('checkbox_row_1').checked ? false : true);" ><dfn title="Юникод (многоязычный), Двоичный ">utf8_bin</dfn></td>
<td onmousedown="document.getElementById('checkbox_row_1').checked = (document.getElementById('checkbox_row_1').checked ? false : true);" bgcolor="#E5E5E5">Нет </td>
</tr>
<tr onmouseover="setPointer(this, 2, 'over', '#D5D5D5', '#CCFFCC', '#FFCC99');" onmouseout="setPointer(this, 2, 'out', '#D5D5D5', '#CCFFCC', '#FFCC99');" onmousedown="setPointer(this, 2, 'click', '#D5D5D5', '#CCFFCC', '#FFCC99');">
<td align="center" bgcolor="#D5D5D5">
<input type="checkbox" name="selected_fld[]" value="Db" id="checkbox_row_2" />
</td>
<td onmousedown="document.getElementById('checkbox_row_2').checked = (document.getElementById('checkbox_row_2').checked ? false : true);" bgcolor="#D5D5D5" nowrap="nowrap"> <label onclick="return (document.getElementById('checkbox_row_2') ? false : true)" for="checkbox_row_2"><u>Db</u></label> </td>
<td onmousedown="document.getElementById('checkbox_row_2').checked = (document.getElementById('checkbox_row_2').checked ? false : true);" bgcolor="#D5D5D5" nowrap="nowrap">char(64)<bdo dir="ltr"></bdo></td>
<td bgcolor="#D5D5D5" onmousedown="document.getElementById('checkbox_row_2').checked = (document.getElementById('checkbox_row_2').checked ? false : true);" ><dfn title="Юникод (многоязычный), Двоичный ">utf8_bin</dfn></td>
<td onmousedown="document.getElementById('checkbox_row_2').checked = (document.getElementById('checkbox_row_2').checked ? false : true);" bgcolor="#D5D5D5">Нет </td>
</tr>
<tr onmouseover="setPointer(this, 3, 'over', '#E5E5E5', '#CCFFCC', '#FFCC99');" onmouseout="setPointer(this, 3, 'out', '#E5E5E5', '#CCFFCC', '#FFCC99');" onmousedown="setPointer(this, 3, 'click', '#E5E5E5', '#CCFFCC', '#FFCC99');">
<td align="center" bgcolor="#E5E5E5">
<input type="checkbox" name="selected_fld[]" value="User" id="checkbox_row_3" />
</td>
<td onmousedown="document.getElementById('checkbox_row_3').checked = (document.getElementById('checkbox_row_3').checked ? false : true);" bgcolor="#E5E5E5" nowrap="nowrap"> <label onclick="return (document.getElementById('checkbox_row_3') ? false : true)" for="checkbox_row_3"><u>User</u></label> </td>
<td onmousedown="document.getElementById('checkbox_row_3').checked = (document.getElementById('checkbox_row_3').checked ? false : true);" bgcolor="#E5E5E5" nowrap="nowrap">char(16)<bdo dir="ltr"></bdo></td>
<td bgcolor="#E5E5E5" onmousedown="document.getElementById('checkbox_row_3').checked = (document.getElementById('checkbox_row_3').checked ? false : true);" ><dfn title="Юникод (многоязычный), Двоичный ">utf8_bin</dfn></td>
<td onmousedown="document.getElementById('checkbox_row_3').checked = (document.getElementById('checkbox_row_3').checked ? false : true);" bgcolor="#E5E5E5">Нет </td>
</tr>
</table>
</body>
</html>
|
дальше мои варианты в порядке возрастания сложности:
5) Таблица aka phpMyAdmin (1-1).htm:
| Код |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251' />
<meta name="Generator" content='EditPlus 2.12' />
<meta name="Author" content='Ciber SLasH' />
<title>JavaScript :: Ячейки таблицы aka phpMyAdmin</title>
<style type='text/css'>
caption {font: bold 1.2em Arial, Helvetica; color: navy}
thead {font: bold 0.9em sans-serif; text-align: center; background: red}
table, td {border: 1px solid black; cursor: default}
.defaultColor {background: #F3F3F3}
.activeColor {background: #99FFCC}
.pushedColor {background: #FFCC99}
</style>
</head>
<body>
<table class='defaultColor' id='tbList' cellspacing="0" cellpadding="3" align="center">
<caption>Список исполнителей</caption>
<thead>
<tr><td colspan="2">Группа / Альбом</td><td>Год</td><td>Формат</td><td>Цена</td><td>ID-товара</td></tr>
</thead>
<tbody>
<tr><td><input type="checkbox" /></td><td>Гражданская Оборона "Долгая Счастливая Жизнь"</td><td>2004</td><td>OGG q6</td><td>$1.00</td><td>147852369</td></tr>
<tr><td><input type="checkbox" /></td><td>PurgeN "Протест Деталей Механизма"</td><td>2004</td><td>OGG q6</td><td>$0.95</td><td>123789456</td></tr>
<tr><td><input type="checkbox" /></td><td>Наив "Живой И Невредимый"</td><td>2004</td><td>MP3 192kbps CBR</td><td>$0.50</td><td>159753852</td></tr>
</tbody>
</table>
<script type='text/javascript'>
var obj = document.getElementById('tbList'); // ссылка на нашу таблицу
//--[ Украшения ]---------------------------------------------------------------
// Формат {font-weight: bold}; Цена {font-weight: bold; color: green}
var colNumFormat, colNumPrice; // colNumFormat - номер колонки "Формат", colNumPrice - номер колонки "Цена"
var colHeadCount = obj.rows[0].cells.length; // число колонок в заголовке таблице (нулевая строка)
// Ищем в заголовке ячейку с соответствующими названиями
for (var i = 0; i < colHeadCount; i++) {
//alert(obj.rows[0].cells[i].innerText + ' [' +i+ ']')
if (obj.rows[0].cells[i].innerText == 'Формат') colNumFormat = i;
if (obj.rows[0].cells[i].innerText == 'Цена') colNumPrice = i;
}
// Пробегаем по всей таблице и преукрашиваем её
for (var j = 1; j < obj.rows.length; j++) { // строки (1..n)
for (var i = 0; i < obj.rows[j].cells.length; i++) { // столбцы (1..n)
if (i == 0) // если нулевая ячейка текущей строки, то...
// У каждого элем. INPUT убераем фокусировку
obj.rows[j].cells[0].childNodes[0].onclick = function() {
this.blur();
return false;
}
// Для колонок "Формат" и "Цена" (colNumFormat+1 — т.к. все строки, кроме нулевой, имеют ячеек на 1 больше)
if (i == colNumFormat+1) { // если колонка "Формат", то...
obj.rows[j].cells[i].style.fontWeight = 'bold';
obj.rows[j].cells[i].style.color = 'green';
}
if (i == colNumPrice+1) { // если колонка "Цена", то...
obj.rows[j].cells[i].style.fontWeight = 'bold';
obj.rows[j].cells[i].style.color = 'blue';
}
}
// Для каждой строки назначаем обработчик событий
with (obj.rows[j]) {
onmouseover = MouseEnter;
onmouseout = MouseLeave;
onmousedown = MouseDown;
}
}
/*** Обработчик события onMouseOver текущей строки ***/
function MouseEnter(event) {
var evt = event ? event : window.event;
var target = evt.target ? evt.target : evt.srcElement;
var objTR = target; // текущая строка
var objInput; // ссылка на элем. INPUT текущей строки, нулевой ячейки
while (objTR.tagName.toUpperCase() != 'TR') objTR = objTR.parentElement;
objInput = objTR.childNodes[0].childNodes[0];
// Если checkbox НЕ чекнутый, то меняем имя класса текущей строки таблицы
if (! objInput.checked) objTR.className = 'activeColor';
}
/*** Обработчик события onMouseLeave текущей строки ***/
function MouseLeave(event) {
var evt = event ? event : window.event;
var target = evt.target ? evt.target : evt.srcElement;
var objTR = target; // текущая строка
var objInput; // ссылка на элем. INPUT текущей строки, нулевой ячейки
while (objTR.tagName.toUpperCase() != 'TR') objTR = objTR.parentElement;
objInput = objTR.childNodes[0].childNodes[0];
// Если checkbox НЕ чекнутый, то меняем имя класса текущей строки таблицы
if (! objInput.checked) objTR.className = 'defaultColor';
}
/*** Обработчик события onMouseDown текущей строки ***/
function MouseDown(event) {
var evt = event ? event : window.event;
var target = evt.target ? evt.target : evt.srcElement;
var objTR = target; // текущая строка
var objInput; // ссылка на элем. INPUT текущей строки, нулевой ячейки
while (objTR.tagName.toUpperCase() != 'TR') objTR = objTR.parentElement;
objInput = objTR.childNodes[0].childNodes[0];
if (objInput.checked) { // если checkbox чекнутый, то...
objInput.checked = false; // разчекиваем его
objTR.className = 'activeColor'; // меняем имя класса текущей строки таблицы
}
else { // если checkbox НЕ чекнутый, то...
objInput.checked = true; // чекаем его
objTR.className = 'pushedColor'; // меняем имя класса текущей строки таблицы
}
}
</script>
</body>
</html>
|
Не хочется сдирать с оригинала, т.к. мне не нравится, что там слишком много лишнего кода. Да и события нужно вручную прописывать для каждой строки/ячейки.
Хотелось бы довести до кроссбраузерности (всмысле для: IE5+, Opera7+, FireFox1+) свои 5 или 4 варианты (впринципе одно и тоже).
Обращение к знатокам (Sardar, Aliance, etc.): I need help !! 
Уж больно заинтересовала меня темка 
PS: к сожалению все варианты не влезли в пост, поэтому первые 4 варианта — в аттаче. |
