Блог

Главная - Вопросы по программированию - Как сделать так, чтобы ячейка таблицы была связана и имела цвет фона?

Как сделать так, чтобы ячейка таблицы была связана и имела цвет фона?

#javascript #html #css #html-table

Вопрос:

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

Одна попытка-это:

 <td><a class="score" href="#">cell text</a></td>
<td><a href="#">cell text</a></td>
<td><a class="score" href="#">cell text</a></td>
...
...
<script>
  var colorScore = document.getElementsByClassName('score');
  for (i=0; i < colorScore.length; i  ) {
    colorScore[i].style.backgroundColor = "red";
  }
</script>

Это дает мне ячейку, в которой только текст имеет гиперссылки и только текст имеет цвет фона. Я также попытался поставить class="score" <td> вместо <a> этого, но это не дало никакого цвета фона (но, очевидно, сохранило гиперссылку). Наконец, я попробовал это с <a> окружением <td> , но это не дает мне ни гиперссылки, ни цвета фона, я считаю, что это запрещено в html.

Я также использую Bootstrap 5, но не думаю, что он предлагает какие-либо решения.

Ответ №1:

На данный момент только элемент a получает фон. Что нам нужно, так это его родительский элемент, чтобы получить фон.

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

 var colorScore = document.getElementsByClassName('score');
for (i = 0; i < colorScore.length; i  ) {
  colorScore[i].parentElement.style.backgroundColor = "red";
} 
 td {
  padding: 10px;
} 
 <table>
  <tr>
    <td><a class="score" href="#">cell text</a></td>
    <td><a href="#">cell text</a></td>
    <td><a class="score" href="#">cell text</a></td>
  </tr>
</table>

Комментарии:

1. Спасибо, что заметили это @traktor. В вопросе недостаточно, чтобы понять, почему вся ячейка недоступна для кликабельности. Если дополнить элемент a, то вся ячейка будет доступна для кликабельности, но нам не говорят, есть ли там и другие материалы.

Ответ №2:

Вы можете попробовать сохранить цель гиперссылки в пользовательском атрибуте и перехватить click событие, которому присваивается это значение window.location .

Мы можем использовать делегирование событий следующим образом:

 var colorScore = document.getElementsByClassName('score');
for (i = 0; i < colorScore.length; i  ) {
  colorScore[i].style.backgroundColor = "red";
}
document.addEventListener("click", function(e) {
  let closest = e.target.closest('.score');
  if(closest) location = closest.dataset.href;
}) 
 td {
  padding: 10px;
  border: 1px solid;
} 
 <table>
  <tr>
    <td class="score" data-href="https://stacksnippets.net"><a>cell text</a></td>
    <td><a href="#">cell text</a></td>
    <td class="score" data-href="https://stacksnippets.net"><a>cell text</a></td>
  </tr>
</table>
Метки: ,