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;
}

stackoverflow.com/questions/24750623/… You can check this question — Anuj Kumar
– Anuj Kumar, Commented Apr 27, 2016 at 5: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
– Jacob Chong, Commented Apr 27, 2016 at 5: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
– TomDillinger, Commented Apr 27, 2016 at 5: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
– user3773048, Commented Apr 27, 2016 at 5: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: jsfiddle.net/xxd0zraw — TomDillinger
– TomDillinger, Commented Apr 27, 2016 at 5:29

Khyati · Accepted Answer · 2016-04-27 05:53:37Z

1

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.

answered Apr 27, 2016 at 5:53

Khyati

2311 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related