Курсы javascript
А как сделать чтобы переход на страницу page2.php осуществлялся только при клике на свободном месте ячейки?
19.04.2012, 12:20
Кандидат Javascript-наук
Регистрация: 16.02.2012
Сообщений: 109
$(document).on(‘click’, function(event)
тут обработчик ставится на весь документ, в функцию передается событие — event. Если в родителях $(event.target). есть элементы с классами .inp,.hrefer, то функция обрубается. Если же таких родителей нет, то идет выполнение дальше и после return-а дописывай что нужно — переход по ссылке и прочее
19.04.2012, 12:21
Кандидат Javascript-наук
Регистрация: 16.02.2012
Сообщений: 109
ой не помню closest Работает с двумя селекторами или нет, ну если че, сделаешь 2 условия )
19.04.2012, 16:19
Интересующийся
Регистрация: 05.05.2011
Сообщений: 15
Спасибо, разобрался. Очень помогли. Да, closest работает с двумя селекторами.
$(".m-action").on("click", function(event) < if($(event.target).closest("input, a").length) return; window.location.href='page2.php'; >);
Шпаргалка по работе с таблицами
Если на одной странице или на сайте присутствует несколько таблиц и для них требуется установить разное стилевое оформление, то для таких таблиц добавляется атрибут class или id с соответствующим значением, например:
Comedy Adventure Action Scary Movie Indiana Jones The Punisher Epic Movie Star Wars Bad Boys
Company Q1 Q2 Q3 Microsoft 20.3 30.5 23.5 Google 50.2 40.63 45.23
При этом class=»list» можно будет использовать для оформления других таблиц (элементов), а id=»company» — только для одной таблицы.
2. Как добавить ссылки в таблицу
Ячейки таблицы могут содержать практически любые элементы. Чтобы вставить ссылку в ячейку, нужно добавить в нее элемент с текстом ссылки, например:
Comedy Adventure Action Scary Movie Indiana Jones The Punisher Epic Movie Star Wars Bad Boys
Стилизовать такие ссылки можно при помощи определения table a <> , или же задав класс непосредственно для ссылки.
3. Как создать ссылки на ячейки таблицы
Ссылка на ячейку таблицы создается при помощи якоря. Для этого нужной ячейке добавляется атрибут id со значением, например:
.
Чтобы обеспечить переход со ссылки на эту ячейку, задаём ей соответствующее значение пути
Если переход осуществляется с одной страницы сайта на другую, якорь добавляется после адреса страницы, например:
Для наглядности результат перехода можно выделить, например, сменить цвет фона ячейки, цвет текста ячейки, добавить подчеркивание и т.д.
td:target td:target td:target
Пример
Таблица составлена на основе рейтинга зрителей. Перейдя по этой ссылке, вы узнаете какой фильм мой самый любимый.
| Фантастика | Комедия | Приключения |
|---|---|---|
| Марсианин | Самый лучший день | Миссия невыполнима: Племя изгоев |
| Мстители: Эра Альтрона | Пиксели | Агенты А.Н.К.Л. |
| Голодные игры: Сойка-пересмешница | Барашек Шон | Последние рыцари |
4. Одинаковая ширина колонок таблицы
По умолчанию ширина таблицы определяется содержимым ее ячеек. Управлять шириной столбцов (ячеек) можно следующими способами:
- Если для таблицы задана ширина, то table сделает все ячейки одинаковой ширины, исходя из ширины самой длинной ячейки.
- Если для таблицы задана ширина table , и ширина ячеек вычисляется в % , например, td , то ширина всех ячеек будет равной.
- Задав фиксированную ширину с помощью единиц длины, например, th .
При этом не забывайте, что к ширине таблицы будет добавлена ширина границы ячеек и таблицы и внутренние отступы ячеек padding (если не установлено свойство ).
5. Оформление заголовка таблицы
Управлять положением заголовка можно свойством caption-side , например, caption поместит заголовок после таблицы.
По сути заголовок является ячейкой таблицы, поэтому для него можно задавать те же свойства, что и для ячеек таблицы, т.е.
caption
6. Создание вложенных таблиц
Чтобы вложить одну таблицу в другую, нужно поместить код вложенной таблицы в выбранную ячейку основной таблицы, например:
ячейка заголовка таблицы ячейка заголовка таблицы ячейка таблицы ячейка заголовка вложенной таблицы ячейка вложенной таблицы
| ячейка заголовка вложенной таблицы |
|---|
| ячейка вложенной таблицы |
Вложенные таблицы могут содержать любое количество строк и ячеек. Для них можно устанавливать любые свойства, отличные от значений основной таблицы, размещать в ячейках изображения, а также другие таблицы.
HTML: Объединение ячеек внутри строк и столбцов
В таблицах часто нужно объединять строки или столбцы. Это помогает объединить различную информацию. Например, если в складской таблице нет товара, то нет смысла постоянно дублировать информацию — её можно объединить и написать, что товара нет на складе:
| Товар | Цена | Количество |
|---|---|---|
| Чай | Нет на складе | |
В HTML-разметке объединить ячейки в столбцах или строках можно с помощью специальных атрибутов colspan и rowspan . Их значениями является количество ячеек справа (для colspan ) или снизу (для rowspan ), которые нужно объединить с текущей. Отсчёт начинается с текущей ячейки, к которой применено свойство. Например, если стоит значение colspan=»2″ , то будет объединена текущая ячейка с соседней.
Разметка для примера выше без учёта объединения ячеек будет следующей:
Товар Цена Количество Чай Нет на складе
Для того чтобы объединить ячейки, нужно сделать два действия:
1. В тег ячейки, которую будем объединять, добавить атрибут colspan со значением, равным количеству объединяемых ячеек справа
2. Удалить лишние ячейки из строки
Товар Цена Количество Чай Нет на складе
Для объединения ячеек по вертикали используется атрибут rowspan . Алгоритм действий повторяет аналогичный при объединении по горизонтали. Единственное отличие — удалять ячейки нужно в соседних строках:
Сотрудник Зарплата Бонусы Менеджер Алексей Примадонин 750$ 63$ Кодовёнок Хекслетович Вениамин Редакторович 1200$ 0
В примере двое сотрудников взаимодействуют с одним менеджером. Можно указать его дважды, но нагляднее объединить ячейки по вертикали. Для этого был добавлен атрибут rowspan=»2″ , а во второй строке удалена четвёртая ячейка, так как её место займёт ячейка выше
| Сотрудник | Зарплата | Бонусы | Менеджер |
|---|---|---|---|
| Алексей Примадонин | 750$ | 63$ | Кодовёнок Хекслетович |
| Вениамин Редакторович | 1200$ | 0 |
Задание
Создайте таблицу, состоящую из двух строк и трёх столбцов. Во второй строке объедините первые две ячейки, используя атрибуты. Первая строка должна быть шапкой таблицы
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Таблицы
Как создать таблицу в HTML5 и указать её параметры через стили?
Как сделать, чтобы строка таблицы меняла цвет при наведении на нее курсора мыши?
Стиль элемента при наведении на него курсора мыши определяется с помощью псевдокласса :hover , он через двоеточие добавляется к нужному селектору. Для изменения стиля строки таблицы, hover следует добавить к селектору TR , и задав желаемый цвет фона через свойство background .
Как установить таблицу полупрозрачной, а часть ячеек нет?
Для изменения прозрачности элемента в CSS3 предусмотрено свойство opacity , его значение может меняться от 0 до 1. Ноль соответствует полной прозрачности элемента, а единица, наоборот, непрозрачности. Современные браузеры вполне корректно работают с этим свойством за исключением браузера Internet Explorer, поэтому для него приходится использовать специальное свойство filter со значением alpha(Opacity=X) , где X может меняться от 0 до 100.
Каким стилевым свойством заменить атрибут cellspacing тега ?
Атрибут cellspacing задает расстояние между ячейками таблицы, оно особенно заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне страницы. Сочетание атрибутов cellpadding , cellspacing и border с разными значениями позволяет получить разнообразные виды таблиц. Но хочется не повторять для каждой таблицы одни и те же значения, а управлять ими через стили.