Показать / скрыть строки таблицы, используя классы Javascript
У меня есть таблица, которая расширяет и сворачивает, но она становится слишком запутанной, чтобы использовать ее, а IE и Firefox не работают должным образом. Итак, вот код JavaScript:
function toggle_it(itemID) < // Toggle visibility between none and '' if ((document.getElementById(itemID).style.display == 'none')) < document.getElementById(itemID).style.display = '' event.preventDefault() >else < document.getElementById(itemID).style.display = 'none'; event.preventDefault() >> Product Price Destination Updated on Oranges 100 + On Store 22/10 Apples 100 + On Store 22/10
Проблема в том, что я использую один ID для каждого и очень раздражающий, потому что я хочу иметь много скрытых строк для каждого родителя и большого количества родителей, поэтому для обработки будет слишком много идентификаторов. И IE и FireFox показывают только первую скрытую строку, а не другие. Я подозреваю, что это происходит, потому что я сделал это, запуская все идентификаторы вместе. Я думаю, было бы лучше, если бы я использовал классы вместо идентификаторов, чтобы индексировать скрытые строки. Я действительно новичок в этом, поэтому, пожалуйста, попробуйте объяснить это любым способом. Также я пробовал jQuery, но не смог его получить.
6 ответов
В этом формате вы привязываете обработчик событий к событию click ссылок с классом toggler . В моем коде я добавляю атрибут data-prod-cat к ссылкам toggler , чтобы указать, какие строки продуктов они должны контролировать. (Причина моего использования атрибута data-* объясняется здесь. Для получения дополнительной информации вы можете использовать атрибуты данных «html5» Google.) В обработчике событий я делаю следующее:
$('.cat'+$(this).attr('data-prod-cat')).toggle(); С помощью этого кода я на самом деле пытаюсь создать селектор типа $(‘.cat1’) , чтобы я мог выбирать строки для определенной категории продуктов и изменять их видимость. Я использую $(this).attr(‘data-prod-cat’) для доступа к атрибуту data-prod-cat ссылки, которую пользователь нажимает. Я использую функцию jQuery toggle, поэтому мне не нужно писать такую логику, как if visible, then hide element, else make it visible , как в вашем JS-коде. jQuery занимается этим. Функция переключения делает то, что она говорит, и toggle видимость указанного элемента (ов). Надеюсь, это было достаточно объяснительным.
Чувак, спасибо тебе большое! Это было именно то, что я искал! Работало отлично даже в других браузерах. Я знаю, что это действительно просто, но я ничего не знаю о JavaScript, только немного HTML. Причина, по которой я «составил» эту таблицу-пример, заключается в том, что этот код предназначен для веб-сайта моей компании (который я делаю), и не было необходимости использовать фактическую таблицу (с большим количеством CSS и прочего), так как сомнение было только в этот механизм. Еще раз спасибо!
Как скрыть/показать строку таблицы
Скрыть (показать) ячейку таблицы
Здравствуйте! Уже второй вечер не могу решить простую задачу: Нужно при определенном условии.
Как скрыть строку таблицы на 2 минуты
Как скрыть строку таблицы на 2 минуты в HTML
Как скрыть/показать 2 блока из инпута
Доброго времени суток уважаемые гуру)) Задача вот в чем есть такой код <!—ко всем атрибутам.
Как скрыть\показать часть блока
Для новостного сайта, на шаблон просмотра кратких новостей в категориях и на главной вместо.
table> tbody id="must_delete"> tr>td>DELETE. /td>/tr> /tbody> /table>
button onclick="document.getElementById('must_delete').style.display='none'">hiden/button> button onclick="document.getElementById('must_delete').style.display=''">show/button> table border=1> tr id="must_delete">td colspan=2>Строка должна исчезать/td>/tr> tr>td>Видно всегда/td>td>Видно всегда/td>/tr> /table>
Спасибо, да я что-то похожее сделал, но в FF все работает как надо, а в IE выдает выполнено с ошибками: «не удалось получить свойство display.Недопустимый аргумент», я так понял из-за значения .display=’table-row’, которого нет в IE..но если я его заменяю на », то в IE работает, а в FF не срабатывает colspan (вообще в таблице по 6 ячеек в строке) и все содержимое отображается в первой ячейке ..
table> . h4 style="cursor:hand; cursor:pointer" onclick="if(document.getElementById('sc1').style.display=='none') document.getElementById('sc1').style.display='table-row'; else document.getElementById('sc1').style.display='none';">Подробнее>>/h4> tr id="sc1" height=60> td colspan=6>size="2">b>Контактные данные:/b>. b>Дополнительные сведения:/b>/font>/td> /tr> . /table>
Как скрыть\показать строку в таблице по клику и условию?
Суть в том, что б убрать все поля которые пользователю не нужны и перед глазами была только актуальная информация.
Перепробовал кучу вариантов в итоге или удаляет все без разбора.
Или проверяет только 1й строку в таблице.
Простой 9 комментариев
По идее просто $(«tr»)[i].style.display = «none»;
shmatuan, тогда уже просто $(«tr»).toggle() . Но соглашусь, — нужно больше кода, krinbin, — ибо ничерта непонятно.
krinbin, Даже так не слишком понятно. Попробую уточнить:
Вам нужно, чтобы по кнопке скрыть скрывались те строки где для услуги поле итого = 0? При повторном клике опять появлялись?
xtress, в идеале так.
Человек заполняет калькулятор — устанавливает кол-во услуг. Выбрал он 3 шт из 10. Нажимает скрыть лишнее, у него остается таблица с расчетом по 3 услугам, потом он опомнился нажал показать, выбрал еще пару услуг и успокоился.
Второй вариант, хотя бы просто скрыть 🙂 если уж первый вариант слишком сложный.
условие может быть или сумма = 0 или услуга (кол-во) = 0 тут не принципиально.
krinbin,
1. $(‘tbody’) — возвращает просто все найденные tbody (тут 1), поэтому делать на него map нет смысла — нужно на $(‘tbody tr’) что бы получить список всех tr и по ним уже проходится
2. var name=$(‘.subtot’) вернёт всегда просто первый найденный — нужно уточнять в какой строке именно искать var name= $(el).find(‘.subtot’)
3. $(«tbody tr»).css(‘display’,’none’); просто берёт все tr и ставит им css без разбора и условий — нужно уточнить к какому именно мы применяем свойства $(el).css(‘display’,’none’);
p.s. el из $(‘tbody tr’).map(function(i, el)
krinbin, ок, тогда этот код ещё обернуть в $(‘tbody’).map((i, tbodyVar) => < . >) и использовать как $(tbodyVar).find(‘tr’)
Таблица данных со сворачиваемыми строками
Идея состоит в том, чтобы получить таблицу данных HTML tr , в которой есть несколько блоков ( группы или строки ), состояние которых можно изменять ( скрыть/показать ). Сначала я пытался сделать это на чистом CSS , но так и не смог найти способ, который бы действительно работал. Поэтому я решил использовать JQuery .
HTML структура
. Это будет применяться ко всем столбцам. Внутри этого тега мы добавим checkbox и label . Вскоре чекбокс будет скрыт с помощью CSS .
| Regian | Q1 2010 | Q2 2010 | Q3 2010 | Q4 2010 | $7,685.00 | $3,544.00 | $5,834.00 | $10,583.00 | $7,685.00 | $3,544.00 | $5,834.00 | $10,583.00 |
|---|
Как видите, чекбоксы имеют атрибут данных HTML5 — data-toggle=”toggle” , который мы затем используем в нашем JQuery для HTML table tr td , чтобы переключить контент под ним.
Стилизация
Мы создадим простой стиль и в конце скроем чекбокс. Ничего особенного:
table < width: 750px; border-collapse: collapse; margin:50px auto; >th < background: #3498db; color: white; font-weight: bold; >td, th < padding: 10px; border: 1px solid #ccc; text-align: left; font-size: 18px; >.labels tr td < background-color: #2cc16a; font-weight: bold; color: #fff; >.label tr td label < display: block; >[data-toggle=»toggle»]
Магия Jquery
Чтобы переключать ( скрыть /показать ) конкретные строки HTML table tr , нужно добавить JQuery , а также отдельные файлы ( в данном случае app.js ).
А в файле app.js будет следующий код:
Этот скрипт запускается каждый раз, когда изменяется состояние чекбокса. А так как строки по умолчанию отображаются, то если выбрать чекбокс, они скроются. Если снять отметку с чекбокса, они появятся снова и так далее.
В принципе все. У вас может быть столько блоков HTML tr , сколько нужно. Просто убедитесь, что используете разные id и имя для каждого чекбокса, чтобы они не конфликтовали между собой.
ВЛ Виктория Лебедева автор-переводчик статьи « Data Table with Collapsible Table Rows »
Пожалуйста, оставьте ваши отзывы по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, дизлайки, отклики, лайки, подписки!
Показать / скрыть строки таблицы с помощью Javascript
У меня есть массив цен, которые я выводил в таблицу с foreach петля.
Я пытаюсь выяснить, как скрыть строки в таблице, если выполняется условие. $status переменная оценивается как «ДА», если цена => 30 и «НЕТ», если < 30 ,
30.00)< $status = "YES"; >else if($price < 30.00)< $status = "NO"; >$prices = array ("20", "56", "33", "12", "66", "25", "55"); echo ""; foreach ($prices as $price) < echo "$price
"; ?> Я пытался установить tr id с соответствующим статусом. Итак, в функции Javascript я пытаюсь передать $status в к getElementById который затем должен отображать цены, которые > чем 30 и скрыть те, которые < 30 ,
Кнопка предназначена для переключения между отображением всех данных или фильтрацией этих цен. > 30 ,
Я знаю, что это очень простой пример и, вероятно, допустил много ошибок, но я был бы признателен за любую помощь.
3 ответа
Во-первых, ваш код имеет неправильный порядок (вы пытаетесь прочитать переменные еще до их установки). Поэтому он дает неопределенные значения. Убедитесь, что вы установили $price а также $status прежде чем передать их в сценарий. Также не используйте id как условие показа / скрытия (так как идентификатор должен быть уникальным), используйте вместо него класс.
"; foreach ($prices as $price) < echo "$price "; foreach ($prices as $price) < if($price >= 30.00) < $status = "YES"; >else if ($price < 30.00) < $status = "NO"; >echo "$price Во-первых, ваш код сгенерирует несколько строк с одинаковым идентификатором (да или нет). В HTML может быть только один идентификатор, поэтому, возможно, измените его на класс вместо идентификатора.
Во-вторых, я бы не «скрывал» строку с помощью кода. Если вы добавляете класс, используйте CSS, чтобы скрыть строки с соответствующим классом.
Visible Data Invisible Data Visible Data, can change Visible Data, can change
Попробуйте это, чтобы скрыть ряд.
var rows = document.getElementsByClassName("hidethis"); for (var i = 0; i . и что-то вроде этого, чтобы отобразить строку.
var rows = document.getElementsByClassName("hidethis"); for (var i = 0; i В этом примере я использовал jQuery, ПРОСТО, чтобы быстрее активировать события нажатия. Вы можете также легко использовать onclick, используемый в вашем коде.