Clickable table row linked to url

Question

I am looking to see if there is a more updated solution to a similar problem here by following ECMAScript 6.

Suppose I have a table with a row as following:

<tbody>
        <tr>
            <td>Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
        </tr>
</tbody>

and a link contained in url. How do I make the entire row (not just the data cell) clickable leading to the page url, using Javascript? Thanks.

Ed Nolan · Accepted Answer · 2020-11-23T04:01:32.263

I'm not too sure what you mean by entire row(not just the data cell). Are you wanting to actually display the html code on the screen? Is that what you mean by entire row?

If you are just wanting the Row 1 Cell 1 as a hyperlink then this code below might help.

yourjavascriptpage.js or use the upper section of code below in yourphpfile.php as echo

"<div class='link'><a href=\"../cell1.php\">Row 1 Cell 1</a></div>";
    "<div class='link2'><a href=\"../cell2.html\">Row 1 Cell 2</a></div>";
    "<div class='link3'><a href=\"../banners/cell3.php\">Row 1 Cell 3</a></div>";

document.getElementById("link").innerHTML = "Row 1 Cell 1";
document.getElementById("link2").innerHTML = "Row 1 Cell 2";
document.getElementById("link3").innerHTML = "Row 1 Cell 3";

yourhtmlpage.html

<td><div  id="link"></div></td>
<td><div  id="link2"></div></td>
<td><div  id="link3"></div></td>

or maybe you are looking for something like this ....

var link = "Row 1 Cell 1";
var link2 = "Row 1 Cell 2";
var link3 = "Row 1 Cell 3";
var result1 = link.link("https://www.gosomewhere.com");
var result2 = link2.link("https://www.gosomewhere.com");
var result3 = link3.link("https://www.gosomewhere.com");

Or here is a complete javascript solution I found online for you https://www.robertcooper.me/table-row-links

Thanks. The old solution using plain HTML in the link sets the same anchor to all cell data in the row. So, it will works only if I click exactly on the cell data (in this case ```Row 1 Cell 1```, etc). If I click anywhere on the row but not exactly on the cell data, I can not jump to the ```url``` page. That is what I mean by *clicking the entire row*. I am looking for a JavaScript solution because in my app, the links and rows are dynamically generated. Thanks again. — Tristan Tran, Nov 23 '20 at 03:30

score 1 · Answer 2 · answered Nov 23 '20 at 03:11

similar the answer as above, I am not sure what you want? I just revise the code here

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(function(){
     $(".table").on("click", "tr[role=\"button\"]", function (e) {
          window.location = $(this).data("href");
     });
});
</script>
<style>
[data-href] { cursor: pointer; }
</style>
<table class="table table-striped table-hover">
    <tbody>
        
            <tr role="button" data-href="http://127.0.0.1:8080/">
                <td>Row 1 Cell 1</td>
                <td>Row 1 Cell 2</td>
                <td>Row 1 Cell 3</td>
            </tr>
        
    </tbody>
</table>


</head>

you should change the code data-href="" to any url you want

Clickable table row linked to url

2 Answers2