Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Щелчок на строке таблицы / 10 сообщений из 10, страница 1 из 1
18.12.2016, 22:04
    #39369705
neznajka
neznajka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Щелчок на строке таблицы
Имеется таблица с 2-колонками: колонка с кодом цвета и колонка с соответствующей коду цифрой. Нужно при щелчке на произвольной строке выдать "на гора" цвет фона ячейки из 1-й колонки, а в идеале - ещё и соответствующую цифру из-2-й колонки.
Методом тыка обнаружил, что мне почти идеально подходит слово this в коде обработки щелчка - поскольку именно это слово возвращает ссылку именно на строку таблицы (прочие ссылки - на ячейки, текст в них, и т.п. - не подходят, поскольку попадание в них мышкой зависит от случая). И вот дальше - полный затык: никак не получается увязать щёлкнутую строку с цветом её 1-й ячейки или с цифрой её 2-й ячейки. Всё время выдаётся undefined, хоть тресни :( Пробовал по-всякому - и через css, и через attrib, и даже через prop - результат один :(
Короче - вот такой код таблицы:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<table cols="2" cellpadding="3" cellspacing="1">
	<tr id="tr0"><td colspan="2"><img src="IMG/Ukaz1.png" width="10%"></td></tr>
	<tr id="tr1" class="tr_nominal"><td class="td1" bgcolor="#000000"><font color="#ffffff">Черный</font></td><td class="td2">0</td></tr>
	<tr id="tr2" class="tr_nominal"><td class="td1" bgcolor="#C04F00"><font color="#ffffff">Коричневый</font></td><td class="td2">1</td></tr>
	<tr id="tr3" class="tr_nominal"><td class="td1" bgcolor="#FF0000"><font color="#ffffff">Красный</font></td><td class="td2">2</td></tr>
	<tr id="tr4" class="tr_nominal"><td class="td1" bgcolor="#FE9900"><font color="#000000">Оранжевый</font></td><td class="td2">3</td></tr>
	<tr id="tr5" class="tr_nominal"><td class="td1" bgcolor="#FFFF00"><font color="#000000">Желтый</font></td><td class="td2">4</td></tr>
	<tr id="tr6" class="tr_nominal"><td class="td1" bgcolor="#00D400"><font color="#000000">Зеленый</font></td><td class="td2">5</td></tr>
	<tr id="tr7" class="tr_nominal"><td class="td1" bgcolor="#0000FF"><font color="#FFFFFF">Синий</font></td><td class="td2">6</td></tr>
	<tr id="tr8" class="tr_nominal"><td class="td1" bgcolor="#A608D9"><font color="#FFFFFF">Фиолетовый</font></td><td class="td2">7</td></tr>
	<tr id="tr9" class="tr_nominal"><td class="td1" bgcolor="#8C9497"><font color="#FFFFFF">Серый</font></td><td class="td2">8</td></tr>
	<tr id="tr10" class="tr_nominal"><td class="td1" bgcolor="#FFFFFF"><font color="#000000">Белый</font></td><td class="td2">9</td></tr>
	<tr id="tr11" class="tr_nominal"><td class="td1" bgcolor="#CCC5C2"><font color="#000000">Серебристый</font></td><td class="td2">-1</td></tr>
	<tr id="tr12" class="tr_nominal"><td class="td1" bgcolor="#CC940C"><font color="#FFFFFF">Золотистый</font></td><td class="td2">-2</td></tr>
</table>


И вот такие варианты моих JQ-извращений:
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
$('.tr_nominal').on('click',function(e)
						{e.preventDefault();
						 alert('Щёлкнут элемент с '+$('this .td1').attr('bgcolor'));
						 console.log($('this .td1').css('background-color'));
						 $('#nominal').hide(300); // Это содержащий таблицу DIV, работает нормально
						 return false;
						}
			  );



Хотелось бы, чтоб в лог (или в алерт) выдался хотя бы фоновый цвет ячейки, не говоря уже о цифре 2-й ячейки,
Никак не выходит :(
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.12.2016, 22:47
    #39369723
Изопропил
Изопропил
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Щелчок на строке таблицы
neznajka,

для начала не
Код: sql
1.
$('this .td1')


а
Код: sql
1.
$('.td1',this)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.12.2016, 17:00
    #39370406
neznajka
neznajka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Щелчок на строке таблицы
Изопропил, спасибо - я о таком синтаксисе обращения не знал. Да и не встретил ничего подобного в Гугле. Может, плохо смотрел? Ну, да ладно - всё равно спасибо :)
У меня сбоил Интернет, поэтому и мало что удалось нагуглить, да потому и не смог сразу похвастаться - я решил проблему с помощью другого синтаксиса:
Код: javascript
1.
2.
vvv=$(this).children().eq(0).css('background-color');// обращение к фону 1-й ячейки
bbb=$(this).children().eq(1).text();// обращение к тексту 2-й ячейки


И вообще - уже на текущей стадии моего изучения JS/JQ обращает на себя внимание огромная разница между человеко-понятными командами или ключевыми словами (this, children, next, и т.п.) и сокращённо-односложными (eq, lt, и т.п.): такое впечатление, что команда разработчиков JS/JQ состоит из 2-х разных групп, обладающих очень различающимся словарным запасом :)
Если по человеко-понятным словам можно хоть как-нибудь догадаться и подобрать синтаксис (особенно, если обстоятельства вынуждают, а Тырнет дико тормозит), то с односложными междометиями типа eq() - никакие догадки не помогут, их надо просто зазубривать... :(
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.12.2016, 17:20
    #39370426
Изопропил
Изопропил
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Щелчок на строке таблицы
neznajka,

лучше так -
Код: sql
1.
2.
3.
$('table').on('click','tr',function(e){
console.log( $('.td1',this).css('background-color'), $('.td2',this).text());
});


обработчик вешается на таблицу(селектор естественно заменить на настоящий) , а не на каждую строку - при добавлении строк проблем не будет,
ну и без зависимости от количества столбцов и их порядка
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.12.2016, 17:23
    #39370429
Изопропил
Изопропил
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Щелчок на строке таблицы
neznajkathis
это не из jquery, это из javascript
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.12.2016, 18:16
    #39370473
neznajka
neznajka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Щелчок на строке таблицы
Да, Изопропил, спасибо - это и вправду удобней. Особенно при возможном масштабировании/усложнении структуры таблицы.
А насчёт 'this' - такое везде есть. И не только в JS. Но и в JQ, как видим, тоже. Иначе мой код
$(this).children()... не работал бы :)
Я, собственно, насчёт this догадался только по аналогии с VisualFoxPro - лишнего опыта не бывает, оказывается :)
Просто я по началу ошибочно применил кавычки вокруг this - но только потому, что в JQ-селекторах они применяются повсеместно до фанатизма. А тут, в случае с this - оказалось исключение, и кавычки как раз оказались не нужны. В общем, как в монологе одного знаменитого юмориста: "Здесь - мы играем, здесь - не играем, а вот здесь - мы рыбу заворачивали..." :)
YouTube Video
YouTube Video
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.12.2016, 18:20
    #39370479
Изопропил
Изопропил
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Щелчок на строке таблицы
neznajka,

c this всё-таки разберитесь сразу, иначе ждёт масса сюрпризов
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.12.2016, 18:31
    #39370495
neznajka
neznajka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Щелчок на строке таблицы
Изопропил, не то слово! Я уже получил несколько раз этими граблями... :)
Мне очень помогает вот этот материал . Правда, тот сайт не всегда бывает доступен.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.12.2016, 18:42
    #39370521
Изопропил
Изопропил
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Щелчок на строке таблицы
neznajka,

"JavaScript. Подробное руководство" Дэвид Флэнаган (6-е издание)

можно спокойно изучать javascript и с плохим коннектом
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.12.2016, 18:54
    #39370540
neznajka
neznajka
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Щелчок на строке таблицы
Изопропил, да, эта книга у меня есть в 3-х форматах - очень помогает. И стиль изложения куда лучше, чем, например, у "JQuery для профессионалов" Фримена.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Щелчок на строке таблицы / 10 сообщений из 10, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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