VPF::Таблица меняет цвет при наведении мышки

wolfmessing

Дата 25.4.2008, 08:58 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 61
Регистрация: 24.4.2007

Репутация: нет
Всего: 1

Ни кто не подскажет как заставить Оперу работать с Ява-Скриптом smile

код взял с примера от сюда
Грубо говоря при наведении мышкой на таблицу цвет в строке(в которой мыш) меняется, так же можно выделять строки

Код


<script type="text/javascript">
<!--

overCol2="#32ABAB"
outCol2="#FFFFFF"
onCol2="#E7A543"

function overColour2(cell) {
var tdEl = cell

while(tdEl.nodeName.toLowerCase() != 'input'){

if(tdEl.childNodes[0].nodeName=="#text"&&tdEl.childNodes[0].data.length<=1){
tdEl.removeChild(tdEl.childNodes[0])
}


tdEl = tdEl.firstChild
}


if (!tdEl.checked){
cell.style.backgroundColor = overCol2
}


}

function outColour2(cell) {
var tdEl = cell

while (tdEl.nodeName.toLowerCase() != 'input'){
tdEl = tdEl.firstChild
}

if (!tdEl.checked){
cell.style.backgroundColor = outCol2
}

}

function lockCellColour2(chkBx) {
var inputEl = chkBx

while (inputEl.nodeName.toLowerCase() != 'td'){
inputEl = inputEl.parentNode
}

inputEl.parentNode.style.backgroundColor = (chkBx.checked) ? onCol2 : overCol2

}


function resetInputs(){ // display only

inputCount=document.getElementsByTagName("input").length

for(var i=0;i<inputCount;i++){

if(i<=2&&document.getElementsByTagName("input")[i].checked){
document.getElementsByTagName("input")[i].parentNode.style.backgroundColor=onCol
}


if(i>2&&document.getElementsByTagName("input")[i].checked){
document.getElementsByTagName("input")[i].parentNode.parentNode.style.backgroundColor=onCol2
}
}
}

onload=resetInputs
//-->
</script>

Код


$sql_query = $db->query("какойто запрос");
if($db->num_rows($sql_query)>0){      
      echo '<table border="1" 
                      cellspacing="0" 
                      cellpadding="1" 
                      style="border-color:white;
                      font-size:14; 
                      font-family:Garamond Premr Pro;">';
       
      while ($res = $db->get_array($sql_query)){
            echo '<tr   onmouseover="overColour2(this)" 
                        onmouseout="outColour2(this)" style="background-color:#FFFFFF" 
                        onclick="this.firstChild.firstChild.click()">
                        <td width="1%" align="center">
                              <input type="checkbox" onclick="lockCellColour2(this) ; event.cancelBubble=true">
                        </td>
                        <td >ну типа тут вывод</td></tr>';
      }
      echo '</table>';
}

В ИЕ всё хорошо, а Опера и Лиса не хотят на таблицах менять цвет

bars80080

Дата 25.4.2008, 09:58 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

раз он у них работает, надо было копировать точнее

ты сильно облегчишь всем задачу, если выложишь готовый html код страницы, а не пхп

wolfmessing

Дата 25.4.2008, 10:57 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 61
Регистрация: 24.4.2007

Репутация: нет
Всего: 1

да конешно smile

Код



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Строка в таблице при наведении выделяется фоном. Отметка в радио-кнопке на этой строке еще раз изменяет цвет фона</TITLE>
<META http-equiv=Page-Enter content=blendTrans(Duration=0.5)>
<META http-equiv=Page-Exit content=blendTrans(Duration=0.5)>
<META HTTP-EQUIV="Expires" CONTENT="Mon, 4 Dec 2006 00:00:00 GMT">
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<META http-equiv=Content-Language content=ru>
<META content=noindex name=robots>
<META content="javascript, JavaScript, скрипт, код, библиотека кодов, коды, вебмастер, webmaster, design, web-site, promotion, ad, banner, server, сайт, веб, дизайн, веб-дизайн, юзабилити, кнопки, навигация, ссылка, якорь, цвет, контраст, размер, стиль, оформление" name="keywords">
<META content="Javascript. Библиотека кодов более 1000 скриптов по любым разделам оформления веб-сайтов." name="description">
<BODY>
<h1><span>Check Cell or Row</span></h1>
<script type="text/javascript">
<!--

overCol="#CC0000"
outCol="#00CC00"
onCol="#0000CC"

function overColour(cell) {
var tdEl = cell

while(tdEl.nodeName.toLowerCase() != 'input'){

if(tdEl.firstChild.nodeName=="#text"&&tdEl.firstChild.data.length<=1){
tdEl.removeChild(tdEl.firstChild)
}

/*
if(tdEl.childNodes[0].nodeName=="#text"&&tdEl.childNodes[0].data.length>1){
//alert(tdEl.childNodes[tdEl.childNodes.length-1].nodeName)
for(i=0;i<tdEl.childNodes.length;i++){
alert(tdEl.childNodes[i].nodeName)
}
}
*/

tdEl = tdEl.firstChild
}

if (!tdEl.checked){
cell.style.backgroundColor = overCol
}


}

function outColour(cell) {
var tdEl = cell

while(tdEl.nodeName.toLowerCase() != 'input'){
tdEl = tdEl.firstChild
}

if (!tdEl.checked){
cell.style.backgroundColor = outCol
}

}

function lockCellColour(chkBx) {
var inputEl = chkBx

while (inputEl.nodeName.toLowerCase() != 'td'){
inputEl = inputEl.parentNode
}

inputEl.style.backgroundColor = (chkBx.checked) ? overCol : overCol

}

//-->
</script>

<P>Cell colour change onmouseover and onmouseout, on checking the checkbox the cell colour remains.
<center>

<P><table width="50%" border="1" cellspacing="0">
<tbody>
<tr>
<td>Dummy Text</td>
<td style="background-color:#00CC00;cursor:hand;cursor:pointer" onmouseover="overColour(this)" onmouseout="outColour(this)" align="center">
<input type="checkbox" name="c1" onclick="lockCellColour(this)">
Hightlight Checkbox Cell
</td>
<td>Dummy Text</td>
</tr>
<tr>
<td>Dummy Text</td>
<td style="background-color:#00CC00;cursor:hand;cursor:pointer" onmouseover="overColour(this)" onmouseout="outColour(this)" align="center">
<input type="checkbox" onclick="lockCellColour(this)">
Hightlight Checkbox Cell
</td>
<td>Dummy Text</td>
</tr>
<tr>
<td>Dummy Text</td>
<td style="background-color:#00CC00;cursor:hand;cursor:pointer" onmouseover="overColour(this)" onmouseout="outColour(this)" align="center">
<input type="checkbox" onclick="lockCellColour(this)">
Hightlight Checkbox Cell
</td>
<td>Dummy Text</td>
</tr>
</tbody>
</table>
</center>


<P><hr></P>

<script type="text/javascript">
<!--

overCol2="#CC0000"
outCol2="#00CC00"
onCol2="#0000CC"

function overColour2(cell) {
var tdEl = cell

while(tdEl.nodeName.toLowerCase() != 'input'){

if(tdEl.childNodes[0].nodeName=="#text"&&tdEl.childNodes[0].data.length<=1){
tdEl.removeChild(tdEl.childNodes[0])
}


tdEl = tdEl.firstChild
}


if (!tdEl.checked){
cell.style.backgroundColor = overCol2
}


}

function outColour2(cell) {
var tdEl = cell

while (tdEl.nodeName.toLowerCase() != 'input'){
tdEl = tdEl.firstChild
}

if (!tdEl.checked){
cell.style.backgroundColor = outCol2
}

}

function lockCellColour2(chkBx) {
var inputEl = chkBx

while (inputEl.nodeName.toLowerCase() != 'td'){
inputEl = inputEl.parentNode
}

inputEl.parentNode.style.backgroundColor = (chkBx.checked) ? onCol2 : overCol2

}


function resetInputs(){ // display only

inputCount=document.getElementsByTagName("input").length

for(var i=0;i<inputCount;i++){

if(i<=2&&document.getElementsByTagName("input")[i].checked){
document.getElementsByTagName("input")[i].parentNode.style.backgroundColor=onCol
}


if(i>2&&document.getElementsByTagName("input")[i].checked){
document.getElementsByTagName("input")[i].parentNode.parentNode.style.backgroundColor=onCol2
}
}
}

onload=resetInputs
//-->
</script>

<P>Row colour change onmouseover and onmouseout, on checking the checkbox the row colour remains.<br>
On clicking a row the checkbox is checked /unchecked and the row colour changes to suit the event

<center>
<P><table width="50%" border="1" cellspacing="0" style="cursor:hand;cursor:pointer">
<tr onmouseover="overColour2(this)" onmouseout="outColour2(this)" style="background-color:#00CC00" onclick="this.firstChild.firstChild.click()">
<td width="25" align="center">
<input type="checkbox" onclick="lockCellColour2(this) ; event.cancelBubble=true">
</td>
<td>Highlight Checkbox Row</td><td> Click Any Cell to Select</td>
</tr>
<tr onmouseover="overColour2(this)" onmouseout="outColour2(this)" style="background-color:#00CC00" onclick="this.firstChild.firstChild.click()">
<td align="center">
<input type="checkbox" onclick="lockCellColour2(this) ; event.cancelBubble=true">
</td>
<td>Highlight Checkbox Row</td><td> Click Any Cell to Select</td>
</tr>
<tr onmouseover="overColour2(this)" onmouseout="outColour2(this)" style="background-color:#00CC00" onclick="this.firstChild.firstChild.click()">
<td align="center">
<input type="checkbox" onclick="lockCellColour2(this) ; event.cancelBubble=true">
</td>
<td>Highlight Checkbox Row</td><td> Click Any Cell to Select</td>
</tr>
</table>
</center>

<P>IE and Mozilla count childNodes in different ways if a space or return is used in the HTML code, IE ignores them but Moz counts them as possible text nodes. 
Therefore checkboxes cannot have text before them in the same td cell

<P><hr></P>
The following passes the id to the functions

<P>

<script>

function test(id){
el=document.getElementById(id)
elTotal=el.childNodes.length

for(var i=0;i<elTotal;i++){
if(el.childNodes[i].nodeName.toLowerCase() == 'input'&&!el.childNodes[i].checked){
el.style.backgroundColor= overCol
}
}

}

function test2(id){
el=document.getElementById(id)
elTotal=el.childNodes.length

for(var i=0;i<elTotal;i++){
if(el.childNodes[i].nodeName.toLowerCase() == 'input'&&!el.childNodes[i].checked){
el.style.backgroundColor= outCol
}
}

}

function test3(id){
el=document.getElementById(id)
elTotal=el.childNodes.length

for(var i=0;i<elTotal;i++){
if(el.childNodes[i].nodeName.toLowerCase() == 'input'){
el.style.backgroundColor = (el.childNodes[i].checked) ? overCol : overCol
}
}

}

</script>


<P><table width="50%" border="1" cellspacing="0">
<tbody>
<tr>
<td>Dummy Text</td>
<td id="td1" style="background-color:#00CC00;cursor:hand;cursor:pointer" onmouseover="test(this.id)" onmouseout="test2(this.id)" align="center">
This is a test
<input type="checkbox" name="c1" onclick="test3('td1')">
Hightlight Checkbox Cell
</td>
<td>Dummy Text</td>
</tr>
<tr>
<td>Dummy Text</td>
<td id="td2" style="background-color:#00CC00;cursor:hand;cursor:pointer" onmouseover="test(this.id)" onmouseout="test2(this.id)" align="center">
<input type="checkbox" onclick="test3('td2')">
Hightlight Checkbox Cell
</td>
<td>Dummy Text</td>
</tr>
<tr>
<td>Dummy Text</td>
<td id="td3" style="background-color:#00CC00;cursor:hand;cursor:pointer" onmouseover="test(this.id)" onmouseout="test2(this.id)" align="center">
<input type="checkbox" onclick="test3('td3')">
Hightlight Checkbox Cell
</td>
<td>Dummy Text</td>
</tr>
</tbody>
</table>
</center>

</BODY>
</HTML>

вот нашёл прямую ссылку на него, там же и просмотреть его можно

PS я хотел воспользоваца вторым примером

Это сообщение отредактировал(а) wolfmessing - 25.4.2008, 11:00

bars80080

Дата 25.4.2008, 12:26 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

вот смотри, это http://www.b2386828.msk.ru/js/0807/index.html явно не тот код который ты привёл http://www.b2386828.msk.ru/js/1207/1207-25.htm
второй заведомо на оперу не расчитан, а выдирать из первого мне лень

самое главное, что мне не понятно, так это почему тебя не устроил обычный css

Код


<style>
td { width: 150px; }
a { display: block; width: 100%; height: 100%; text-align: center; text-decoration: none; color: #660000; }
a:hover { background: #ffff00; color: #0000ff; }
</style>
<table>
<tr><td><a href="#">Изменить</a></td><td><a href="#">Удалить</td></tr>
<tr><td><a href="#">Изменить</a></td><td><a href="#">Удалить</td></tr>
<tr><td><a href="#">Изменить</a></td><td><a href="#">Удалить</td></tr>
</table>

Это сообщение отредактировал(а) bars80080 - 25.4.2008, 12:27

nadyui

Дата 25.4.2008, 15:49 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 51
Регистрация: 30.10.2005

Репутация: нет
Всего: нет

По-моему действительно обычный css удобнее. только он почему-то не во всех броузерах отображается :(

bars80080

Дата 25.4.2008, 16:02 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

этот пример везде работает, а вот в усложнённом варианте, это надо смотреть

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »