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

css, html, javascript, jquery

Solution

$("#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/

Problem

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?

Original source