热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

在TDRow中显示图标-ShowIconinsideofTDRow

Goal:WhenIhavethecursorinsideofatdrow,someiconshouldappear,andyoushouldenabletoc

Goal:
When I have the cursor inside of a td row, some icon should appear, and you should enable to click them. The icons contain link.

目标:当我将光标放在td行内时,会出现一些图标,您应该启用它们。图标包含链接。

When you have the cursor in a new td row, the previous td row should be default and the new td row should have the new icon.

将光标放在新的td行中时,前一个td行应该是默认值,新的td行应该有新的图标。

Pleae take a look at the picture.

请看看图片。

Problem:
I don't know how to create it.

问题:我不知道如何创建它。

Information:
I'm using bootstrap, jquery and Visual Studio.

信息:我正在使用bootstrap,jquery和Visual Studio。

enter image description here

2 个解决方案

#1


You can place all the icons when you are creating the rows. just give the style

您可以在创建行时放置所有图标。只是给出风格


then loop thorugh the rows via jquery

然后通过jquery循环遍历行

$(table tr).each(function () {
    if ($(this).is(':hover')) 
      $('icondiv').show();
    else
    $(this).hide();
});

Then if you want to perform some action based on the click on those icons, then you can place an data-* attribute along with those icons and track that particular row.

然后,如果要基于对这些图标的单击执行某些操作,则可以将data- *属性与这些图标一起放置并跟踪该特定行。

From jquery you can fetch the data attributes using data() function like

从jquery你可以使用data()函数来获取数据属性

$('icondiv').data('id');

#2


First way just use css in html add class to div which include icons

第一种方法只是在html中使用css将div添加到包含图标的div中

and in css

并在css

.IconsDiv{
    display: none;
}
tr:hover .IconsDiv{
    display: block;
}

another way : if you want to use jquery for that

另一种方式:如果你想使用jquery

$(document).ready(function(){
   $('table tr').hover(function(){
      $(this).find('.IconsDiv').show();
   },function(){
      $(this).find('.IconsDiv').hide();
   });
});

推荐阅读
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ... [详细]
  • 入门Java需熟练掌握哪些技术呢?
    Java工程师无疑是当下令人艳羡的工作之一,因此,每年都有大批大批的朋友想要报名Java工程师学习Java也就不奇怪了。那么入门Java掌握哪些技术能力 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量,或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频,只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量,只有使用JAVA编写Android客户端才能实现压缩。此外,作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因,并提供了解决方法。最后,作者还介绍了一个用于处理图片的类,可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
  • WhenIusepythontoapplythepymysqlmoduletoaddafieldtoatableinthemysqldatabase,itdo ... [详细]
  • IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • 本文介绍了使用FormData对象上传文件同时附带其他参数的方法。通过创建一个表单,将文件和参数添加到FormData对象中,然后使用ajax发送POST请求进行文件上传。在发送请求时,需要设置processData为false,告诉jquery不要处理发送的数据;同时设置contentType为false,告诉jquery不要设置content-Type请求头。 ... [详细]
  • 1、DashAPI文档Dash是一个API文档浏览器,使用户可以使用离线功能即时搜索无数API。程序员使用Dash可访问iOS,MacOS, ... [详细]
  • 本文内容皆为作者原创,如需转载,请注明出处:https:www.cnblogs.comxuexianqip13045462.html1.自定义分页器的拷贝及使用当我们需要使用 ... [详细]
  • 如何压缩网站页面以减少页面加载时间
    本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]
author-avatar
川崎步
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有