powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подсветка ячеек, строк таблицы
25 сообщений из 44, страница 1 из 2
Подсветка ячеек, строк таблицы
    #35863914
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Начну с того что я совсем не силен в яваскрипт...
Есть таблица автоматически сформированная систмой(не я ее воял)... есть столбец с чекбоксами, так же в нескольких из столбцов в шапке таблицы есть чекбоксы. Как сделать через js обработчики событий для выделения-подсветка строки таблицы при установке чекбокса из первой калонки, а так же при выборе чекбоксов из шапки подсвечивались третим цветом ячейки, которые попали в пересечение строки и столбца(при выборе чекбоксов)...
подскажите пожалуйста хотя бы с небольшими объяснениями...
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35863958
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
kasik,

А что не получается-то?
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35863975
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ShSergekasik,

А что не получается-то?

Да впрочем то все... не знаю с чего начать написание процедуры onclick.
Как определить нужную строчку, в первом случаи, и нужную ячейку(пересечение строки и столбца) во втором...
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35864127
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
function highlight_row(checkBoxElemement)
{
if(checkBoxElemement.checked==true)
{
for( var i =  0 ; i < checkBoxElemement.parentNode.parentNode.childNodes.length; i++ )
  {
  if (checkBoxElemement.parentNode.parentNode.childNodes[i].tagName=='TD')
    {
checkBoxElemement.parentNode.parentNode.childNodes[i].style.backgroundColor = '#cae0f1';
    }
  }
}
 else {
for( var i =  0 ; i < checkBoxElemement.parentNode.parentNode.childNodes.length; i++ ) {
  if (checkBoxElemement.parentNode.parentNode.childNodes[i].tagName=='TD') {
     checkBoxElemement.parentNode.parentNode.childNodes[i].style.backgroundColor =  '';
   }
  }
}
onclick="highlight_row(this);"
не работает////
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35864213
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Код: plaintext
1.
alert(checkBoxElemement.parentNode.parentNode.tagName)
Что говорит?
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35864222
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ShSerge
Код: plaintext
1.
alert(checkBoxElemement.parentNode.parentNode.tagName)
Что говорит?
TR
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35866372
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ShSerge
Код: plaintext
1.
alert(checkBoxElemement.parentNode.parentNode.tagName)
Что говорит?
Для чего вы спрашивали?
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35866439
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
kasikДля чего вы спрашивали?
Думал смогу помочь. Поскольку в коде всё нормально - не смогу. Похоже, дело здесь не в этом куске. Судить тяжело, потому что структура вашего документа неизвестна.
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35866503
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Что интересует конкретно? Кроме таблицы описанной в первом посте ничего нет. может как нибудь порассуждаем вместе. Какие вообще идеи и мысли по моей теме есть?
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35866541
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
kasik,
Этот цикл не нужен.
Код: plaintext
1.
for( var i =  0 ; i < checkBoxElemement.parentNode.parentNode.childNodes.length; i++ )
Чтобы подкрасить строчку достаточно
Код: plaintext
1.
checkBoxElemement.parentNode.parentNode.style.backgroundColor = '#cae0f1';
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35866619
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Убрал цикл...
Код: plaintext
1.
2.
3.
4.
5.
function highlight_row(checkBoxElemement)
{
 alert(checkBoxElemement.parentNode.parentNode.style.backgroundColor);
checkBoxElemement.parentNode.parentNode.style.backgroundColor = 'red';
 alert(checkBoxElemement.parentNode.parentNode.style.backgroundColor);
}
Первый алерт выводит почему то пусто или так и должно?
На второй выводит, но изменений никаких нет!
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35866630
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Подумалось, может стиль менять не у таблицы, а у чекбокса?
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35866633
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
kasikПервый алерт выводит почему то пусто или так и должно?
Ага.
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35866716
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
ShSergekasikПервый алерт выводит почему то пусто или так и должно?
Ага.
И из за чего может быть такое!?
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35866726
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Что-то а-ля:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
<html>
	<head>
		<title>Test Table with CheckBox</title>
		<style type="text/css">
..RowHighlight
{
	background-color: aqua;
}

..ColHighlight
{
	background-color: yellow;
}

..CellHighlight
{
	background-color: red;
}

		</style>
		<script type="text/javascript">
<!--
function HLR(obj)
{
	var
		row;

	if(!(row=FindParent(obj,"TR")))
		return;

	row.className = obj.checked ? "RowHighlight" : "";
}

function HLC(obj)
{
	var
		oTableBody;

	if(!(oTableBody=document.getElementById("TableBody")))
		return;

	for(var i= 0 ; i<oTableBody.rows.length; ++i)
		if(obj.checked)
		{
			oTableBody.rows[i].cells[ 1 ].className = oTableBody.rows[i].className!="" ? "CellHighlight" : "ColHighlight";
		}
		else
			oTableBody.rows[i].cells[ 1 ].className="";
}

function FindParent(obj,NodeName)
{
	var
		_Parent_=null,
		tmpObj=obj;

	NodeName=NodeName.toLowerCase();

	do
	{
		if(tmpObj.nodeType== 1  && tmpObj.nodeName.toLowerCase()==NodeName)
		{
			_Parent_=tmpObj;
			break;
		}
	}while(tmpObj=tmpObj.parentNode);

	return(_Parent_);
}
//-->
		</script>
	</head>
	<body>
		<table border="1">
			<thead>
				<tr>
					<th> 1 </th>
					<th> 2  <input type="checkbox" id="InputCheckBoxC" onclick="HLC(this)"></th>
					<th> 3 </th>
				</tr>
			</thead>
			<tbody id="TableBody">
				<tr>
					<td> 1 </td>
					<td> 2 </td>
					<td> 3  <input type="checkbox" id="InputCheckBoxR1" onclick="HLR(this)"></td>
				</tr>
				<tr>
					<td> 1 </td>
					<td> 2 </td>
					<td> 3  <input type="checkbox" id="InputCheckBoxR2" onclick="HLR(this)"></td>
				</tr>
				<tr>
					<td> 1 </td>
					<td> 2 </td>
					<td> 3  <input type="checkbox" id="InputCheckBoxR3" onclick="HLR(this)"></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
???
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35866807
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Подправил function HLR()
src
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
<html>
	<head>
		<title>Test Table with CheckBox</title>
		<style type="text/css">
.RowHighlight
{
	background-color: aqua;
}

.ColHighlight
{
	background-color: yellow;
}

.CellHighlight
{
	background-color: red;
}

		</style>
		<script type="text/javascript">
<!--
function HLR(obj)
{
	var
		row;

	if(!(row=FindParent(obj,"TR")))
		return;

	if(obj.checked)
	{
		row.className="RowHighlight";
		row.cells[ 1 ].className = row.cells[ 1 ].className=="ColHighlight" ? "CellHighlight" : "";
	}
	else
	{
		row.className="";
		row.cells[ 1 ].className = row.cells[ 1 ].className=="CellHighlight" ? "ColHighlight" : "";
	}
}

function HLC(obj)
{
	var
		oTableBody;

	if(!(oTableBody=document.getElementById("TableBody")))
		return;

	for(var i= 0 ; i<oTableBody.rows.length; ++i)
		if(obj.checked)
		{
			oTableBody.rows[i].cells[ 1 ].className = oTableBody.rows[i].className!="" ? "CellHighlight" : "ColHighlight";
		}
		else
			oTableBody.rows[i].cells[ 1 ].className="";
}

function FindParent(obj,NodeName)
{
	var
		_Parent_=null,
		tmpObj=obj;

	NodeName=NodeName.toLowerCase();

	do
	{
		if(tmpObj.nodeType== 1  && tmpObj.nodeName.toLowerCase()==NodeName)
		{
			_Parent_=tmpObj;
			break;
		}
	}while(tmpObj=tmpObj.parentNode);

	return(_Parent_);
}
//-->
		</script>
	</head>
	<body>
		<table border="1">
			<thead>
				<tr>
					<th> 1 </th>
					<th> 2  <input type="checkbox" id="InputCheckBoxC" onclick="HLC(this)"></th>
					<th> 3 </th>
				</tr>
			</thead>
			<tbody id="TableBody">
				<tr>
					<td> 1 </td>
					<td> 2 </td>
					<td> 3  <input type="checkbox" id="InputCheckBoxR1" onclick="HLR(this)"></td>
				</tr>
				<tr>
					<td> 1 </td>
					<td> 2 </td>
					<td> 3  <input type="checkbox" id="InputCheckBoxR2" onclick="HLR(this)"></td>
				</tr>
				<tr>
					<td> 1 </td>
					<td> 2 </td>
					<td> 3  <input type="checkbox" id="InputCheckBoxR3" onclick="HLR(this)"></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

_________________
"Helo, word!" - 17 errors 56 warnings
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35866869
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ex_Soft
Что-то а-ля:


Модератор:
Огромная цитата удалена.

Ну и чего ради Вы цитировали кусок кода аж на три экрана? У Вас свыше пятисот постов, пора бы уже заметить кнопку "Ответить" рядом с "Цитировать".


Спасибо большое отдельно все работает! но у меня страница формируется системой, а я могу производить тока изменения касающиеся обработке событий и тд и тп. дак вот данный код не работае.
Может это из за того что объявлена таблица стилей?
вида:
Код: plaintext
<link rel="stylesheet" href="/i/themes/theme_15/theme_3_1.css" type="text/css" />
Можно ли это обойти?
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35866946
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Во-первых: не занимайтесь оверквотингом
Во-вторых: если имеете доступ к
kasik
таблица стилей
....
<link rel="stylesheet" href="/i/themes/theme_15/theme_3_1.css" type="text/css" />

- перенесите классы туда. Ну... Или переделайте, как Вы уже пробовали, на style.backgroundColor
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35867794
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ex_Soft
Во-первых: не занимайтесь оверквотингом
Во-вторых: если имеете доступ к
kasik
таблица стилей
....
<link rel="stylesheet" href="/i/themes/theme_15/theme_3_1.css" type="text/css" />

- перенесите классы туда. Ну... Или переделайте, как Вы уже пробовали, на style.backgroundColor
_________________
"Helo, word!" - 17 errors 56 warnings

За оверквотинг извиняюсь...
вообщем переделал на style.backgroundColor:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
function HLR(obj)
{
	var
		row;

	if(!(row=FindParent(obj,"TR")))
		return;

	if(obj.checked)
	{
row.style.backgroundColor = "aqua";
row.cells[ 1 ].style.backgroundColor = row.cells[ 1 ].style.backgroundColor=="yellow"?"red":"";
	}
	else
	{
row.style.backgroundColor="";
row.cells[ 1 ].style.backgroundColor = row.cells[ 1 ].style.backgroundColor== "red"?"yellow":"";
	}
}


function HLC(obj)
{
	var
		oTableBody;

	if(!(oTableBody=document.getElementById("TableBody")))
		return;

	for(var i= 0 ; i<oTableBody.rows.length; ++i)
		if(obj.checked)
		{
          oTableBody.rows[i].cells[ 1 ].style.backgroundColor = oTableBody.rows[i].style.backgroundColor == "aqua"?"red":"yellow";
		}
		else
          oTableBody.rows[i].cells[ 1 ].style.backgroundColor = "";
}

Опять же отдельно этот код работает но в моей странице не хочет, видимо перекрывают какие-то родительские стили, так как вообще никакой на это реакции нет!
как можно немного "подвинуть" родительские стили?
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35867993
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Кажеться понял проблему, и ваша логикафункций немного не подходит на сколько я понял суть функций... так как у меня есть еще обработчики событий onmouseover и onmouseout:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
<script type="text/javascript">
        <!--
            var rowStyle      = new Array( 10 );
            var rowActive     = new Array( 10 );
            var rowStyleHover = new Array( 10 );
            

            rowStyle[ 1 ]='';
            rowStyleHover[ 1 ]='';
            rowActive[ 1 ]='N';
            rowStyle[ 2 ]='';
            rowStyleHover[ 2 ]='';
            rowActive[ 2 ]='N';
            rowStyle[ 3 ]='';
            rowStyleHover[ 3 ]='';
            rowActive[ 3 ]='N';
            rowStyle[ 4 ]='';
            rowStyleHover[ 4 ]='';
            rowActive[ 4 ]='N';
            rowStyle[ 5 ]='';
            rowStyleHover[ 5 ]='';
            rowActive[ 5 ]='N';
            rowStyle[ 6 ]='';
            rowStyleHover[ 6 ]='';
            rowActive[ 6 ]='N';
            rowStyle[ 7 ]='';
            rowStyleHover[ 7 ]='';
            rowActive[ 7 ]='N';

            function row_mouse_over2436404926590642(rowNode,currentRowNum) {
                rowActive = 'Y';
                for( var i =  0 ; i < rowNode.childNodes.length; i++ ) {
                    if (rowNode.childNodes[i].tagName=='TD') {
                        rowStyleHover[currentRowNum] = rowNode.childNodes[i].style.backgroundColor;
                        rowNode.childNodes[i].style.backgroundColor = '#cfe0f1';
                    }
                }

            }
            function row_mouse_out2436404926590642(rowNode,currentRowNum) {
                rowActive = 'N';
                for( var i =  0 ; i < rowNode.childNodes.length; i++ ) {
                    if (rowNode.childNodes[i].tagName=='TD') {
                        rowNode.childNodes[i].style.backgroundColor = rowStyleHover[currentRowNum];
                    }
                }

            }
        // -->
        </script>
Я правильно понял неполадку? и можно ли привести к рабочести моей задачи?
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35870740
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
в Вашем примере используется
Код: plaintext
<tbody id="TableBody">
у меня таблица формируется автоматически и без возможности вставки данного параметра... как можно изменить функцию HLC для роботоспособности в моем случаи?
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35870786
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Код: plaintext
1.
....document.getElementById("TableId").getElementsByTagName("tbody")[ 0 ]...
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35870873
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ex_Soft,
Спасибо помогло...
но Вы везде пишете ...oTableBody.rows[i].cells[1]....
Поэтому всегда выделяется тока второй столбец(начиная с 0 то первый)... как мне определить нужный столбец?
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35871099
Фотография Ex_Soft
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
cellIndex
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
Подсветка ячеек, строк таблицы
    #35872002
kasik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ex_Soft,
Там в примере у каждой строчки идентификатор задан! а у меня нет.
...
Рейтинг: 0 / 0
25 сообщений из 44, страница 1 из 2
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подсветка ячеек, строк таблицы
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]