点击<tr>表格行元素进行跳转

意外发现table中利用<a>标签控制tr的行为无效。

尝试<a>标签在table中的使用,只有在<td><a href=""></a><td>的情况下有效。

那么如何实现<tr>标签的点击跳转?使用jquery实现:

 1 <table>
 2 <tbody>
 3     <tr class="jump">
 4         <input type="hidden" href="jump.php"/>
 5         <td>1</td>
 6         <td>2</td>
 7     </tr>
 8 </tbody>
 9 </table>
10
11 /*jquery部分*/
12 <script>
13         $(".jump").click(function () {
14             location.href = $(this).children("input").attr("value");
15         });
16 </script>
时间: 2024-10-12 22:40:27

点击<tr>表格行元素进行跳转的相关文章

jquery实现的调整表格行tr上下顺序

jquery实现的调整表格行tr上下顺序:表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />

Vue -- element-ui el-table 点击tr项页面跳转,返回后缓存回显点击项

页面跳转反显 点击table tr项后,页面跳转到下级页面,返回回显搜索条件.当前页码.并将点击项select选中.滚动条也被记录回显跳转时滚动的位置 思路: 页面临时缓存我选择使用sessionStorage,点击tr行将搜索条件和页码,点击行的id进行存储 data(){ return { } } setSessionStore (name, content) { if (!name) return if (typeof content !== 'string') { content = J

miniui 给表格行添加监听事件的几种方法以及点击某列列名数据不能排序的问题

最近在使用miniui框架做开发,在做表格行的点击监听事件中发现了几个属性,都可以起到监听效果但是执行的结果却大有不同.好了废话不多说,直接上代码. <div id="pageGrid" class="mini-datagrid" style="width: 100%; height: 100%; border:0;" url="${ctx}/tAXINFO/queryRepeat" autoload="tru

javascript添加或者删除table表格行代码实例

javascript添加或者删除table表格行代码实例:表格是常用的元素,虽然在布局中已经鲜有使用,已经基本被div css所取代,但是在组织表格数据方面还是有很大的优势的,比使用div css要来的方便,添加或者删除一行也就是其中的tr更是最为常见的操作,下面就通过代码实例简单介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta

02 HTML 列表 块行元素 滚动字幕 文本图片锚点超链接 相对绝对URL 图片标记

定义列表 <div>和<span> 块元素和行内元素 网页颜色表示 滚动字幕标记 计算机进制 计算机编码介绍 超级链接 超级链接的标记<a></a>,双边标记,是行内元素 URL介绍 绝对URL和相对URL地址 相对URL地址:一般是用于链接本网站中的各个文件的路径. 其它常用的链接 锚点链接:实现在一个网页的不同部分进行跳转 图片标记 定义列表 定义列表的格式: <dl>        <dt>定义标题</dt>    

JS组件系列——Bootstrap Table 表格行拖拽

原文:JS组件系列--Bootstrap Table 表格行拖拽 前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成

兼容ie6及以上和firefox等标准浏览器的表格行滑过时背景色切换的效果

一.js代码——"tablehover.js" /**      *②.表格单元行滑过时高亮样式动效组件封装      *oop形式封装交互动效类      *组件说明这个组件是为了向下兼容到IE6,因为IE6不支持tr:hover这种形式的伪类,而在ff等标准浏览器中是支持的,这样写:      .tablelist td{border:none;border-bottom: 1px solid #d0d9d9;}//注意:td初始状态下是不给背景色的,滑过时才写      所以这段

动态增加,删除表格行并按照表格列排序

接着上一篇博文,解决上一篇博文最后遗留的瑕疵,同时,给表格列添加了排序功能. 解决掉的问题 1 乱码的问题 2 删除方法更加简便,省去获取父节点id的代码 3 点击第一行的add按钮后,下行table行变宽问题 <html> <head> <title>Table</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"&g

HTML表格相关元素

<table> 标签定义 HTML 表格.简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成.tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元.更复杂的 HTML 表格也可能包括 caption.col.colgroup.thead.tfoot 以及 tbody 元素. table标签除了具有html元素中通用的属性外,还含有自己的属性,常用属性如下: bgcolor:规定表格背景颜色. cellpadding:规定单元边沿与其内容之间的空