Как я могу получить значения TD внутри таблицы HTML?
т.е.
| ID | cell 1 | cell 2 | | 1 | aaaa | a2a2a2 | | 2 | bbbb | b2b2b2 | | 3 | cccc | c2c2c2 | Итак, теперь, если я нажимаю на значение ячейки: «bbbb», я хочу получить все значения выбранной строки:
$id='2'; $cell_1='bbbb'; $cell_2='b2b2b2';
ПРИМЕЧАНИЕ. Я хотел бы использовать JavaScript, а не jQuery.
Вы можете использовать event.target.innerText для javascript и $ (event.target) .text () для jQuery, jQuery – это предпочтительное решение, поскольку оно поддерживает кросс-браузерные возможности .
Использование только javascript
Демо-версия
Html
<table id="tableID" onclick="myFun(event)" border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
Javascript
function myFun(e){ alert(e.target.innerText); //current cell alert(e.target.parentNode.innerText); //Current row. }
Использование jQuery
Демо-версия
Html
<table id="tableID" border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
Javascript
$('#tableID').click(function(e){ alert($(e.target).text()); // using jQuery })
var table = document.getElementById('tableID'), cells = table.getElementsByTagName('td'); for (var i=0,len=cells.length; i<len; i++){ cells[i].onclick = function(){ console.log(this.innerHTML); /* if you know it's going to be numeric: console.log(parseInt(this.innerHTML),10); */ } }
отсюда
Использование jquery будет легко ..
$("#tableId").find("td").click(function(event){ var listOfCell=$(this).siblings(); for(i=0;i<listOfCell.length;i++){ alert($(listOfCell[i]).text()); } });
Надеюсь, это поможет вам. Он содержит скрипт кросс-браузера.
<html> <head> <script type="text/javascript"> function myFun(e){ if(!e.target) alert(e.srcElement.innerHTML); else alert(e.target.innerHTML); } </script> </head> <body> <table id="tableID" onclick="myFun(event)" border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </body> </html>