Форум

yngwie19 · #1 (**permalink**) 16.08.2010, 21:55

Здравствуйте, у меня есть таблица <table> состоящая из столбцов и строк, в каждой ячейке таблицы у меня вложен <div> и <span>, т.е

<table>
     <tr>
             <td><div><span></span></div></td>
             <td><div><span></span></div></td>
             <td><div><span></span></div></td>
             <td><div><span></span></div></td>
     <tr>
      <tr>
             <td><div><span></span></div></td>
             <td><div><span></span></div></td>
             <td><div><span></span></div></td>
             <td><div><span></span></div></td>
     <tr>
.
.
.
.
.
.
<table>

1) мне нужно сделать так, чтобы при клике по ячейке во вложенный элемент <span> записывался определенный текст. Подскажите как сделать так, чтобы для каждой ячейки не вешать обработчик onClick(), может можно это сделать одним каким-нибудь шаблонным образом?
2) как при клике на ячейку передать ссылку на элемент TD, и записать текстовое значение в <span> ?

рони · #2 (**permalink**) 17.08.2010, 01:01

примерно так ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
<style type="text/css">
td{
  height: 20px; width: 150px; border: solid #000000 1px
}
</style>
</head>

<body>
 <table id="tb">
     <tr>
             <td><div><span></span></div></td>
             <td><div><span></span></div></td>
             <td><div><span></span></div></td>
             <td><div><span></span></div></td>
     </tr>
      <tr>
             <td><div><span></span></div></td>
             <td><div><span></span></div></td>
             <td><div><span></span></div></td>
             <td><div><span></span></div></td>
     </tr>

</table>
<script language="JavaScript" type="text/javascript">
var tb = document.getElementById("tb");
tb.onclick = function (a) {
    if (!a) a = window.event;
    a = a.target || a.srcElement;
    if (a.tagName == "TD") a.getElementsByTagName('span')[0].innerHTML = "\u0412\u0441\u044f\u043a\u0438\u0435 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043b\u043e\u0432\u0430";
};
</script>
</body>

</html>

yngwie19 · #3 (**permalink**) 17.08.2010, 08:39

Спасибо большое за пример, есть вопросики по нему.
1) Когда вы пишите

var tb = document.getElementById("tb");
tb.onclick = function(а)...

то это значит, что мы всей таблице назначаем обработчик события при клике?
2) Подскажите пожалуйста, что представляет из себя аргумент функции 'а' ?
3) Объясните пожалуйста смысл этой инструкции

a = a.target || a.srcElement;

Спасибо Вам еще раз, это то что мне нужно!!!!

Kolyaj · #4 (**permalink**) 17.08.2010, 08:44

http://javascript.ru/tutorial/events

Форум

Справочник

Discord чат

Курсы javascript