如何实现点击表格行会出现变色并跳转

最新推荐文章于 2023-11-16 09:20:28 发布
最新推荐文章于 2023-11-16 09:20:28 发布
阅读量355 收藏
点赞数
分类专栏： 技术 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hkjhjkhk/article/details/84473162
版权

<tr height="35px" onMouseOver = "this.style.backgroundColor = '#5E99FB';" style="cursor:hand;" onMouseOut = "this.style.backgroundColor = '';" onClick="javascript:window.open('http://www.suning.com')">

hkjhjkhk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现列表中单击某个链接,某个链接就变色
kdm8866的专栏
06-03 2285
效果图: 这是在之前做的一个考试系统时需要用到,就随手写了一个,代码不是很规范,凑着用吧,哈哈. #div10 a { float:left; display:block;
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
10-21
在本教程中，我们将探讨如何利用 jQuery 来实现表格的隔行变色、滑动变色以及点击变色功能。这些技巧能够使网页中的表格更加美观且交互性更强。 首先，我们要明白jQuery中的`$(document).ready()`函数，它表示当...
表格点击改变颜色
尔斌的世界
12-06 605
if (e.Item.ItemType == ListItemType.Item ||e.Item.ItemType == ListItemType.AlternatingItem) { 　e.Item.Attributes.Add("onclick","this.style.backgroundColor=’#99cc00’; 　　　 this.style.color=’buttontext’;
vue基于vue-seamless-scroll 做无缝滚动的表格（每一行可点击跳转）
m0_68647376的博客
06-28 994
1.安装依赖（内嵌表格用element ui样式）2.外层（使内部滚动）3.内层（表格）4.script 5.样式
在表格中鼠标移动到哪一行，哪一行就变色
qq_43143902的博客
11-03 4845
代码如下： 效果如下：
javascript实现动态表格的换行变色
shalousun的专栏
10-08 2487
1.新建一个js文件，例如：table.js function changeTableBg() {     var changeTr = document.getElementById("myTable")             .getElementsByTagName("tr");     for ( var i = 0; i     {         changeTr[i
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
08-31
- `.table-hover`：此类使得鼠标悬停在表格行上时，行会出现高亮效果。 - `.table-bordered`：为表格添加边框。 在 `<thead>` 标签内，我们定义了表格的表头。通过设置 `<tr>` 的 `style` 属性为 `background: ...
JS实现表格数据各种搜索功能的方法
10-24
在这个示例中，当用户点击“搜索”按钮时，程序会获取输入框中的值，并对表格中的每一行进行上述的搜索操作。匹配的行将被设置背景色为红色，以便用户直观地看到搜索结果。 总结来说，JS实现表格数据搜索功能的关键...
JS实现简单的表格增删
10-15
当用户点击“删除”按钮时，该按钮所在的整个表格行会被移除。 5. `clickQcHandler()`是清除按钮的点击事件处理函数。点击“清除”按钮会移除整个表格并重新创建一个新的空表格。 6. `$c(type,parent,style)`是一...
jquery表格内容筛选实现思路及代码
10-27
当用户在输入框中输入文字时，所有表格行会被隐藏，然后使用jQuery的`filter()`方法筛选出包含输入关键词的行，并将其显示出来。以下为实现这一功能的代码： ```html <!-- 表格内容 --> $(function() { $("#...
vue中，el-table表格中点击详情按钮，获取当前行数据并进行跳转 & this.$router.push跳转页面和this.$route.params获取数据
weixin_44867717的博客
06-05 7171
表格
Excel点击改变一行的颜色
韩盼盼的小窝
04-02 3053
在查看代码中 添加一下代码：Private Sub Worksheet_SelectionChange(ByVal Target As Excel.Range) On Error Resume Next Cells.FormatConditions.Delete With Target.EntireRow.FormatConditions .Delete .Add xlExpressio...
Vue3：给表格的单元格增加超链接功能（点击单元格可以跳转到新的页面）
最新发布
Junehhhhh的博客
11-16 4189
Vue3：给表格单元格添加超链接功能（点击单元格跳转到新的页面）
点击动态表格数据+自定义属性+跳转页面编码
小二来一只葫芦
08-16 927
//生成动态表格数据 自定义属性赋值 var dataList = $("#dataList"); dataList.html(""); if (list) { for ( var i = 0; i var temp = list[i]; var html = ""; html = html + "
Vue点击跳转到指定组件页面并传参
文龙刚的博客
11-10 5849
【代码】Vue点击跳转到指定组件页面并传参。
Vue 点击table中的某列，带参数跳转到另外一个页面
LGui的博客
07-24 6950
1、在template的table的列上绑定一个单击事件 <el-table-column :label="$t('monitor.alarms')" width="110px" align="center"> <template slot-scope="{row}"> <span style="color:red;" @click="alarmsHandle(row)">{{ row.alarms }}</span&
el-table中点击跳转到详情页的两种方法
前端程序媛_Ying博客
08-31 2639
点击el-table跳转到详情页的两种写法
ng-zorro 修改原框架的样式
小武的博客
01-08 1118
1. 修改原框架鼠标移入（表格，时间框）的颜色 找到原框架的class,然后前边加上这个:host ::ng-deep,修改背景色为none就可以了 :host ::ng-deep .ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row)>td,.ant-table-tbody&gt...
Vue+ElementUi实现点击表格中链接进行页面跳转和路由
热门推荐
qq_43657722的博客
09-24 1万+
Vue+ElementUi实现点击表格中链接进行页面跳转和路由
jquery实现表格增删改查
05-31
以下是一个简单的示例，演示如何使用 jQuery 实现表格的增删改查： HTML 代码： ``` <table id="myTable"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John</td> <td>30</td> <td> <button class="editBtn">Edit</button> <button class="deleteBtn">Delete</button> </td> </tr> <tr> <td>2</td> <td>Jane</td> <td>25</td> <td> <button class="editBtn">Edit</button> <button class="deleteBtn">Delete</button> </td> </tr> </tbody> </table> <form id="myForm"> <input type="hidden" id="idInput"> <label>Name:</label> <input type="text" id="nameInput"><br> <label>Age:</label> <input type="text" id="ageInput"><br> <button type="submit" id="submitBtn">Submit</button> <button type="button" id="cancelBtn">Cancel</button> </form> ``` JavaScript 代码： ``` $(document).ready(function() { // 点击编辑按钮 $('.editBtn').click(function() { // 获取当前行的数据 var id = $(this).closest('tr').find('td:eq(0)').text(); var name = $(this).closest('tr').find('td:eq(1)').text(); var age = $(this).closest('tr').find('td:eq(2)').text(); // 将数据填充到表单中 $('#idInput').val(id); $('#nameInput').val(name); $('#ageInput').val(age); // 显示表单 $('#myForm').show(); }); // 点击删除按钮 $('.deleteBtn').click(function() { // 删除当前行 $(this).closest('tr').remove(); }); // 点击取消按钮 $('#cancelBtn').click(function() { // 隐藏表单 $('#myForm').hide(); // 清空表单数据 $('#idInput').val(''); $('#nameInput').val(''); $('#ageInput').val(''); }); // 提交表单 $('#myForm').submit(function(event) { event.preventDefault(); // 获取表单数据 var id = $('#idInput').val(); var name = $('#nameInput').val(); var age = $('#ageInput').val(); // 判断是新增还是编辑 if (id == '') { // 新增 var newRow = '<tr><td>' + ($('#myTable tr').length - 1) + '</td><td>' + name + '</td><td>' + age + '</td><td><button class="editBtn">Edit</button> <button class="deleteBtn">Delete</button></td></tr>'; $('#myTable tbody').append(newRow); } else { // 编辑 var row = $('#myTable tbody tr:eq(' + id + ')'); row.find('td:eq(1)').text(name); row.find('td:eq(2)').text(age); } // 隐藏表单 $('#myForm').hide(); // 清空表单数据 $('#idInput').val(''); $('#nameInput').val(''); $('#ageInput').val(''); }); }); ``` 这个示例包含一个表格和一个表单。表格中包含 ID、Name、Age 和 Action 四列，Action 列中包含 Edit 和 Delete 按钮。当用户点击 Edit 按钮时，表单会显示，并将当前行的数据填充到表单中。当用户点击 Delete 按钮时，当前行会被删除。当用户在表单中填写完数据并点击 Submit 按钮时，会将数据保存到表格中。如果表单中的 ID 字段为空，则表示新增一行；否则表示编辑当前行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值