Получить id строки, по которой кликнули

161

22 февраля 2018, 12:48

Имеется следующий код:

<div id="content">
    <table>
        <tr>
            <th>Номер</th>
            <th>Наименование</th>
            <th>Описание</th>
            <th>Цена</th>
        </tr>
        <c:forEach items="${products}" var="product">
            <tr onclick="show('block')">
                <td>${product.id}</td>
                <td>${product.name}</td>
                <td>${product.description}</td>
                <td>${product.price}</td>
            </tr>
        </c:forEach>
    </table>

</div>

Как получить id нажатой строки таблицы и вывести его хотя бы в алерт?

Answer 1

Если в лоб, средствами jquery то так:

...
<tr onclick="alert($(this).find('td').first().text());">
...

т.е. показываем значение первой колонки в строке. Вообще лучше id положить в атрибут какой-нибудь

Answer 2

На чистом js

var row = document.getElementsByTagName('tr'); 
 
[].forEach.call(row, function(elem){ 
    elem.addEventListener('click', function (el) {  
        alert(this.children[0].innerHTML);   
    }) 
});

<div id="content"> 
 
    <table> 
        <tr> 
            <th>Номер</th> 
            <th>Наименование</th> 
            <th>Описание</th> 
            <th>Цена</th> 
        </tr> 
 
        <tr> 
            <td>1</td> 
            <td>name 1</td> 
            <td>desc 1</td> 
            <td>price 1</td> 
        </tr> 
         
        <tr> 
            <td>2</td> 
            <td>name 2</td> 
            <td>desc 2</td> 
            <td>price 2</td> 
        </tr> 
         
        <tr> 
            <td>3</td> 
            <td>name 3</td> 
            <td>desc 3</td> 
            <td>price 3</td> 
        </tr> 
 
 
    </table> 
 
 
</div>

На jquery

$('tr').on('click', function(){ 
  alert($(this).children('td:first-child').text()); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="content"> 
 
    <table> 
        <tr> 
            <th>Номер</th> 
            <th>Наименование</th> 
            <th>Описание</th> 
            <th>Цена</th> 
        </tr> 
 
        <tr> 
            <td>1</td> 
            <td>name 1</td> 
            <td>desc 1</td> 
            <td>price 1</td> 
        </tr> 
         
        <tr> 
            <td>2</td> 
            <td>name 2</td> 
            <td>desc 2</td> 
            <td>price 2</td> 
        </tr> 
         
        <tr> 
            <td>3</td> 
            <td>name 3</td> 
            <td>desc 3</td> 
            <td>price 3</td> 
        </tr> 
 
 
    </table> 
 
 
</div>

Answer 3

<script>
$(document).ready(function(){ //Стартует по загрузке
    $('#tblExport td').click(function(){// Запускаем по клику на ячейке.
        //Узнаем индекс строки + индекс ячейки таблицы
        alert( 'Вы нажали  '+$(this).parent('tr').index()+ ' строку');
    });
});