Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   поиск значения в определенной ячейке по клику на строке (https://javascript.ru/forum/jquery/44984-poisk-znacheniya-v-opredelennojj-yachejjke-po-kliku-na-stroke.html)

bigjoy 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 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 09.02.2014 20:07

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

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

рони 10.02.2014 10:58

:write: :)
<!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>


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