Создание TD-clickable

Я установил скрипку со столом.

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

Теперь, когда пользователь наведет курсор на Parent4, вы можете заметить, что на столе есть место, где нет текста, и пользователь не может щелкнуть его, чтобы Child4 не появлялся....

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

Я старался

<td ahref="#child4"> but didn't work...

////? РЕДАКТИРОВАТЬ Как немного сбивает с толку...

Мне нужно, чтобы ты увидел скрипку. Вы можете видеть, что ячейка для Parent4 больше, чем текст. Поэтому, когда пользователь наводит курсор на ячейку, я хочу, чтобы текст менял цвет, а ячейка тоже меняла цвет + если пользователь щелкает ячейку, Child4 не появляется, потому что ячейка не щелкает, поэтому мой вопрос, как я могу сделать ячейку кликабельна для отображения Child4?

UPD:

Я не обновлял скрипку, но теперь она обновлена.

Ответы

Ответ 1

Свойство href предназначено для элементов привязки (<a/>). "ahref", как вы положили, должно быть <a href="">. a - это собственный элемент, а не атрибут HTML, а href - это атрибут, который он принимает.

Чтобы сделать текст td clickable, вы можете просто положить в него якорь:

<td>
    <a href="#child4">My clickable text</a>
</td>

Изменить: Чтобы исправить это теперь, когда вопрос был добавлен, просто добавьте следующий CSS:

td a {
    display:block;
    width:100%;
}

Это означает, что тег привязки отображается как блок, что позволяет нам регулировать ширину, а затем устанавливать ширину на 100%, позволяя ей заполнить оставшееся пространство.

Рабочий JSFiddle.

Ответ 2

Добавить событие onClick на метке td.

<td onClick="document.location.href='http://www.yoursite.com';"> some text here </td>

Ответ 3

Существует очень простой способ сделать это только с HTML. Поместите текст ссылки внутри DIV. DIV занимает весь TD и делает его доступным для всех.

<a href="http://whatever.com">
  <div>
     Link Text
  </div>
</a>

Ответ 4

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

<a href='#child4' class="parent" style="display: block;width: 300px;height: 10px;"></a>

Это создаст блок без какого-либо объекта или текста внутри.

Ответ 5

Просто хотел добавить два способа, которые на самом деле работали для меня:

  1. Используя Angular 5:

    а. в [ваше имя].component.html:

      <table id='myTable'>
     <tr><td (click)="myClick()">my cell</td>...

    б. В [ваше имя].component.ts: (внутри вашего экспортированного класса..) просто реализуйте необходимую функцию..

       export class [youyname].... {

     ....
     myClick() {
     }
   }

  2. Чистый JS:

      <script>

      function myClick(){
          console.log("got here");
          // Do Whatever you want
      }
  </script>


  <div id='myDiv'>
    <table id='myTable'>
       <tr><td onClick="myClick()">Yo..</td><td>....

    Самый простой способ..

    (Примечание. Можно поместить скрипт внутри тега или даже загрузить в него внешний файл JS, но мне не нравится делать это таким образом.)

Ответ 6

Проще всего было бы заполнить "пустую" ячейку:

&nbsp;

Это должно сделать трюк для вас.