Question

我有这个结构：

＆＃13;

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

＆＃13;

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

＆＃13;

当我点击表格行时，我想以编程方式调用<a>标记上的点击。

直到现在我的代码在堆栈溢出错误中运行：

Uncaught RangeError: Maximum call stack size exceeded

P.S。在我的真实代码中，a标记如下所示：

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

然后点击图片就会启动灯箱效果。

Answer 1

我尝试使用纯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>

Answer 2

以下是工作代码段

 public function store(Request $request)
{
   Artisan::call("php artisan infyom:scaffold {$request['name']} --fieldsFile=public/Product.json");
}

您的代码中存在的问题是

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

将返回一个数组。

可点击的表格行

2 个答案: