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

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

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

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

Javascript

<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

<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

<!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>

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

	29.09.2016, 11:44