Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как реализовать onclick на ячейках таблицы (https://javascript.ru/forum/events/27309-kak-realizovat-onclick-na-yachejjkakh-tablicy.html)

krokusandr 09.04.2012 09:25

Как реализовать onclick на ячейках таблицы
 
Как реализовать onclick на ячейках таблицы? Чтобы бралась та ячейка на которую кликнули. И почему alert срабатывает сразу: this.onclick=alert(2);

KingStar 11.04.2012 00:21

Что-то вроде того:

<td onClick="window.alert('Бла-Бла-Бла...');">Бла-Бла-Бла...</td>


<script language="JavaScript" event="onmouseup" for="id_ячейки">  
   alert('Бла-Бла-Бла...');
</SCRIPT>


<td>
<a href="javascript:alert('Бла-Бла-Бла...')">Бла-Бла-Бла...</a>
</td>

Le-mark43 15.04.2012 18:39

ну или с участием jquery:
<td>Бла-Бла-Бла</td>
<script>
$("td").click(function(){
alert($(this).text()); // Бла-Бла-Бла
});
либо alert($(this).html()); //если в ячейке не просто текст
покажет содержимое любой ячейки
</script>

last-art 02.05.2012 12:11

Да, только в последнем случае с использованием jquery есть неоспоримый +, если у вас td>10 вешать на каждую ячейку событие может оказаться накладным.

jquery, в данном случае конечно удобнее, он дает событие по тегу. (c) Кэп


А у меня вот другая проблема, как сделать то же самое, что предложил Le-mark43, но без использования jquery/

bes 02.05.2012 12:51

Цитата:

Сообщение от krokusandr
Как реализовать onclick на ячейках таблицы? Чтобы бралась та ячейка на которую кликнули. И почему alert срабатывает сразу: this.onclick=alert(2);

Что вы хотите, куда у вас помещён alert, что такое this.onclick и т.п.??
Приведите пример и описание по сути проблемы, а там уже можно будет смотреть, что с этим делать.

last-art 02.05.2012 13:51

Цитата:

Сообщение от krokusandr (Сообщение 167897)
Как реализовать onclick на ячейках таблицы? Чтобы бралась та ячейка на которую кликнули.

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

Вот у нас таблица с 10 ячейками - как узнать на какую ячейку из этой таблицы произведен клик.

В jquery на данный вопрос ответили выше, но вот как сделать нативным js кодом, никто не сказал.







P.S.
Цитата:

Сообщение от krokusandr (Сообщение 167897)
И почему alert срабатывает сразу: this.onclick=alert(2);

Это неведомо!?

bes 02.05.2012 14:05

Цитата:

Сообщение от last-art
Вот у нас таблица с 10 ячейками - как узнать на какую ячейку из этой таблицы произведен клик.

Ссылку можно получить через this.

<table border=1>
<tr>
  <th>1</th>
  <th>2</th>
</tr>
</table>

<script>
function f() {
  alert(this.innerHTML)
}

var a = document.getElementsByTagName('th');

for (i=0; i<a.length; i++) {
a[i].onclick = f
}
</script>

dmitriymar 02.05.2012 14:26

Цитата:

Сообщение от bes
01 <table border=1>
02 <tr>
03 <th>1</th>
04 <th>2</th>
05 </tr>
06 </table>
07
08 <script>
09 function f() {
10 alert(this.innerHTML)
11 }
12
13 var a = document.getElementsByTagName('th');
14
15 for (i=0; i<a.length; i++) {
16 a[i].onclick = f
17 }
18 </script>

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

bes 02.05.2012 14:33

Цитата:

Сообщение от dmitriymar
чего? ну и говнокод .. слушатель на всю таблицу вешать а не на каждую ячейку.и в колбеке определять соответствие

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

dmitriymar 02.05.2012 14:47

bes,
тебе сюда- http://learn.javascript.ru/introduction-browser-events
чтоб не было подобных фраз
Цитата:

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


micscr 02.05.2012 14:55

last-art, в jquery для таких вещей имеется live.
Если без jquery, то в target или srcElement будет ссылка на нужный элемент

bes 02.05.2012 15:23

Цитата:

Сообщение от dmitriymar

И что я там должен был найти, "чётко" описанное решение:
Цитата:

Сообщение от dmitriymar
слушатель на всю таблицу вешать, а не на каждую ячейку.и в колбеке определять соответствие...

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


Цитата:

Сообщение от dmitriymar
чтоб не было подобных фраз

Вот таких фраз наверное не должно быть:
Цитата:

Сообщение от dmitriymar
чего? ну и говнокод ..


bes 02.05.2012 15:43

dmitriymar, вот micscr дал нормальный ответ, а ты наверное хотел дать другую ссылку http://learn.javascript.ru/obtaining-event-object

micscr 02.05.2012 15:43

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

bes 02.05.2012 15:46

Цитата:

Сообщение от micscr
Смысл в том, чтобы не на каждый элемент(коих много раз это td) вешать обработчик, а на их родителя.
Просто события в js всплывают и на родителе их можно поймать.

Всё понял, а ваш ответ через event.target || event.srcElement дал самый короткий путь решения.

sotik 12.04.2019 05:30

Здравствуйте.Есть такой html и мой js.
Помогите пожалуйста:
1. Имитировать клик на форме;
2. Вытащить информацию об объекте внимания, например хутор.
Пока удается вытащить только название этого самого объекта и вознаграждение, например: Р******* 0,0533 0,1066

<table class="register statistics">
<tr>
<th class="text-center" width="80">Казна</th>
</tr>
<tr class=""><td class="withTip" title="Хутор" width="43">
<span class="sp"></span>
</td>
<td>Р*******</td>
<td class="text-center">
<span class="color-green">0,0533</span>
</td>
<td class="text-center">
<span id="treasury_600686823" class="color-gray">0,1066</span>
</td>
<td><form method="POST" action="/stash/attack">
<input type="submit" value="Одолеть" class="btn" />
</form></td></tr>
<tr class="zebra">
<td class="withTip" title="Деревня" width="43">
<span class="sp"></span>
</td>
</table

$('table.register tr').each(function(key, elem){
var td = $(this).html();
alert($(elem).text());
if (key == 1){
//$('.btn').click(); 
 return false;
}
});


Нашел ответ на второй вопрос пока:
alert($(td).attr('title'));

Выводит "хутор"
Отчасти нашел ответ и на первый вопрос, но почему-то клик не осуществляется. В чем дело? :)
$(td).find("input[type='submit']").click();


Часовой пояс GMT +3, время: 03:33.