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?

RGS · Accepted Answer · 2014-07-15T06:00:10.737

48

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

edited Jul 15 '14 at 06:00

answered Jul 15 '14 at 05:53

RGS

5,131
6
37
65

I want to send the first cell value only after I click OK button. Not onclick of a row sir. That is where I am stuck. – user3201640 Jul 15 '14 at 05:56
@user3201640, I have updated my answer. Please check. – RGS Jul 15 '14 at 06:00
great. i added the code above inside a script tag . i have a html table. but when i select a row nothing happens . – Ace McCloud Feb 24 '16 at 23:12
@PrasaanthNeelakandan, Can you show your code in fiddle? – RGS Feb 25 '16 at 02:58
$("#table tr") .. could u explain this syntax ? i know #id is the id of the table ... but shud it be single quotes ? the second one ok button works in my app – Ace McCloud Feb 25 '16 at 17:12
1

@PrasaanthNeelakandan, You have dynamically added elements in DOM. Try the below code. $(document).on('click', '#table tr', function(){ alert($(this).find('td:first').html()) }); Go through what is event delegation in jquery. Second one satisfies the event delegation. – RGS Feb 25 '16 at 17:34
if it not works, may this will work: https://stackoverflow.com/questions/24750623/select-a-row-from-html-table-and-send-values-onclick-of-a-button/61338981#61338981 – SJX Apr 21 '20 at 08:22

Sunil Hari · Answer 2 · 2014-07-15T06:08:28.980

6

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

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

Working Code:JSFIDDLE

edited Jul 15 '14 at 06:08

answered Jul 15 '14 at 05:51

Sunil Hari

1,716
1
12
20

I want to send the first cell value only after I click OK button. Not onclick of a row sir. That is where I am stuck. – user3201640 Jul 15 '14 at 05:55
@user3201640:i did not find a button in the fiddle you shared – Sunil Hari Jul 15 '14 at 05:56
@user3201640:See this [fiddle](http://jsfiddle.net/sunil_hari/Z22NU/15/) and let me know if this is what you want – Sunil Hari Jul 15 '14 at 06:00
1

@user3201640:check this fiddle :) [Link](http://jsfiddle.net/sunil_hari/Z22NU/17/) – Sunil Hari Jul 15 '14 at 06:04

score 3 · Answer 3 · answered Jul 15 '14 at 05:57

3

check http://jsfiddle.net/Z22NU/12/

function fnselect(){

    alert($("tr.selected td:first" ).html());
}

answered Jul 15 '14 at 05:57

Dev

6,628
2
25
34

Herrand Voller · Answer 4 · 2021-03-14T19:03:13.227

    <html>
  <header>
         <style type="text/css">
       td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}
       .selected {
                  background-color: brown;
                  color: #FFF;
                  }
          </style>
 </header>
        <body>
        <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()" />
    
    <script>
        var table = document.getElementById('table');
        var selected = table.getElementsByClassName('selected');
        table.onclick = highlight;
    
    function highlight(e) {
        if (selected[0]) selected[0].className = '';
        e.target.parentNode.className = 'selected';
    }
    
    function fnselect(){
        var element = document.querySelectorAll('.selected');
        if(element[0]!== undefined){ //it must be selected
         alert(element[0].children[0].firstChild.data);
        }
    }
  </script>
 </body>
</html>

There is only one member with the class 'selected' in this list (NodeList), it is the element[0]. children is a htmlcollection of the 3 <td>'s (inside the <tr>), children[0] ist the first <td> at place [0] and .data is its value. (firstChild is the complete string in quotes.) If you use the console it is easy to find the properties you can use.

score 1 · Answer 5 · answered Mar 17 '23 at 09:02

Simple example using pure javascript

HTML:

<button onclick="getSelectedRow()">Snatch Data</button>
          <table id="mytable">
            <thead>
                <tr>
                    <th>Col1</th>
                    <th>Col2</th>
                    <th>Col3</th>
                    <th>Col4</th>
                    <th>Col5</th>
                </tr>
            </thead>
            <tbody>
                <tr onclick="highlight(this);">
                    <td>Row 1, Column 1</td>
                    <td>Row 1, Column 2</td>
                    <td>Row 1, Column 3</td>
                    <td>Row 1, Column 4</td>
                    <td>Row 1, Column 5</td>
                </tr>
                <tr onclick="highlight(this);">
                    <td>Row 2, Column 1</td>
                    <td>Row 1, Column 2</td>
                    <td>Row 1, Column 3</td>
                    <td>Row 1, Column 4</td>
                    <td>Row 1, Column 5</td>
                </tr>
                <tr onclick="highlight(this);">
                    <td>Row 3, Column 1</td>
                    <td>Row 1, Column 2</td>
                    <td>Row 1, Column 3</td>
                    <td>Row 1, Column 4</td>
                    <td>Row 1, Column 5</td>
                </tr>
            </tbody>
        </table>

JavaScript:

var SelectedRow = "";

function highlight(row) {
    SelectedRow=row.cells[0].textContent;
    deHighlight();
    row.style.backgroundColor = '#003F87';
    row.classList.toggle("selectedRow");
}

function deHighlight() { 
    let table = document.getElementById("mytable");
    let rows = table.rows;
    for (let i = 0; i < rows.length; i++) {
        rows[i].style.backgroundColor = "transparent";
    }   
}

function getSelectedRow() {
    alert(SelectedRow);
}

I know Im almost a decade late to the question but this small example just might help someone:)

score 0 · Answer 6 · answered Nov 18 '14 at 07:28

0

This below code will give selected row, you can parse the values from it and send to the AJAX call.

$(".selected").click(function () {
var row = $(this).parent().parent().parent().html();            
});

answered Nov 18 '14 at 07:28

Nalan Madheswaran

10,136
1
57
42

score 0 · Answer 7 · answered Apr 21 '20 at 08:21

In my case $(document).ready(function() was missing. Try this.

$(document).ready(function(){   
("#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());
    });
});

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

7 Answers7

Linked