JQuery и click
Начал изучать эту либу
не пойму как сделать действие чтобы при кликании на ячейку таблицы менялся цвет и обратно вернее как обратно не пойму вот мы запускаем прцесс смены класса при нажатии $(".table tr").click(function() {$(this).addClass("over");}); а дальше как? |
Две функции напиши отдельно по смене класса и внутри click() по очереди используй.
|
Подобное.
Столкнулся с подобной проблемой. Правильно я понл?
$(".table tr").click( function() { $(this).addClass("over"); }, function() { $(this).addClass("out"); }); |
Гость, какая именно задача у вас? Чтобы этот <tr> "мигал" при нажатии на клавишу, или чтобы при первом клике становился один цвет фона, при повторном клике - другой?
|
мне лично нужно чтобы можно было сначало выделять строки, а патом снимать выделение
|
поднимаю эту тему снова )
столкнулся со следующей проблемой если "строка" состоит из двух подстрок типо <tr> <td rowspan=2></td> <td></td> </tr> <tr> <td></td> </tr> как объединять такой блок чтобы при наведении мышкой у двух строк сразу менялся цвет? |
в онклике выставьте смену не только для текущей строки, но и для следующей. или предыдущей, в зависимости от того, какая из двух строк была щелкнута.
а объеденить именно никак нельзя. только навешивание двух обработчиков с указанием каких именно строк надо стиль менять |
у меня только идея ввести класс для 2х строк
типо <tr class='tr1'> <td rowspan=2></td> <td></td> </tr> <tr class='tr1'> <td></td> </tr> но ума не приложу как написать код для проверки события иза малого знания js не подскажете? |
$('.tr1').click(
function() {
$('.tr1').меняем_стиль();
});
по моему как-то так. и к тому же в данном случае не знания js а знания jQuery вас подводят. да и меня тоже. посмотрите маны по jQuery |
И этот человек тычет каждому второму про bb-теги.
|
Да.я
и я приношу извинения Кстати кажется тот код, что янаписал правильно должен писатся как-то так
$('.tr1').click(
function() {
$('.tr1').each(
function(i,n){
$(n).меняем_стиль()
});
});
|
хм такой код меняет стразу во всех строках стили
а как только у одной строки? |
заменить
$('.tr1').each(
function(i,n){
$(n).меняем_стиль()
на
$("элемент_который_меняем").меняем_стиль()
|
дык у меня не один блок строк
те <tr class='tr1'> <td rowspan=2></td> <td></td> </tr> <tr class='tr1'> <td></td> </tr> .... <tr class='tr1'> <td rowspan=2></td> <td></td> </tr> <tr class='tr1'> <td></td> </tr> .... <tr class='tr1'> <td rowspan=2></td> <td></td> </tr> <tr class='tr1'> <td></td> </tr> "элемент_который_меняем" это на 1 блок сработает а если таблица длинная то чета я в тупик засел ( |
Блин, у меня ломается мозг от вашего описания задачи.
Вам надо так? если пользователь щелкнул на первую или вторую строчку, то первая И вторая подсвечиваются есди клдикнул на третью или четвертую, то третья И четвертая подсвечивается. Если я правильно опичсал что вам надо, то мое первое исправленное решение вам должно подойти. ТОЛЬКО только вам надо для каждой такой группы чтрок свой класс сделать ПО примеру tr1 tr2 tr3 tr4 И для каждого такого блока вызвать то, что я писал Если я вас неправильно понял, опишите в похожем формате, что вам надо |
Как-то так
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table {
border-spacing: 0;
border-collapse: collapse;
}
table, td, th {
border: 1px solid #ccc;
}
tr.selected {
background: #ffc;
}
</style>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
$(function() {
var rows = $('table').click(function(e) {
var node = $(e.target);
if(node.is('td')) {
rows.removeClass('selected');
node = node.parent().addClass('selected');
if(node.children().attr('rowspan') == 2) node.next().addClass('selected');
else if(node.prev().children().attr('rowspan') == 2) node.prev().addClass('selected');
}
}).find('tbody tr');
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td rowspan="2">Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td rowspan="2">Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
<tr>
<td>Ячейка</td>
<td>Ячейка</td>
<td>Ячейка</td>
</tr>
</tbody>
</table>
</body>
</html>
работает только для rowspan == 2 |
спасибо большое )
но я заметил одну весч этот метод не универсален а зависит от rowspan буду пробовать сделать универсальнее |
У меня тоже вопрос по теме мне нужно при щелчке по нужной ячейке вставить в нее инпут а в него то значение что было в этой ячейке.
Просто со вставкой в нужную ячейку инпута все вроде просто а вот с вставкой в инпут нужного значения или даже просто с правильным получением значения проблемы:
$('table td').click(function(){
var str = $(this).text();
$("#value input").val('str');
$(this).append('<input name="date" type="text">').val('str');
});
в ячейку рядом с значением вставляет просто инпут а если поэкспереметировать то получает тока название переменной str но в инпут который в ячейке и его не вставляет вставляет в другой какой нибудь инпут за пределами таблички. |
дык.. а нельзя ли просто использовать toggleClass
http://docs.jquery.com/Attributes/toggleClass#class вроде гораздо проще будет ) |
А как можно внести значение ячейки в инпут с помощью toggleClass насколько я понимаю это чтото типа addClass? Я примеров с toggleClass похожих на то что мне нужно не нашол.
|
Цитата:
toggleClass("over");}); а еще лучьше,кажеться _ switchClass ('over','OVER'). А для точности проверь этот самый switchClass на Офсайте Квери или на русскоязычных , мне нравитося этот http://slyweb.ru/jquerydoc/switchCla...d-duration.php Скопированный оттуда пример $(".newClass").switchClass('newClass', 'anotherNewClass', 1000); 1000- не знаю что это такое_ анимация наверное ,даже. |
$('.tr1').hover(
function() {
$('.tr1').addClass('hover');
},function() {
$('.tr1').removeClass('hover');
});
в css пиши
.hover{background-color: цвет при наведении }
Можно конечно задействовать метод .css, но при этом представление поведения элементов придется содержать в js коде. Upd Пардон, только заметил, что страниц обсуждения больше чем одна, поэтому, возможно, решение было выше. |
Вопрос
Есть ячейка с изначальным значением 0, хочу сделать так что бы при клике на нее ноль пропадал и было пустое поле для ввода цифр. не могу никак, совсем не опытный:) помогите... |
Смотри метод .html()
|
Цитата:
|
Цитата:
$('#td1').bind('click',function(){
$(this).html('<input type="text" value="'+$(this).text()+'"/>');
$($(this).children().get(0)).focus().blur(function(){
if ($(this).val()){
$(this).parent().html($(this).val());
}
else {
$(this).parent().html(' ');
};
});
});
|
Цитата:
|
| Часовой пояс GMT +3, время: 16:31. |