Как эффективно показывать/скрывать части ячеек таблицы (и заменять js onclick)?

vlad911

У меня есть следующий код. HTML:

 
function toggle(n) {

n = document.getElementById(n), n.className.match(/\bvisible\b/) ? n.className = n.className.replace(/(?:^|\s)visible(?!\S)/g, "") : n.className += " visible"
}

Код (разметка): CSS:

  div { display: none; } .visible div { display: block !important; }

Код (разметка): JS:

  <table border=1> <tr id=row1> <td><label><input type=checkbox onclick=toggle('row1')></label></td> <td>cell 2<div>cell 2 details<div></td> <td>cell 3<div>cell 3 details</div></td> </tr> <tr id=row2> <td><label><input type=checkbox onclick=toggle('row2')></label></td> <td>cell 2<div>cell 2 details<div></td> <td>cell 3<div>cell 3 details</div></td> </tr> <tr id=row3> <td><label><input type=checkbox onclick=toggle('row3')></label></td> <td>cell 2<div>cell 2 details<div></td> <td>cell 3<div>cell 3 details</div></td> </tr> </table>

Код (разметка): Codepen: Полный: http://codepen.io/tomasz86/pen/KMadGj

Отлаживать: http://s.codepen.io/tomasz86/debug/KMadGj

Я ищу лучший способ показать/скрыть части ячеек таблицы.

Это всего лишь пример кода, но реальный сайт устроен таким же образом. Может ли кто-нибудь предложить какие-либо улучшения, чтобы справиться с этой ситуацией? Я пытался использовать чистые решения CSS, такие как хак с флажками или :target.

Первый не работает, поскольку скрытые элементы не являются дочерними или одноуровневыми по отношению к входному элементу.

Последнее работает, но одновременно показывать элементы из разных строк невозможно. Я бы предпочел не добавлять перед таблицей пустые элементы, такие как метки для каждого флажка и т. д.

Кстати, мои навыки работы с JavaScript очень просты, поэтому, пожалуйста, поймите: я знаю, что использование onclick не рекомендуется, поэтому, если есть лучший способ сделать это, я открыт для всех предложений.

PS На случай, если кого-то беспокоит доступность: весь скрытый контент становится видимым, когда JS отключен.

sidash

Это именно то, что мне хотелось бы сделать. В лучшем случае я хотел бы полностью избавиться от атрибута onclick, но на самом деле не знаю, как это сделать с помощью JS (и методы только CSS здесь, похоже, не применимы). Есть ли у вас какие-то конкретные идеи, как это сделать?

4YBA4OK

Я обнаружил еще одну проблему, связанную с доступностью, и она весьма важна.

На данный момент флажки не фокусируются, и к ним вообще невозможно получить доступ с клавиатуры.

Простое добавление tabindex делает их фокусируемыми, но взаимодействовать с ними по-прежнему невозможно.

Я искал возможные решения и нашел onclick keyboard accessibility: Is your rich JavaScript app keyboard-friendly?

где они в основном рекомендуют использовать либо входы/кнопки, либо привязки для максимальной совместимости с клавиатурой. Что вы думаете?

Сергей Ше

Таблицы используются для макета, поэтому по умолчанию граница отсутствует.

Если таблица не используется для макета, добавьте «border=1» и отобразите границу. Вот что, кажется, говорит.

:/ В любом случае, я попытаюсь изменить код и вернуться, если мне удастся удалить onclick и заменить его классом.

adstomat

Это простая и понятная чушь. Браузер (да и не браузер) не слушает и не заботится о том, является ли таблица таблицей или элементом макета. Тот, кто тебя кормил, преподносил тебе нефильтрованный пердеж.

ancifer47

о боже, ты вошел в это, не так ли? Я склонен согласиться с тем, что таблицы следует использовать только для табличных данных, но мой код не полагался на таблицы. Как лучше? Думаю, я предпочитаю перестраховаться и действовать в соответствии с тем, что мне непосредственно хочется изменить.

Я думаю, если бы у div все еще был класс, а у вас был .visibility .detailcell {} это было бы безопаснее.

Dmitriy31

Не знаю, зачем вы тратите на это ярлык... хороший сценарий должен перехватывать разметку, а не наоборот (то есть не использоватьсобытие), и вам, вероятно, было бы лучше перейти к родительскому узлу, который вы хотите изменить, вместо таргетинга по идентификатору.

и кавычки НЕ являются необязательными для значений атрибутов, если только вы все еще не пишете HTML 3.2, как в 1997 году! Аналогично, атрибут border не имеет никакого отношения к ЛЮБОМУ HTML-коду, написанному после этого времени.

По сути, используйте меньше разметки и больше сценариев, если другие сценарии не кэшируются, а разметка может не кэшироваться.

imrael

упс, полный провал с моей стороны. Используйте кнопку вместо диапазона. да. По-прежнему позволяет избежать головной боли, связанной с странным поведением щелчка/изменения флажка, но вы можете сфокусировать его как обычно. Я только что загрузил исправленную копию:
http://www.cutcodedown.com/for_others/tomasz86/

Соответствующие изменения: ЯС:

 


.showHideDetails .showHide button {


display:block;


margin:0.4em auto 0;


width:1.5em;


height:1.5em;


text-align:center;


border:1px solid #000;


-webkit-touch-callout:none;


-webkit-user-select:none;


-khtml-user-select:none;


-moz-user-select:none;


-ms-user-select:none;


user-select:none;


}


.showHideDetails .showHide button:active,


.showHideDetails .showHide button:focus,


.showHideDetails .showHide button:hover {


background:#8AC;


}


.showHideDetails .show .showHide button {


background:#AAA;


}


.showHideDetails .show .showHide button:before {


content:'x';


position:relative;


}

Код (разметка): CSS:

  tr.insertBefore(make( 'td', make('button', false, false, { onclick : showHideClick }), false, { className : 'showHide' } ), tr.firstChild);

Код (разметка): Да, ошибка новичка с моей стороны — я ЗНАЛ лучше.

Я также нацелился на :Active и :focus для полной поддержки современных и устаревших клавиш (некоторые старые UA неправильно используют :active вместо :focus) и придал им немного больше визуального стиля.

Клянусь, наступает старость, я буквально уже знал это, а потом все равно пошел и выплеснул это.

vegeek_ng

Коден: http://codepen.io/tomasz86/pen/OXpjoG

Пожалуйста, дайте мне знать, если вы считаете, что что-то можно сделать лучше или если есть какие-либо проблемы. PS Разве эти вставленные tds на самом деле не должны быть указаны с помощьюscope="row"?

alfa_tester

Придерживаясь чистого JavaScript, я придумал http://codepen.io/anon/pen/wWgKLO

Я использую имя класса для идентификации строк — это удобное искажение атрибута класса. Я также изменил класс .visible div на .visible. Вы искали div внутри элемента, у которого был класс.

Другое альтернативное обозначение — div.visible. Я изменил имя функции на toggleVisibility, что было немного неуместно, но мне нравится, чтобы имена были а) понятными и б) вряд ли конфликтовали с другой функцией, которая может быть добавлена сейчас или в будущем.

property_info

Ты меня трахаешь? Я имею в виду, я уже семь лет говорю, что дымящаяся куча навоза «спецификации» WhatWG предназначена для того, чтобы вернуть разработку к ХУДШЕМУ из дострогих разработок конца 1990-х годов - но теперь они просто обязаны и полны решимости продемонстрировать они летают фиолетовой рыбой по поводу семантической разметки или чего-то еще, чего пытался достичь 4 Strict, не так ли?

Если это не табличные данные, НЕ ИСПОЛЬЗУЙТЕ ТАБЛИЦУ — даже если этот атрибут является триггером, это означает, что они говорят, что его можно использовать для макета, и в этот момент знаете что? ** ЧТО **!
Привет, Зевс Х. Маммари пашет Рождество, вот и все, лайковые перчатки снимаются.

Я, черт возьми, ЗАВЕРШЕН, позволяя W3C ссать по всему Интернету всей этой невежественной и тупой ерундой, которой они ругались на спецификацию HTML с тех пор, как вышла пятая версия.

Это еще более ошеломляюще тупо, чем была HGROUP!!! Клянусь, невежественные идиоты, стоящие за HTML 5, не будут счастливы, пока FONT и CENTER снова не станут действительными.

Похоже, это их окончательный план, учитывая откровенно бессмысленную чушь, которую они в него вываливали волей-неволей.

Мне хочется выяснить, где они встречаются, и представить Орландо случайностью.

Если они снова вернут BORDER, они будут слишком глупы, чтобы им можно было позволить ЖИТЬ, не говоря уже о том, чтобы продолжать отвечать за спецификацию HTML. ... и я думал, что роли Aria, MAIN, SECTION, NAV, FOOTER, ARTICLE и ASIDE - это идиотское бессмысленное дублирование.

Нет.

почему бы им просто не признать это, они хотят вернуть HTML 3.2! ------------- Если отбросить в сторону всякую ерунду разработки 1997 года, HTML 5 — перехват элементов довольно прост.

Я бы, вероятно, либо дал каждому из них класс и получил их с помощью document.getElementByClassName, либо дал бы родительской таблице класс и нацелил бы его через getElementsByTagName внутри каждой таблицы с этим классом.

в любом случае, как только у вас есть список элементов, вы просто добавляетеEventListener (или AttachEvent, если вам нужна устаревшая поддержка IE) событие, используйте event.target (или window.event.srcElement), чтобы выяснить, какой ввод был нажат, затем выполните element .parentNode.parentNode для целевого TR.

Algin1

Таблицы предназначены для табличных данных, поэтому у нас есть СЕМАНТИКА и поэтому выбирать теги нужно исходя из СМЫСЛА, а НЕТ внешний вид или поведение по умолчанию. Вот почему таблицы для макетирования — это идиотская полоумная чушь из 1990-х годов, и любой, кто использовал таблицы только для макета, явно никогда не воспринял НИ ОДНОГО из улучшений, которые нам дали 4 Strict и почти 18 лет прогресса. (Либо так, либо на самом деле пишет HTML 3.2 для электронной почты, поскольку поддержка HTML почтовыми клиентами застряла в 1997 году) Это настолько тупо, что этот раздел есть даже в спецификации, что для него нет вежливых слов.

ЛЮБОЙ, кто думает, что это правильно или имеет какое-то место в этом отношении, настолько абсолютный невежда, что на их фоне креационисты, противники вакцинации, холистические целители и гурманы выглядят приземленными в реальности!

Если вы выбираете теги, основываясь на том, как они выглядят, а не на том, что они означают, вы выбираете все неправильные теги по совершенно неправильным причинам.

В этом заключалась идея 4 Strict, основная причина появления HTML, вся концепция семантической разметки и отделения представления от контента... НЕТ вежливых слов, чтобы ответить на это в спецификации.

Это так же идиотично, как запрет на «штурмовое оружие», который запрещает не на основании выстрела, длины ствола, механического действия, мощности патрона, точности, скорострельности или каких-либо других значимых данных, а просто на основе висящей на нем мебели.

оружие.

Моссберг 500 легален, Моссберг 500 с пистолетной рукояткой и прикладом, складывающимся на целых три дюйма, незаконен. Это ТАК глупо.

Время обновить мой Что не так с HTML 5

статья.

ZIKURIK

Я бы выбрал метод №1, если для вас это важно.

Что делает «сгенерированный контент» плохой практикой, так это то, что он не ухудшается.

дело в том, что в данном случае это ИДЕАЛЬНЫЙ сценарий использования.

Я изменю рассматриваемый сценарий, чтобы отразить это изменение в том виде, в котором оно есть на самом деле.

довольно хорошая идея.

Единственная «проблема» с таким подходом заключается в том, что IE7/более ранние версии не получит этот текст.

ХОРОШО. Соответствующие изменения:

 
.showHideActive thead .showHide:before {
content:"Details";
}

Код (разметка): ... и в CSS:

  case 'THEAD': tr.insertBefore( make('th', false, false, { className : 'showHide', scope : 'row' }), tr.firstChild ); break;

Код (разметка): поскольку TH, к которому он применяется, будет существовать только в том случае, если активен сценарий, применение текста затем только тогда, когда оба работают, это нормально, а НЕ то, что я бы назвал «плохой практикой» - ну, если только вас волнует, что IE7/более ранние версии действительно получат этот текст.

Теоретически вы, вероятно, могли бы использовать :first-child вместо класса, поскольку это тоже IE8+, но поскольку мы генерируем его из сценария, а не из разметки, я немного менее опасаюсь этого подхода.

Мне бы хотелось, чтобы был «чистый» способ определить, активен ли CSS из JS, но, к сожалению, большинство методов являются случайными, крайне ненадежными и неряшливыми.

Примечание: чертовски приятно видеть кого-то, кого волнуют ВСЕ комбинации сценариев и отключенных CSS, а не просто слепо полагать, что они все присутствуют постоянно.

San4aus

Проблема с атрибутом border заключается в том, что это текущая спецификация HTML5, и я почти уверен, что большинство людей воспримут это как нечто само собой разумеющееся.

Border=1 использовался в коде, следующем за этой спецификацией (т. е. чтобы сказать, что таблица не предназначена для макета). Я удалил его на данный момент, чтобы не провоцировать дальнейшую дискуссию (потому что это не имеет ничего общего с исходным вопросом). Если бы это было лично для меня, я бы полностью удалил атрибут border, а также заставил браузеры отображать границы таблиц по умолчанию (однако это сломало бы все те сайты, которые полагаются на них для макета).

berkut999

Это было бы хорошо. Если бы это было так, взломать все эти сайты было бы ОЧЕНЬ ХОРОШО, поскольку это могло бы заставить их переосмыслить свой дрянной код. НЕТ НИКАКОЙ ПРИЧИНЫ использовать таблицы для разметки. Не один. Не было уже почти 20 лет.

mnlpro2

К сожалению, кто, кажется, кормит людей, так это W3C идиотскими изменениями в спецификации HTML 5... или, если вы предпочитаете неверсийную версию WhatWG BS "HTML" - как это сейчас есть в обоих.

Отсюда тот факт, что я Я беру выходной, чтобы посидеть и поразмышлять над этим, прежде чем проделать W3C новую дыру в заднице новым обновлением на моем сайте. ...и истинное доказательство того, что «будущее» HTML в глазах WhatWG и W3C — это то, что когда-то называлось HTML 3.2.

dimdim1

Атрибут роли имеет хоть какой-то смысл для макетных таблиц. Значение следует изменить на «theAuthorIsAnIdiotWhoDoesNotKnowEnoughToBeAllowedNearAWebPage». Признаюсь, я не читал табличную часть; Я имею в виду, как можно было придумать синтаксис таблицы? Гэри

Похожие темы	Дата
Как сделать руку и царапины на майку?	19.10.2024, 18:10
Ребята, что это за картинка?	19.10.2024, 18:10
Как написать идеальную SEO-оптимизированную статью: пошаговое руководство	19.10.2024, 18:10
Потеряны странные данные настраиваемых полей	19.10.2024, 18:10
Пожалуйста, помогите мне (полный нуб)	19.10.2024, 18:10
Как разместить два изображения в одном месте	19.10.2024, 18:10
Улучшенная CSS-анимация.	19.10.2024, 18:10
4 тенденции веб-дизайна, на которые стоит обратить внимание	19.10.2024, 18:10
Div не центрируется по горизонтали на экране при прокрутке влево и вправо	19.10.2024, 18:10
CMS для базы данных людей?	19.10.2024, 18:10

Как эффективно показывать/скрывать части ячеек таблицы (и заменять js onclick)?

vlad911

sidash

4YBA4OK

Сергей Ше

adstomat

ancifer47

Dmitriy31

imrael

vegeek_ng

alfa_tester

property_info

Algin1

ZIKURIK

San4aus

berkut999

mnlpro2

dimdim1

I AM

Интересно