поиск значения в определенной ячейке по клику на строке
Добрый день!
Столкнулся с проблемкой -есть таблица <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 Спасибо! |
Обязательно 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>
|
Не важно, только у меня клик по изображению в ячейке, а не по самой ячейке
|
Цитата:
<!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>
|
: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, время: 19:23. |