Make entire row clickable

Question

I am trying to make the entire row of a table clickable. I have looked at a bunch of tutorials and they all seem pretty simple but I can't seem to get it to work. I tried DoNav and that didn't work, the simple onclick attribute doesn't work, what am I doing wrong? I am using mysql, php, and html. Thank you for your help!

echo '<table>';
        echo '<tr>';
            echo '<th>Name</th><th>Checked In?</th><th>ID</th>';
        echo '</tr>';
         while($row = $CheckedIn->fetch_assoc()){

            echo '<tr onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this,false);" onclick="document.location="www.engineering.us/gena/details.php";">';
            echo '<td align="left">';

            echo $row['ChildName'];

            echo '</td>';
            echo '<td align="center">';
        ;
            echo $row['checkedin'];

            echo '</td>';
            echo '<td align="center">';

            echo $row['P_Id'];

            echo '</td>';
            echo '</tr>';

    }
    echo '</table>'; 

Answer 1

onclick="document.location="www.engineering.us/gena/details.php";"

this should be

onclick="document.location='www.engineering.us/gena/details.php';"

Also another tip, you have more HTML than php, so it is better to use multiple php tags rather than echo called many times. That way it would be little easier to find such mistakes.

Edit You should also escape the apostrophe in case you are still going with php

Answer 2

Picking up from what georoot said, use PHP within your HTML. It makes the markup a lot more readable and usually allows your program to add syntax highlighting, making it easier to read. I've added two additional classes (" js-table " and " table-tr ") which I'll explain in a bit. Another important point is that the URL is in a new attribute on the table row: data-url .

<table class="js-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Checked In?</th>
            <th>ID</th>
        </tr>
    </thead>
    <tbody>
        <?php while ($row = $CheckedIn->fetch_assoc()): ?>
        <tr class="table-tr" data-url="http://www.engineering.us/gena/details.php">
            <td><?php echo $row['ChildName']; ?></td>
            <td><?php echo $row['checkedin']; ?></td>
            <td><?php echo $row['P_Id']; ?></td>
        </tr>
        <?php endwhile; ?>
    </tbody>
</table>

The " table-tr " class allows us to target the table rows in CSS. There is no need to use JavaScript for something so simple. Even changing the colour of the text within the table cell is very easy in CSS. This technique has the other advantage that it can be easily changed without having to modify any HTML, PHP or JavaScript - it's a purely stylistic thing.

.table-tr:hover {
    background-color: red;
}

Finally, since you're using jQuery, we can take advantage of that new " js-table " class. The "js-" prefix states that the class is used for binding functionality and it should not be styled. This script simply bind a click event to the table that listens out for a user clicking on a table row with the data-url attribute. When that happens, the page is re-directed (using window.location instead of document.location - it may work either way, but I've always used window.location ) to that URL. This allows you to change the URL later on or change it per row without having to change any of your JavaScript.

$(function () {

    $(".js-table").on("click", "tr[data-url]", function () {
        window.location = $(this).data("url");
    });

});

I hope that helps.

Answer 3

I think you should try to do that with JQuery.

HTML

<tr class="table-tr"></tr>

JQuery

$('.table-tr').on('click', function(){
    window.location = "your url here";
});

Answer 4

Consider using the following code:

$("#Table tr").click(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    var value = $(this).find('td:first').html();
    window.location.href = "url";
});

Where Table is the your table name and url is the address you want to navigate to

Answer 5

请以此来更改您的代码

<tr onclick="window.location.href=www.engineering.us/gena/details.php">