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