Получить значения строки и столбца таблицы по нажатию

@polin11 · Регистрация: 24.03.2013

Студворк — интернет-сервис помощи студентам

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script>
function load()
{
    loc="<table border>"
    for(i=0;i<3;i++)
    {    
     for(j=0;j<3;j++)
        loc+="<td id='man"+i+j+"'>&nbsp;</td>"
     loc+="<tr/>"
  }
  
  loc+="</table>"
  document.getElementById('target').innerHTML = loc;
  
}
 
$(document).ready(function(){
   $("td").click(function() 
   {
     alert('????')
     idi=$(this).attr("id")
     one=parseInt(idi[3])
     two=parseInt(idi[4])
     alert('one='+one)
     alert('two'+two)
         
    });
})
 
</script>
</head>
<body onload="load()">
 <div id="target">
 </div>
</body>
</html>

Если же в лоб нарисовать таблицу в <body></body> все работает не понимаю почему, как исправить.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script>
 
 
   $(document).ready(function(){
   $("td").click(function() 
   {
     idi=$(this).attr("id")
     one=parseInt(idi[3])
     two=parseInt(idi[4])
     alert('one='+one)
     alert('two'+two)
     
    });
})
 
  
</script>
 
</head>
<body>
 
<table border width="30%" height="30%" >
<td  width="10%" height="10%" id="man00">&nbsp;</td>
<td  width="10%" height="10%" id="man01">&nbsp;</td>
<td  width="10%" height="10%" id="man02">&nbsp;</td>
<tr/>
<td  width="10%" height="10%" id="man10">&nbsp;</td>
<td  width="10%" height="10%" id="man11">&nbsp;</td>
<td  width="10%" height="10%" id="man12">&nbsp;</td>
<tr/>
<td  width="10%" height="10%" id="man20">&nbsp;</td>
<td  width="10%" height="10%" id="man21">&nbsp;</td>
<td  width="10%" height="10%" id="man22">&nbsp;</td>
</table> 
 
</body>
</html>

@j2FunOnly · 29.09.2016, 11:44

polin11, дело в том, что $(document).ready сработает раньше, чем body onload, следовательно $('td') - будет пусто. Чтобы назначить обработчик ко всем элементам td, которые уже существуют и для тех, которые будут отрисованы в DOM в будущем, используйте конструкцию: $(document).on('click', 'td', handler);

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
  <!-- <script src="jquery-1.11.1.min.js"></script> -->
  <script
    src="https://code.jquery.com/jquery-1.12.4.min.js"
    integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
    crossorigin="anonymous">
  </script>
  <script>
    var load = function () {
      console.log('windows onload');
      var loc = "<table border>"
      for(var i = 0; i < 3; i++) {
        loc += '<tr>' // отсутствовал тэг начала строки таблицы
        for(var j = 0; j < 3; j++) loc += "<td id='man" + i + j + "'>&nbsp;</td>"
        loc += "<tr/>"
      }
      loc += "</table>"
      document.getElementById('target').innerHTML = loc;
    }
 
  $(document).ready(function () {
    console.log('document ready');
    console.log($('td'));
    // $("td").click( function () {
    $(document).on('click', 'td', function () {
      // alert('????')
      var idi = $(this).attr("id");
      var one = parseInt(idi[3]);
      var two = parseInt(idi[4]);
      // alert('one='+one)
      // alert('two'+two)
      console.log('one: ' + one + ',two: ' + two);
    });
  });
  </script>
</head>
<body onload="load()">
  <div id="target">
  </div>
</body>
</html>

Откройте консоль разработчика и убедитесь сами.

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .