可点击表行
问题描述:
我有这样的结构:可点击表行
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>
,并在图像上单击开始灯箱效果。
这里是你的代码工作片断
jQuery('tr').bind('click', function() {
var p = jQuery(this);
p.find('td:last a')[0].click()
});
问题来自于一个事实,即
p.children('td').children('a')
会返回一个数组。
我试过用纯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>
+0
非常感谢!你救了我的一天:) – kitz
答
这里是你的代码工作片断
jQuery('tr').bind('click', function() {
var p = jQuery(this);
p.find('td:last a')[0].click()
});
问题来自于一个事实,即
p.children('td').children('a')
会返回一个数组。
答
我试过用纯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>
+0
非常感谢!你救了我的一天:) – kitz
我认为你的问题是你不会取消在''处理程序中冒泡的事件。然后,这会引发''处理程序,这会导致它无限递归。在'a.onclick'处理程序中尝试'return false;'。 –
+0
A
+0
相关文章
- 1. Vue+Elmement点击表格可编辑
- 2. android设置列表项不可点击
- 3. 使用表格整行做为可点击跳转
- 4. elementui 表格点击展开行
- 5. 输入框不可点击
- 6. UILabel文字可点击
- 7. span设置不可点击
- 8. android EditText 的不可编辑可点击
- 9. JavaScript-点击表格的表头进行排序
- 10. 提交按钮默认不可点击,表单input输入正确后才可点击
- 11. element表格点击行即选中该行复选框
- 12. react 列表 点击 demo
- 13. CSS实现鼠标不可点击,样式设置以及不可点击事件的行为(查看模式)
- 14. ListView不可点击item,或点击后背景色不变
- 15. 点击回退时须要点击2次才可返回js
- 16. 点击行回填数据
- 17. Angular4_点击tr选中行
- 18. layui点击按钮添加可编辑行
- 19. htmlunit 点击复选框进行选择和模拟点击
- 20. layui table 行点击事件与列点击事件冲突
- 21. jquery动态去读数据生成表格,可以点击表头排序,整个表格可以拖动
- 22. React实现点击按钮,表格添加一行的效果
- 23. element ui table(表格)点击一行展开
- 24. jQuery 点击表格一行背景变色与恢复
- 25. ice-design table表格点击行选中,给定选中样式
- 26. 【Vue】element表格嵌套内容点击展开、收起一行
- 27. react-antd中Table表单点击行的问题
- 28. vue控制表格点击就添加一行
- 29. UILabel部分文字可点击
- 30. iOS 之富文本可点击
每日一句
每一个你不满意的现在,都有一个你没有努力的曾经。
最新问题
-
1. Asp.net +剃刀2 + MySQL的&的iFrame显示
-
2. DNS/Route53 - 配置记录并处理www
-
3. 电话号码没有得到验证的JavaScript
-
4. 的Symfony2在督促
-
5. 斯卡拉隐式转换为有效宏内的一元值
-
6. Swift 4和Firebase中的信号量建议
-
7. 如何在应用程序启动期间获取位置
-
8. 什么让使用PHP的preg_match
-
9. 你好我正在使用离子科尔多瓦
-
10. 如何将双纬和双经度设置为数组
- 1. Vue+Elmement点击表格可编辑
- 2. android设置列表项不可点击
- 3. 使用表格整行做为可点击跳转
- 4. elementui 表格点击展开行
- 5. 输入框不可点击
- 6. UILabel文字可点击
- 7. span设置不可点击
- 8. android EditText 的不可编辑可点击
- 9. JavaScript-点击表格的表头进行排序
- 10. 提交按钮默认不可点击,表单input输入正确后才可点击
检查这个答案http://*.com/questions/17147821/how-to-make-a-whole-row-in-a-table-clickable-as-a-link –
回答
这里是你的代码工作片断
问题来自于一个事实,即
会返回一个数组。
我试过用纯javascript解决方案。它的工作
非常感谢!你救了我的一天:) – kitz
相关问题