Форум

bigjoy · #1 (**permalink**) 09.02.2014, 19:13

Добрый день!
Столкнулся с проблемкой -есть таблица

<table>
<tr>
<td>Информация 1</td>
<td> <img class='test' src="test.jpeg"></td>
</tr>
<tr>
<td> Информация 2</td>
<td><img  class='test' src="test.jpeg"></td>
</tr>
<tr>
<td>Информация 3 </td>
<td> <img  class='test' src="test.jpeg"></td>
</tr>
</table>

Нужно, что бы при нажатии в ячейках на изображение выводился alert с нужной инфо.
Пример нажатие на нажав на изображение в стоке 2 - выдаст алерт - Информация 2
Спасибо!

danik.js · #2 (**permalink**) 09.02.2014, 19:45

Обязательно jQuery?

<table>
<tr>
<td>Информация 1</td>
<td> 1</td>
</tr>
<tr>
<td> Информация 2</td>
<td> 2</td>
</tr>
<tr>
<td>Информация 3 </td>
<td> 3</td>
</tr>
</table>
<script>
(function(){
    var table = document.querySelector('table');
    var onCellClick = function() {
        // var info = this.previousElementSibling.textContent;
        var info = this.parentNode.cells[0].innerHTML;
        alert(info);
    }
    for (var i = 0; i < table.rows.length; i++) {
        var cell = table.rows[i].cells[1];
        cell.onclick = onCellClick;
    }
})();
</script>

bigjoy · #3 (**permalink**) 09.02.2014, 20:07

Не важно, только у меня клик по изображению в ячейке, а не по самой ячейке

ksa · #4 (**permalink**) 10.02.2014, 09:28

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

только у меня клик по изображению в ячейке, а не по самой ячейке

Ну так поменяй немного и все дела...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table>
	<tr>
	<td>Информация 1</td>
	<td><img class='test' src="test.jpeg" /></td>
	</tr>
	<tr>
	<td> Информация 2</td>
	<td><img class='test' src="test.jpeg" /></td>
	</tr>
	<tr>
	<td>Информация 3 </td>
	<td><img class='test' src="test.jpeg" /></td>
	</tr>
</table>
<script>
(function(){
    var table = document.querySelector('table');
    var onCellClick = function() {
        var info = this.parentNode.parentNode.cells[0].innerHTML;
        alert(info);
    }
    for (var i = 0; i < table.rows.length; i++) {
        var cell = table.rows[i].cells[1].getElementsByTagName('img')[0];
        cell.onclick = onCellClick;
    }
})();
</script>
</body>
</html>

рони · #5 (**permalink**) 10.02.2014, 10:58

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table>
	<tr>
	<td>Информация 1</td>
	<td><img class='test' src="test.jpeg" /></td>
	</tr>
	<tr>
	<td> Информация 2</td>
	<td><img class='test' src="test.jpeg" /></td>
	</tr>
	<tr>
	<td>Информация 3 </td>
	<td><img class='test' src="test.jpeg" /></td>
	</tr>
</table>
<script>
(function () {
    var tds = document.querySelectorAll('table tr td:first-child'),
        imgs = document.querySelectorAll('table img'),
        onImgClick = function (i) {
        return function () {
            alert(i);
        }
    };
    for (var i = 0; i < imgs.length; i++) {
        var info = tds[i].innerHTML;
        imgs[i].onclick = onImgClick(info);
    }
})()
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript