Select a row from html table and send values onclick of a button

Question

I have HTML table where I need to select a row and send its first cell ID to a button and onclick of the button send the selected value to a function in Javascript. How can I achieve this?

test.html :

<table id="table">         <tr>             <td>1 Ferrari F138</td>             <td>1 000€</td>             <td>1 200€</td>          </tr>         <tr>             <td>2 Ferrari F138</td>             <td>1 000€</td>             <td>1 200€</td>          </tr>         <tr>             <td>3 Ferrari F138</td>             <td>1 000€</td>             <td>1 200€</td>          </tr>     </table>     <input type="button" id="tst" value="OK" onclick="fnselect()" /> 

test.js :

var table = document.getElementById('table'),     selected = table.getElementsByClassName('selected'); table.onclick = highlight; function highlight(e) {     if (selected[0]) selected[0].className = '';     e.target.parentNode.className = 'selected'; } function fnselect(){ var $row=$(this).parent().find('td');     var clickeedID=$row.eq(0).text();     alert(clickeedID); } 

test.css :

td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}  .selected {     background-color: brown;     color: #FFF; } 

This is a fiddle of my problem JSFIDDLE

I need to send the selected row's first cell value to a javascript function. But when the user selects a row and clicks on 'OK' button I should send the value to the function. How to do this?

Answer 1

$("#table tr").click(function(){    $(this).addClass('selected').siblings().removeClass('selected');        var value=$(this).find('td:first').html();    alert(value);     });  $('.ok').on('click', function(e){     alert($("#table tr.selected td:first").html()); }); 

Demo:

http://jsfiddle.net/65JPw/2/

Answer 2

You can access the first element adding the following code to the highlight function

$(this).find(".selected td:first").html()

Working Code:JSFIDDLE