2013-10-11 2 views
8

Я установил fiddle со столом.Выполнение TD clickable

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

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

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

Я попытался

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

////? Правку как его немного запутанным ...

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

UPD:

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

+1

скрипку не имеет 4s –

+0

@ExplosionPills что вы имеете в виду 4s? – user2766367

+0

Он означает 4 в вашем вопросе, который вы имели в виду у ребенка4, но в вашей скрипке нет кода с кодом, который вы указали в своем вопросе – Kierchon

ответ

14

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

Для того, чтобы текст td Clickable вы можете просто поставить якорь в нем:

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

Edit: Чтобы исправить это сейчас, что вопрос был добавлен, просто добавьте в следующий CSS:

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

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

Working JSFiddle.

+0

Я не знаю, видите ли вы скрипку вообще ... Parent1 user2766367

+0

Я видел вашу скрипку, но она не соответствует коду, используемому в вашем вопросе (что немного запутывает). На самом деле код в вашей скрипке работает. –

+0

Хорошо, я обновил свой вопрос, чтобы он стал более понятным. – user2766367

10

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

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

Пожалуйста, обращайтесь к скрипке? Я пробовал делать Но не работал ... – user2766367

0

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

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

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

-1

Простейшая вещь должна была бы заполнить «пустой» ячейки с:

&nbsp; 

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

+0

Как это применить? – user2766367

+1

  LuFaMa

+0

Вы также можете использовать Дисплей: блок; из href. – Cam

6

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

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