Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Название ячейки таблицы (https://javascript.ru/forum/misc/15079-nazvanie-yachejjki-tablicy.html)

Questioner 12.02.2011 16:15

Название ячейки таблицы
 
Вот я пишу код :
<script>

function f(tableName) {

alert(tableName)

}

</script>

<table>

	<tr>

		<td name="1x1" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x2" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x3" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x4" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x5" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x6" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x7" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x8" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x9" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x10" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x11" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x12" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x13" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x14" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x15" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x16" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x17" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x18" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x19" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x20" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x21" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x22" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x23" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x24" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x25" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x26" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x27" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x28" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x29" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="1x30" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

	</tr>
	
		<tr>

			<td name="2x1" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x2" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x3" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x4" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x5" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x6" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x7" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x8" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x9" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x10" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x11" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x12" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x13" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x14" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x15" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x16" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x17" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x18" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x19" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x20" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x21" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x22" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x23" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x24" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x25" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x26" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x27" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x28" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x29" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

			<td name="2x30" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

	</tr>
	
	<tr>

		<td name="3x1" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x2" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x3" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x4" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x5" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x6" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x7" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x8" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x9" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x10" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x11" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x12" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x13" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x14" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x15" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x16" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x17" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x18" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x19" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x20" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x21" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x22" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x23" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x24" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x25" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x26" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x27" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x28" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x29" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

		<td name="3x30" border="1" onclick="f(this.name)">Все козлы большие!!!</td>

	</tr>

</table>


По идее при клике должно выводится сообщение с координатами ячейки. Почему выводится "underfined"?

NoResponse 12.02.2011 17:01

у тега td нет свойства name
используйте id
<script>
function f(tableName) {
alert(tableName)
}
</script>
<table>
    <tr>
        <td id="1x1" border="1" onclick="f(this.id)">Все козлы большие!!</td>
        <td id="1x2" border="1" onclick="f(this.id)">Все козлы большие!!</td>
    </tr>
    <tr>
        <td id="2x1" border="1" onclick="f(this.id)">Все козлы большие!!</td>
        <td id="2x2" border="1" onclick="f(this.id)">Все козлы большие!!</td>
    </tr>
</table>

Questioner 12.02.2011 19:34

Спасибо!

Aetae 12.02.2011 22:22

Фигнестрадание)
Пример: типа универсальный вариант
<style type="text/css">td {width:20px;height:20px;background:#ddf;border:1px solid #99c}</style>

<table id="tbl">
 <tr>
 <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
 </tr>
 <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
 </tr>
 <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
 </tr>
 <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
 </tr>
 </tr>
 <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
 </tr>
</table>


<script type="text/javascript">
(function(id){
  var table=document.getElementById(id),trs=table.getElementsByTagName('TR'),tds=[null];
  for(var i=0;i<trs.length;i++)tds.push(trs[i].getElementsByTagName('TD'));
  table.onclick=function(e){
   var td=e?e.target:window.event.srcElement;
   if(td.tagName=='TD'){
    var tr=td.parentNode,i=j=0;
    while(trs[j++]!==tr);
    while(tds[j][i++]!==td);
    alert(j+'x'+i)
    }
  }
})('tbl')
</script>

Questioner 15.02.2011 21:44

А что значит [object HTMLTableCellElement] при
<script>
function f(tablName) {
alert(tablName)
}
</script>
<table>
<tr>
<td onclick="f(this)">...текст...</td>
</tr>
</table>

Aetae 16.02.2011 01:12

[object HTMLTableCellElement]
объект: ХТМЛ Элемент: Ячейка Таблицы
Английский же.

monolithed 16.02.2011 09:58

Aetae, на всякий))

<script type="text/javascript">
window.onload = function() {
     table = document.getElementById('table'), tr = table.rows, i = tr.length;
     while(i--) {
         td = tr[i].cells, j = td.length;
         while(j--) {
             td[j].onclick = (function(i, j) {
                 return function() {
                     alert(i+'x'+j); //tr[i].rowIndex+'x'+td[j].cellIndex
                 };
             })(i, j);
         }
     }
 };
</script>


<style type="text/css">td {width: 20px; height: 20px; background:#ddf; border: 1px solid #99c; }</style>

<table id="table">
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
    </tr>
</table>


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