Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подсветка ячеек, строк таблицы / 25 сообщений из 44, страница 1 из 2
  1  все
12.03.2009, 10:18
    #35863914
kasik
kasik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подсветка ячеек, строк таблицы
Начну с того что я совсем не силен в яваскрипт...
Есть таблица автоматически сформированная систмой(не я ее воял)... есть столбец с чекбоксами, так же в нескольких из столбцов в шапке таблицы есть чекбоксы. Как сделать через js обработчики событий для выделения-подсветка строки таблицы при установке чекбокса из первой калонки, а так же при выборе чекбоксов из шапки подсвечивались третим цветом ячейки, которые попали в пересечение строки и столбца(при выборе чекбоксов)...
подскажите пожалуйста хотя бы с небольшими объяснениями...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.03.2009, 10:34
    #35863958
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подсветка ячеек, строк таблицы
kasik,

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

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

Да впрочем то все... не знаю с чего начать написание процедуры onclick.
Как определить нужную строчку, в первом случаи, и нужную ячейку(пересечение строки и столбца) во втором...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.03.2009, 11:26
    #35864127
kasik
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
| Ответить | Цитировать | Написать  
12.03.2009, 11:47
    #35864213
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подсветка ячеек, строк таблицы
Код: plaintext
1.
alert(checkBoxElemement.parentNode.parentNode.tagName)
Что говорит?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
12.03.2009, 11:49
    #35864222
kasik
kasik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подсветка ячеек, строк таблицы
ShSerge
Код: plaintext
1.
alert(checkBoxElemement.parentNode.parentNode.tagName)
Что говорит?
TR
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2009, 08:24
    #35866372
kasik
kasik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подсветка ячеек, строк таблицы
ShSerge
Код: plaintext
1.
alert(checkBoxElemement.parentNode.parentNode.tagName)
Что говорит?
Для чего вы спрашивали?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2009, 09:16
    #35866439
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подсветка ячеек, строк таблицы
kasikДля чего вы спрашивали?
Думал смогу помочь. Поскольку в коде всё нормально - не смогу. Похоже, дело здесь не в этом куске. Судить тяжело, потому что структура вашего документа неизвестна.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2009, 09:54
    #35866503
kasik
kasik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подсветка ячеек, строк таблицы
Что интересует конкретно? Кроме таблицы описанной в первом посте ничего нет. может как нибудь порассуждаем вместе. Какие вообще идеи и мысли по моей теме есть?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2009, 10:04
    #35866541
ShSerge
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
| Ответить | Цитировать | Написать  
13.03.2009, 10:25
    #35866619
kasik
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
| Ответить | Цитировать | Написать  
13.03.2009, 10:27
    #35866630
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подсветка ячеек, строк таблицы
Подумалось, может стиль менять не у таблицы, а у чекбокса?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2009, 10:27
    #35866633
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подсветка ячеек, строк таблицы
kasikПервый алерт выводит почему то пусто или так и должно?
Ага.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2009, 10:48
    #35866716
kasik
kasik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подсветка ячеек, строк таблицы
ShSergekasikПервый алерт выводит почему то пусто или так и должно?
Ага.
И из за чего может быть такое!?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2009, 10:52
    #35866726
Ex_Soft
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
| Ответить | Цитировать | Написать  
13.03.2009, 11:08
    #35866807
Ex_Soft
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
| Ответить | Цитировать | Написать  
13.03.2009, 11:22
    #35866869
kasik
kasik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подсветка ячеек, строк таблицы
Ex_Soft
Что-то а-ля:


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

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


Спасибо большое отдельно все работает! но у меня страница формируется системой, а я могу производить тока изменения касающиеся обработке событий и тд и тп. дак вот данный код не работае.
Может это из за того что объявлена таблица стилей?
вида:
Код: plaintext
<link rel="stylesheet" href="/i/themes/theme_15/theme_3_1.css" type="text/css" />
Можно ли это обойти?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.03.2009, 11:34
    #35866946
Ex_Soft
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
| Ответить | Цитировать | Написать  
13.03.2009, 15:19
    #35867794
kasik
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
| Ответить | Цитировать | Написать  
13.03.2009, 16:13
    #35867993
kasik
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
| Ответить | Цитировать | Написать  
16.03.2009, 10:36
    #35870740
kasik
kasik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подсветка ячеек, строк таблицы
в Вашем примере используется
Код: plaintext
<tbody id="TableBody">
у меня таблица формируется автоматически и без возможности вставки данного параметра... как можно изменить функцию HLC для роботоспособности в моем случаи?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.03.2009, 10:49
    #35870786
Ex_Soft
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
| Ответить | Цитировать | Написать  
16.03.2009, 11:16
    #35870873
kasik
kasik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подсветка ячеек, строк таблицы
Ex_Soft,
Спасибо помогло...
но Вы везде пишете ...oTableBody.rows[i].cells[1]....
Поэтому всегда выделяется тока второй столбец(начиная с 0 то первый)... как мне определить нужный столбец?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.03.2009, 12:13
    #35871099
Ex_Soft
Ex_Soft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подсветка ячеек, строк таблицы
cellIndex
_________________
"Helo, word!" - 17 errors 56 warnings
Posted via ActualForum NNTP Server 1.4
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.03.2009, 16:22
    #35872002
kasik
kasik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подсветка ячеек, строк таблицы
Ex_Soft,
Там в примере у каждой строчки идентификатор задан! а у меня нет.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подсветка ячеек, строк таблицы / 25 сообщений из 44, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 506ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1455060]:
 0ms
get settings:
 8ms
get forum list:
 17ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 163ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 75ms
get tp. blocked users:
 2ms
others: 221ms
total:  506ms
x
x
Закрыть


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