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

debugcn Published at Dev

Jacob Chong

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

Khyati

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.