Question

可点击的表格行

2016-05-15

289

javascript jquery html

我有这个结构：

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>

当我单击表格行时，我想以编程方式调用单击 <a> 标签。

到目前为止，我的代码在堆栈溢出错误中运行：

Uncaught RangeError: Maximum call stack size exceeded

附注：在我的实际代码中， a 标签如下所示：

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

单击图像会启动灯箱效果。

Answer 1

这是工作代码片段

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

代码中的问题来自于

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

将返回一个数组。

Answer 2

我尝试使用纯 javascript 解决方案。它有效

//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>