Всем привет подскажите как правильно из кликабельной строки таблицы Код (Text): tr class="t548" onclick="location.href = ' исключить один столбец td, что бы клик по нему не срабатывал?
что значит "кликабельная таблица". Результат клика один и тот же, где не ткни? Обработчик висит на уровне чего? Я вот вижу обработчик на уровне строки в вашем коде. --- Добавлено --- Классы не отвечают за обработку событий.
@Fell-x27 на сколько я понимаю, действие повешено на событие клика по tr с классом t548. Если удалить класс, то tr перестанет удовлетворять условиям и перестанет реагировать на клик.
Ты неправильно понимаешь. События в JS работают не так. И обработчики назначаются не так. А еще есть такое явление как всплытие событий. Объект может не иметь собственного обработчика, но родитель обработает клик по нему, при этом target и this у события будут разными ссылками. Классы - это чисто селекторная херня. А обработчики тут заданы явно, через onclick в коде элемента. Что, в общем-то не то, чтобы очень правильно, но как есть так есть.
На сколько я понял, у человека всё работает. --- Добавлено --- @Fell-x27 ааа так это кусок из тэга вырванный) я не так понял. сорян. --- Добавлено --- и вопрос не так понял.. спать пошел...
Совершенно верно, при клике по строке в любом месте совершается переход на url который в каждой строке свой <tr class="t548" onclick="location.href = 'URL'"> вот только в одном столбце чек бокс есть, и надо что бы клик по чекбоксу не приводил к переходу по ссылке
ИМХО тут изначально всё или не продуманно или задумано не правильно. Сделать это можно, но тут длинными и корявыми костылями попахивает.
Нет. Ты уверен, что знаешь JS, и, конкретно, событийную модель DOM? В td этой ячейки пропишите: Код (Text): onclick="event.stopPropagation();" И все. Вот демо.
я знаю JQuery. на этом мои познания JS заканчиваются. О событийной модели имею представление, но не могу сказать, что "уверенно знаю всё об этом".
Знаешь прям, чтоб клиентское приложение написать на ней, или чтоб из сниппетов из гугла собрать аякс и модальное окошечко? Если второе, то не знаешь, а пользуешься. Это нормально, многие так начинали. Я так начинал. Но лучше не давай другим советы, пока не будешь абсолютно точно уверен в их правильности. Рассуждать о чем-то, не зная достаточно предмет, не страшно, дискуссия есть дискуссия. Но советы налагают некоторый уровень ответственности за сказанное.
HTML: <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $( function() { $( 'body' ).on( 'click', '#RAY_REFLESH_BOX', function() { document.location.href = $( this ).attr( 'url' ); }); }); </script> <table> <tr> <td id = "RAY_REFLESH_BOX" url = "/?111">111</td> </tr> <tr> <td id = "RAY_REFLESH_BOX" url = "/?222">222</td> </tr> </table> --- Добавлено --- забыл закуску Код (CSS): <style> #RAY_REFLESH_BOX { cursor: pointer; } </style>
Использование нестандартных атрибутов не приветствуется. Вместо этого нужно использовать dataset-ы. Использование одного и того же ID на разных элементах так вовсе запрещено. А использование JQuery для такой, прдон, херни как потоковое навешивание обработчиков вообще незаконно должно быть. Ну и задача у ТСа несколько иная, и ему нужен обработчик на уровне строки с исключением. А еще у тебя скрипт начинает обрабатывать таблицу до того, как таблица загрузится. Вроде пользуешься жиквери, а про document.ready забыл. И, самое главное, что у тебя все упадет с ошибкой, потому что загрузка скриптов идет асинхронно и твой скрипт, раздающий обработчики, начнет выполняться раньше, чем подключится JQuery. В итоге ничерта вообще работать не будет.
Раз уж дискуссия завязалась, еще спрошу Хоть и мелочь, но как то раздражает. работает так: при клике на строку срабатывает как надо, переходит по ссылке, но перед этим включает чекбокс. Так бы ничего, но если вернуться броузером назад, чекбокс остается включен. пробую так, не срабатывает Код (Text): document.getElementById("checkbox").checked=false; (id нужный ставлю)
У меня в демке не включает ничего. Можете скинуть фрагмент таблички вашей? --- Добавлено --- Возможно, у вас в верстке какая-то проблема. Потомки не должны ловить события родителей. Если только у вас вся строка не привязана к чекбоксу явно.
туплю немного, document.getElementById("checkbox").checked=false; срабатывает, но не правильно, если кликаеш по 2 строке, очищает 1, если по 3 очищает 2 и т.д., буду разбираться остался принципиальный вопрос, такой способ нормальный или корявый? таблица вот,строка и первый столбец с чек боксом
Скриншот кода? Серьезно? Что ж за напасть такая. На будущее - код это текст. Если его просят, то не только за тем, чтобы в него поглядеть, но и за тем, чтобы его скопировать и детально проверить на живую". Это не длиннопост на пикабушечке, это программерский форум. Код надо вставлять текстом, с помощью кнопки </>, самая первая на панельке редактора. --- Добавлено --- И да, а если я намеренно проставил чекбокс? Зачем его принудительно снимать? В общем, киньте код таблицы. Не из просмотрщика DOM-а браузера, а из просмотрщика исходного кода страницы браузера. Это в другой вкладке. Текстом, пожалуйста. Чтобы избыточности не было, пусть там будет тело таблицы и 2-3 полных строки.
не внимательно прочитал, но все равно, код вряд ли можно попробовать это нужно друпал устанавливать Код (Text): <table class="<?php print $class; ?>"> <?php if (!empty($title)) : ?> <caption><?php print $title; ?></caption> <?php endif; ?> <thead> <tr> <?php foreach ($header as $field => $label): ?> <th class="views-field views-field-<?php print $fields[$field]; ?> <?php print $options['info'][$field]['align'] ?>"> <?php print $label; ?> </th> <?php endforeach; ?> </tr> </thead> <tbody> <?php foreach ($rows as $count => $row):?> <?php preg_match_all('/<a href="(.*?)"/s', $row['title'], $complet);?> <tr class="<?php print 't'.$row['field_nomer_zakaza'];?>" onclick="location.href = '<?php print ($complet[1][0]); ?>';document.getElementById('edit-views-bulk-operations-1').checked=false;"> <?php foreach ($row as $field => $content): ?> <?php $st=''; if($field=='views_bulk_operations'){ $st='onclick="event.stopPropagation();"'; }?> <td <?php print $st; ?> class=" views-field-<?php print $fields[$field]; ?> <?php print $options['info'][$field]['align'] ?>"> <?php print $content; ?> </td> <?php endforeach; ?> </tr> <?php endforeach; ?> </tbody> <tfoot> <?php foreach ($sub_totals as $type => $row): ?> <tr class="view-subfooter-number"> <?php foreach ($row as $field => $content): ?> <td class="view-subfooter views-field views-field-<?php print $fields[$field]; ?> <?php print $options['info'][$field]['align'] ?>"> <?php print $content; ?> </td> <?php endforeach; ?> </tr> <?php endforeach; ?> <?php foreach ($totals as $type => $row): ?> <tr class="view-footer-number"> <?php foreach ($row as $field => $content): ?> <td class="view-footer views-field views-field-<?php print $fields[$field]; ?> <?php print $options['info'][$field]['align'] ?>"> <?php print $content; ?> </td> <?php endforeach; ?> </tr> <?php endforeach; ?> </tfoot> </table> p.s. Там про код и не сказано...
Код. Страницы. Готовый. Из вкладки Sources в браузере, пожалуйста. Если у тебя хром, то нажми CTRL+U, или правой кнопкой "Просмотр кода страницы". И вот оттуда. Не phpшный. Чистый собранный HTML.
вон вы про что... Код (Text): <div class="view-content"> <div class="vbo-views-form"><form action="/crm/zakaz" method="post" id="views-form-crm-page-2" accept-charset="UTF-8"><div><input type="hidden" name="form_build_id" value="form-BfaP7bAIbwXfViZppZdwprifgeIi6YdAl5zBkljNfHU" /> <input type="hidden" name="form_token" value="6TVgKM57Nssh6RT7EYZPGwSOXfRU7JyyLLy177af0dU" /> <input type="hidden" name="form_id" value="views_form_crm_page_2" /> <input class="select-all-rows" type="hidden" name="select_all" value="" /> <fieldset class="container-inline collapsible collapsed form-wrapper" id="edit-select"><legend><span class="fieldset-legend">Операции</span></legend><div class="fieldset-wrapper"><div class="form-item form-type-select form-item-operation"> <select id="edit-operation" name="operation" class="form-select"><option value="0">- Выберите действие -</option><option value="action::views_bulk_operations_delete_item">Удалить позицию</option></select> </div> <input type="submit" id="edit-submit--2" name="op" value="Выполнить" class="form-submit" /></div></fieldset> <table class="views-table sticky-enabled"> <thead> <tr> <th class="views-field views-field-views-bulk-operations "> <div class="form-item form-type-checkbox"> <input class="vbo-table-select-all form-checkbox" type="checkbox" value="1" /> </div> </th> <th class="views-field views-field-field-nomer-zakaza active "> № </th> <th class="views-field views-field-title "> Название </th> <th class="views-field views-field-name "> Менеджер </th> <th class="views-field views-field-field-zakazchik "> Заказчик </th> <th class="views-field views-field-field-status-zakaza "> Принято </th> <th class="views-field views-field-field-delivery "> Сдача </th> <th class="views-field views-field-field-summa-zakaza "> Сумма заказа </th> <th class="views-field views-field-field-paid "> Предпросмотр </th> </tr> </thead> <tbody> <tr class="t548" onclick="location.href = '/crm/zakaz/mars';document.getElementById('edit-views-bulk-operations-1').checked=false;"> <td onclick="event.stopPropagation();" class=" views-field-views-bulk-operations "> <div class="form-item form-type-checkbox form-item-views-bulk-operations-0"> <input class="vbo-select form-checkbox" type="checkbox" id="edit-views-bulk-operations-0" name="views_bulk_operations[0]" value="949" /> </div> </td> <td class=" views-field-field-nomer-zakaza active "> 548 </td>
Так, ну давайте еще разок, как наводка артиллерии, да? Перелет, компенсация, недолет, компенсация, но теперь точно в цель попадем. Оттуда же, откуда это было скопировано, нужен фрагмент <table></table>. А в нем два три <tr></tr> полностью собранных. Ну или давайте упростим задачу. Просто скиньте фрагмент <table></table>. Целиком.
Код (Text): <table class="views-table sticky-enabled"> <thead> <tr> <th class="views-field views-field-views-bulk-operations "> <div class="form-item form-type-checkbox"> <input class="vbo-table-select-all form-checkbox" type="checkbox" value="1" /> </div> </th> <th class="views-field views-field-field-nomer-zakaza active "> № </th> <th class="views-field views-field-title "> Название </th> <th class="views-field views-field-name "> Менеджер </th> <th class="views-field views-field-field-zakazchik "> Заказчик </th> <th class="views-field views-field-field-status-zakaza "> Статус </th> <th class="views-field views-field-field-date-create "> Принято </th> <th class="views-field views-field-field-delivery "> Сдача </th> <th class="views-field views-field-field-summa-zakaza "> Сумма заказа </th> <th class="views-field views-field-field-paid "> Оплачено </th> <th class="views-field views-field-field-preview views-align-right views-align-right"> Предпросмотр </th> </tr> </thead> <tbody> <tr class="t551" onclick="location.href = '/crm/zakaz/333';document.getElementById('edit-views-bulk-operations-1').checked=false;"> <td onclick="event.stopPropagation();" class=" views-field-views-bulk-operations "> <div class="form-item form-type-checkbox form-item-views-bulk-operations-0"> <input class="vbo-select form-checkbox" type="checkbox" id="edit-views-bulk-operations-0" name="views_bulk_operations[0]" value="952" /> </div> </td> <td class=" views-field-field-nomer-zakaza active "> 551 </td> <td class=" views-field-title "> <a href="/crm/zakaz/333">333</a> </td> <td class=" views-field-name "> <a href="/user/oleg" title="Просмотр профиля пользователя." class="username" xml:lang="" about="/user/oleg" typeof="sioc:UserAccount" property="foaf:name" datatype="">oleg</a> </td> <td class=" views-field-field-zakazchik "> <a href="/content/gruppa-kompaniy-kik-pao">Группа компаний КИК ПАО </a> </td> <td class="red views-field-field-status-zakaza "> Принято </td> <td class=" views-field-field-date-create "> понедельник, февраля 6, 2017 - 13:21 </td> <td class=" views-field-field-delivery "> <span class="date-display-single" property="dc:date" datatype="xsd:dateTime" content="2017-02-07T13:30:00+03:00">02/07/2017 - 13:30</span> </td> <td class=" views-field-field-summa-zakaza "> </td> <td class=" views-field-field-paid "> </td> <td class=" views-field-field-preview views-align-right views-align-right"> <a href="http://dru.home/sites/default/files/btrphp5.png"><img typeof="foaf:Image" src="http://dru.home/sites/default/files/styles/thumbnail/public/btrphp5.png?itok=6eBar0Se" width="100" height="53" alt="" /></a> </td> </tr> <tr class="t550" onclick="location.href = '/crm/zakaz/222';document.getElementById('edit-views-bulk-operations-1').checked=false;"> <td onclick="event.stopPropagation();" class=" views-field-views-bulk-operations "> <div class="form-item form-type-checkbox form-item-views-bulk-operations-1"> <input class="vbo-select form-checkbox" type="checkbox" id="edit-views-bulk-operations-1" name="views_bulk_operations[1]" value="951" /> </div> </td> <td class=" views-field-field-nomer-zakaza active "> 550 </td> <td class=" views-field-title "> <a href="/crm/zakaz/222">222</a> </td> <td class=" views-field-name "> <a href="/user/oleg" title="Просмотр профиля пользователя." class="username" xml:lang="" about="/user/oleg" typeof="sioc:UserAccount" property="foaf:name" datatype="">oleg</a> </td> <td class=" views-field-field-zakazchik "> <a href="/content/gruppa-kompaniy-kik-pao">Группа компаний КИК ПАО </a> </td> <td class="red views-field-field-status-zakaza "> Принято </td> <td class=" views-field-field-date-create "> понедельник, февраля 6, 2017 - 13:20 </td> <td class=" views-field-field-delivery "> <span class="date-display-single" property="dc:date" datatype="xsd:dateTime" content="2017-02-07T13:30:00+03:00">02/07/2017 - 13:30</span> </td> <td class=" views-field-field-summa-zakaza "> </td> <td class=" views-field-field-paid "> </td> <td class=" views-field-field-preview views-align-right views-align-right"> <a href="http://dru.home/sites/default/files/cke_0.png"><img typeof="foaf:Image" src="http://dru.home/sites/default/files/styles/thumbnail/public/cke_0.png?itok=2M5ZDyp6" width="100" height="53" alt="" /></a> </td> </tr> </tbody> <tfoot> <tr class="view-subfooter-number"> <td class="view-subfooter views-field views-field-views-bulk-operations "> Page SUM </td> <td class="view-subfooter views-field views-field-field-nomer-zakaza active "> </td> <td class="view-subfooter views-field views-field-title "> </td> <td class="view-subfooter views-field views-field-name "> </td> <td class="view-subfooter views-field views-field-field-zakazchik "> </td> <td class="view-subfooter views-field views-field-field-status-zakaza "> </td> <td class="view-subfooter views-field views-field-field-date-create "> </td> <td class="view-subfooter views-field views-field-field-delivery "> </td> <td class="view-subfooter views-field views-field-field-summa-zakaza "> 0 </td> <td class="view-subfooter views-field views-field-field-paid "> 0 </td> <td class="view-subfooter views-field views-field-field-preview views-align-right views-align-right"> </td> </tr> <tr class="view-footer-number"> <td class="view-footer views-field views-field-views-bulk-operations "> Total SUM </td> <td class="view-footer views-field views-field-field-nomer-zakaza active "> </td> <td class="view-footer views-field views-field-title "> </td> <td class="view-footer views-field views-field-name "> </td> <td class="view-footer views-field views-field-field-zakazchik "> </td> <td class="view-footer views-field views-field-field-status-zakaza "> </td> <td class="view-footer views-field views-field-field-date-create "> </td> <td class="view-footer views-field views-field-field-delivery "> </td> <td class="view-footer views-field views-field-field-summa-zakaza "> 7364000 </td> <td class="view-footer views-field views-field-field-paid "> 6343000 </td> <td class="view-footer views-field views-field-field-preview views-align-right views-align-right"> </td> </tr> </tfoot> </table --- Добавлено --- попробовал этот кусок отдельно посмотреть, работает правильно, видимо на месте какой то js еще есть, который так срабатывает
Хм...ну тогда браузерный отладчик вам в руки и на странице сами проверяйте. Мб где-то какой-то обработчик есть или еще что. Отталкивайтесь от этого.