0

I am dynamically creating a table and want to have every row clickable and link to an URL and open the URL after clicking.

I figured out to create the table and set every row as clickable-row with bootstrap.

        // Table Body
        var tableBody = document.createElement('tbody');
        tableData.forEach(function(rowData) {
            var row = document.createElement('tr');
            var IntegrityURL = "integrity://lanwinsvmks1.eu.adglob.net:8001/im/viewissue?selection=";
            var ReqURL = IntegrityURL.concat(rowData[0]);
            row.setAttribute("class", "clickable-row");
            row.setAttribute("href", ReqURL);
            rowData.forEach(function(cellData) {
                var cell = document.createElement('td');
                var context = getColor(cellData);
                cell.setAttribute("bgcolor",context);
                cell.appendChild(document.createTextNode(cellData));
                row.appendChild(cell);
            });
            tableBody.appendChild(row);
        });

I also set up a click function in doc.ready:

    $('#OverviewTable tr').click(function() {
        var href = $(this).find("tr").attr("href");
        if(href) {
            window.location = href;
        }
    });

The result in html looks right, but the row is not clickable and the click() function is not called.

What am I missing?

enter image description here

3 Answers 3

1

You may try this: Please comment below if you have any question.

$('.clickable-tr').on('click', function(){
  var myLink = $(this).attr('href');
  window.location.href = myLink;
});
.clickable-tr{
  cursor: pointer;
  background: #eee;
}

table{
  width: 100%;
}

thead tr th{
  text-align: left;
}

tr td{
  padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
    </tr>
  </thead>
  <tbody>
    <tr class="clickable-tr" href="https://stackoverflow.com">
      <td>
        Data 1 example
      </td>
      <td>Data 1 Example</td>
    </tr>
    
    <tr class="clickable-tr" href="https://stackoverflow.com">
      <td>
        Data 2 example
      </td>
      <td>Data 2 Example</td>
    </tr>
  </tbody>
</table>

Update: Explanation

In js code, we are targeting the element that has clickable-tr class. Then using $(this), we are saying that the only current element/click will be selected. Then using attr(), we are getting the current href attribute and use to redirect using the window.location.href.

9
  • This looks promissing but the function is still not called! I added an a href tag below the tr (beside the td) how do I dynamically add an <a href> ON the tr, like this -> <tr class "clickable-tr a href=URL> </tr>
    – mrpepper
    Sep 19, 2017 at 9:16
  • What function you are referring to? Sep 19, 2017 at 9:19
  • I want to create the table like this: <td> <a href="stackoverflow.com">Data 2 example</a> </td> or in my case like this: <tr> <a href="stackoverflow.com">Data 2 example</a> </tr> so that the Click function as you wrote it can find the a tag in the right position
    – mrpepper
    Sep 19, 2017 at 9:20
  • So you don't want the <a> tag? and just the <tr> with specified link? Sep 19, 2017 at 9:31
  • Yes! How do I write the click function if I do not have an <a> tag in the <tr> just like in my screen shot of the html above.
    – mrpepper
    Sep 19, 2017 at 9:33
0

You can try for this:

$(document).ready(function()
{
   $('#movies tr').each(function(i,e)
   {
      $(e).children('td:not(:last)').click(function()
      {
         //here we are working on a td element, that's why we need
         //to refer to its parent (tr) in order to find the <a> element
         var href = $(this).closest("tr").find("a").attr("href");
         if(href)
         {
            window.location = href;
         }              
      });
   });
});
0

hmm could be that your:

var href = $(this).find("tr").attr("href");

should be:

var href = $(this).attr("href");

as 'this' is already the 'tr' element with the href attr

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.