可點擊錶行

Question

我有這樣的結構：

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>