Clickable table row

Question

I have this structure:

jQuery('tr').bind('click', function() {
  var p = jQuery(this);
  p.children('td').children('a').click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="88">A</td>
      <td width="88">B</td>
      <td width="88">C</td>
      <td width="88">D</td>
      <td width="88">E</td>
      <td width="88">F</td>
      <td width="88">G</td>
    </tr>
    <tr>
      <td align="right">content A1</td>
      <td align="right">content B1</td>
      <td align="right">content C1</td>
      <td align="right">content D1</td>
      <td align="right">content E1</td>
      <td>content F1</td>
      <td>
        <a href="http://google.com" target="_blank">google</a>
      </td>
    </tr>
    <tr>
      <td align="right">content A2</td>
      <td align="right">content B2</td>
      <td align="right">content C2</td>
      <td align="right">content D2</td>
      <td align="right">content E2</td>
      <td>content F2</td>
      <td>
        <a href="http://facebook.com" target="_blank">facebook</a>
      </td>
    </tr>
  </tbody>
</table>

I want to programmatically call the click on <a> tag when I click on the table line.

Till now my code runs in a stack overflow error:

Uncaught RangeError: Maximum call stack size exceeded

P.S. In my real code the a tag looks like this:

<a href="image_url" data-lightbox="image-1">
 <img src="thumb_image_url" />
</a>

and click on the image starts a lightbox effect.

I think your problem is that you don't cancel bubbling of the event in the `` handler. This then bubbles up to the `` handler, which causes it to infinitely recurse. Try `return false;` in the `a.onclick` handler. — Klemen Slavič, May 15 '16 at 08:17
check this answer http://stackoverflow.com/questions/17147821/how-to-make-a-whole-row-in-a-table-clickable-as-a-link — Ranjeet Singh, May 15 '16 at 08:33

score 2 · Accepted Answer · answered May 15 '16 at 08:45

2

Here is the working snippet

jQuery('tr').bind('click', function() {
  var p = jQuery(this);
  p.find('td:last a')[0].click()
});

The issue in your code comes from the fact that

 p.children('td').children('a')

will return an array.

answered May 15 '16 at 08:45

Andrei Madalin Butnaru

3,924
2
13
7

score 1 · Answer 2 · answered May 15 '16 at 08:34

I tried with pure javascript solution. It's working

//jQuery('tr').bind('click', function() {
//  var p = jQuery(this);
//  p.children('td').children('a').click();
//});

var tr = document.querySelectorAll('tr');

if (tr) {
  for (var i = 0; i < tr.length; i++) {
    var element = tr[i];
    element.addEventListener('click', clickedTr, false);
  }
}

function clickedTr() {
  var td_a = this.querySelectorAll('td a');
  if (td_a) {
    for (var i = 0; i < td_a.length; i++) {
      alert(td_a[i]);
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="88">A</td>
      <td width="88">B</td>
      <td width="88">C</td>
      <td width="88">D</td>
      <td width="88">E</td>
      <td width="88">F</td>
      <td width="88">G</td>
    </tr>
    <tr>
      <td align="right">content A1</td>
      <td align="right">content B1</td>
      <td align="right">content C1</td>
      <td align="right">content D1</td>
      <td align="right">content E1</td>
      <td>content F1</td>
      <td>
        <a href="http://google.com" target="_blank">google</a>
      </td>
    </tr>
    <tr>
      <td align="right">content A2</td>
      <td align="right">content B2</td>
      <td align="right">content C2</td>
      <td align="right">content D2</td>
      <td align="right">content E2</td>
      <td>content F2</td>
      <td>
        <a href="http://facebook.com" target="_blank">facebook</a>
      </td>
    </tr>
  </tbody>
</table>

Clickable table row

2 Answers2