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

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Получить значения строки и столбца таблицы по нажатию (https://javascript.ru/forum/events/65137-poluchit-znacheniya-stroki-i-stolbca-tablicy-po-nazhatiyu.html)

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

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

<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).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> все работает не понимаю почему, как исправить.

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

<div id="itog1"></div>
<br/>
<div id="itog2"></div>
<bt/>
<div id="info"></div>

</body>
</html>

Цитата:

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

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

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

Делегируйте обработку ближайшему родителю присутствующему на странице.

Начнём с того, что ~~ты - пиз~~ у вас в коде таблица вообще никак не рисуется, потому остаётся только гадать.
Например $.ready происходит раньше чем window.onload, потому если бы таблица таки рисовалась, то делала бы это она уже после того как обработчики повесились на ничто. Есть подозрение что вам нужно зарихнуть всё в $.ready. По хорошему и таблицу генерировать с помощью jq сразу, раз уж он подключён.

Ошибся в коде, конечно же

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

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
#as {
    border-collapse: separate;
}
#as td {
    padding: 8px 15px;
    border: 1px solid #ddd; 
}
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
var col = 3, row = 3;
$(function() {
    var t = $('<table id="as"/>').appendTo('#target')
                                 .on('click', 'td', function() {
                                      alert($(this).text())
                                 });
    for(var i=0, el=col*row, tr; i<el; i++) {
        if(!(i % col)) tr = $('<tr/>').appendTo(t);
        tr.append('<td>' + i + '</td>');            
    }
});
</script>     
</head> 
<body>
<div id="target"></div>
</body> 
</html>

И подумайте над тем, нужна ли вам такая геморройная идентификация ячеек - man+i+j, да и нужна ли она вообще.

laimas, прекращай развешивать ивенты на все ячейки.

Вот есть такой элемент

document.getElementById('target')

надо его запомнить, но прежде определить снаружи функции переменную для него

var tg=null;

Внутри функции

tg=document.getElementById('target');
tg.innerHTML=loc;

А потом, или до того как

tg.addEventListener('click',getCellText);

и

function getCellText(ev){

   if(ev.target.nodeName!='TD') return;
   var td=ev.target;

}

It's all folks.

warren buffet,
это ты своей бабушке поясни, придурок.

Из-за тебя моя бабушка уже фрилансером стала. )))

warren buffet,
ты тупой себялюбивый засранец. Из всего, что ты на форуме накалякал, 99%, это ничего незначащий словесный понос. Потрудись выяснить, что означает:

$('table').on('click', 'td', function...)

и стоило ли "умничать". Пшел вон, пес смердячий, от тебя дерьмом тянет за версту. Не рисуйся передо мною, для меня ты полный дебил.

Ну ладно, забираю наезд. Можешь мне отпостить гифку. Я в вашей жиквери нихера не понимаю.

Цитата:

Сообщение от warren buffet

Я в вашей жиквери нихера не понимаю.

ты вообще ни в чем не понимаешь, а главное того, что ты поганишь своими тупыми комментариями в темах.

Я же забрал наезд. Ну давай уже гифку. )))