user3201640 user3201640 - 1 year ago 163
CSS Question

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

I have HTML table where I need to select a row and send its first cell ID to a button and

of the button send the selected value to a function in Javascript. How can I achieve this?

test.html :

<table id="table">
<td>1 Ferrari F138</td>
<td>1 000€</td>
<td>1 200€</td>

<td>2 Ferrari F138</td>
<td>1 000€</td>
<td>1 200€</td>

<td>3 Ferrari F138</td>
<td>1 000€</td>
<td>1 200€</td>

<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 = ''; = 'selected';
function fnselect(){
var $row=$(this).parent().find('td');
var clickeedID=$row.eq(0).text();

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 Source
$("#table tr").click(function(){
   var value=$(this).find('td:first').html();

$('.ok').on('click', function(e){
    alert($("#table tr.selected td:first").html());


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download