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

Question

Highlight is not function in the web browser. What is the problem of this codes ? Basically, I want to do something highlighted the table row and then post the value of table row to another php page.

test.html

<html>
<head>
<link href="test.css" rel="stylesheet" type="text/css" />
<script src="test.js" type="text/javascript"></script>
</head>
<body>
<table id="table">
    <tr>
        <td>1 Ferrari F138</td>
        <td>1 000€</td>
        <td>1 200€</td>
        <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
        <td>1</td>
        <td>F138</td>
        <td>Klik pre detaily</td>
    </tr>
    <tr>
        <td>2 Ferrari F138</td>
        <td>1 000€</td>
        <td>1 200€</td>
        <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
        <td>1</td>
        <td>F138</td>
        <td>Klik pre detaily</td>
    </tr>
    <tr>
        <td>3 Ferrari F138</td>
        <td>1 000€</td>
        <td>1 200€</td>
        <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
        <td>1</td>
        <td>F138</td>
        <td>Klik pre detaily</td>
    </tr>
</table>

    <input type="button" id="tst" value="OK" onclick="fnselect()" />
</body>
</html>

test.js

function highlight(e) {
    if (selected[0]) selected[0].className = '';
    e.target.parentNode.className = 'selected';

}

var table = document.getElementById('table'),
    selected = table.getElementsByClassName('selected');
table.onclick = highlight;

function fnselect(){
var $row=$(this).parent().find('td');
    var clickeedID=$row.eq(0).text();
   // alert(clickeedID);
}

$("#tst").click(function(){
    var value =$(".selected td:first").html();
    value = value || "No row Selected";
    alert(value);
});

test. css

td {border: 1px #DDD solid; padding: 5px; cursor: pointer;}

.selected {
    background-color: brown;
    color: #FFF;
}

http://stackoverflow.com/questions/24750623/select-a-row-from-html-table-and-send-values-onclick-of-a-button You can check this question — Anuj Kumar, Apr 27 '16 at 05:24
yup, i had checked, but the highlight function is not perform, i don't know what is the problem error from these code. — Jacob Chong, Apr 27 '16 at 05:26
Seems to be working fine from just pasting your code into jsfiddle. You may not be including the css path correctly, or may be getting another error. — TomDillinger, Apr 27 '16 at 05:27
You have a number of problems with your code. You should use console.log in your JavaScript to debug what is going wrong. For instance, start with seeing if things actually get selected or clicked by using console.log. Also, just with a couple console.logs, I noticed that you haven't even included a jquery script, so you can't use jquery (that $-sign). Try googling around for some tutorials on the basics. Maybe W3Schools, search for onclick. — user3773048, Apr 27 '16 at 05:28
Ah, yes - if you're not including jQuery then your code will not work, as it appears to be jQuery dependant. Here is my working sample: https://jsfiddle.net/xxd0zraw/ — TomDillinger, Apr 27 '16 at 05:29

score 1 · Accepted Answer · answered Apr 27 '16 at 05:53

You don't need fnselect() function

modify your js as :

window.onload = function () {
    function highlight(e) {
        if (selected[0]) selected[0].className = '';
        e.target.parentNode.className = 'selected';    
    }    
    var table = document.getElementById('table'),
        selected = table.getElementsByClassName('selected');
    table.onclick = highlight;

        $("#tst").click(function () {
        var value = $(".selected td:first").html();
        value = value || "No row Selected";
        alert(value);
    });
};

also add jquery in your html before the other test.js in head:

and finally make one of the row default selected.

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

1 Answers1