使用 jQuery 更改单击的表格行的颜色

2024-01-23

我需要你的帮助,

我怎样才能使用 jQuery,

更改表中所选行的背景颜色(对于本例,我们使用 css 类“highlighted”

如果再次单击同一行,请将其更改回默认颜色(白色),选择 css 类“nonhighlighted”

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

.highlighted {
    background: red;
}
.nonhighlighted {
    background: white;
}
</style>

</head>

<body>

<table id="data" border="1" cellspacing="1" width="500" id="table1">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

</body>

</html>

.highlight { background-color: red; }

如果您想要多项选择

$("#data tr").click(function() {
    $(this).toggleClass("highlight");
});

如果您只想一次选择表中的 1 行

$("#data tr").click(function() {
    var selected = $(this).hasClass("highlight");
    $("#data tr").removeClass("highlight");
    if(!selected)
            $(this).addClass("highlight");
});

另请注意,您的 TABLE 标记有 2 个 ID 属性,您不能这样做。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 jQuery 更改单击的表格行的颜色 的相关文章

  • 未捕获的类型错误:this.props.signinUser 不是一个函数(…)

    src actions index js import axios from axios const ROOT URL http localhost 3090 export function signinUser email passwor
  • 为什么将数据存储为元素的属性存在风险?

    我一直在读同样的东西 直接在 DOM 元素上存储属性值是有风险的 因为可能会发生内存泄漏 但有人可以更详细地解释这些风险吗 按属性 我假设您指的是 DOM 元素上的属性 DOM 元素上的自定义属性安全吗
  • 从未定义解构时避免错误

    可以说我有这个代码 const x y point Babel 会将其变成 var point point x point x y point y 这很好 但是如果点未定义怎么办 现在我得到一个错误 Cannot read property
  • 向对象添加元素

    我需要填充一个 json 文件 现在我有这样的东西 element id 10 quantity 1 我需要添加另一个 元素 我的第一步是使用该 json 将该 json 放入对象类型中cart JSON parse 现在我需要添加新元素
  • 在 JavaScript 中比较表单中的两个数字

    当我尝试比较不同的数字时 数字发生变化 但文本部分保持不变 这只发生在较大 较小的情况下 而不会发生在 NaN 或相等的情况下 这是我的代码 function check var a document getElementById a va
  • Telegram 授权无默认按钮

    使用 Telegram 第 3 方授权的唯一有记录的方法是使用其提供的脚本https core telegram org widgets login https core telegram org widgets login 这个脚本 正如
  • 如何在 Bootstrap 3 中制作进度条动画?

    我正在尝试为 Bootstrap 进度条设置动画 但我不知道该怎么做 我得到了宽度的值但是console log bar width 返回宽度px但不是 如内联所示style width 90 我用代码重新创建了一个 bootply Boo
  • Bing.com 如何创建放大的缩略图?

    当我使用 Bing com 搜索图像时 我发现它们的图像经过精心裁剪和排序 当您将鼠标放在图像上时 会弹出另一个窗口 其中显示放大的图像 我想在我的程序中做同样的事情 我检查了他们页面的源代码 他们正在使用 javascript 但我仍然不
  • 提交前验证表单(比检查空字段更复杂)

    我有一个包含时间输入的表单 具体来说 开放时间和结束时间 当按下提交按钮时 它会转到一个 php 页面 其中这些输入将添加到数据库中 在允许提交表单之前我想检查一些事情 例如 我想确保开始时间早于 小于 结束时间 这是表格 Opens
  • jQuery Blur() 在 Chrome 上不起作用

    我在 MacOSX 上运行这个http jsfiddle net q84wv http jsfiddle net q84wv on Chrome最新版本 它不会工作 在 Firefox 上运行时它工作得很好 有什么线索吗 假设您想要aler
  • Web SQL 数据库 + Javascript 循环

    我正在尝试解决这个问题 但我自己似乎无法解决 我正在使用 Web SQL DB 但无法让循环正常使用它 I use for var i 0 i lt numberofArticles 1 i db transaction function
  • 使用 JavaScript 的计时器

    我想使用java脚本实现计时器 我想随着间隔的变化而减少计时器 Example假设我的计时器从 500 开始 我想要根据级别减少计时器 例如1 一级定时器应减1 且递减速度应较慢 2 2级定时器应递减2 递减速度应为中等3 3级定时器应减3
  • Javascript 选择 onchange='this.form.submit()'

    我有一个带有选择和一些文本输入的表单 我希望在更改选择时提交表单 使用以下方法可以正常工作 onchange this form submit 但是 如果表单还包含提交按钮 则当选择更改时 表单不会提交 我猜有某种冲突 我在这里有什么选择
  • 使用Promise而不拒绝它会导致内存泄漏吗? [复制]

    这个问题在这里已经有答案了 代码如下 function test value return new Promise function fulfill reject try fulfill true catch e throw e 我担心的是
  • 使用 jQuery 修改 HTML 表格的结构

    我有一个元素列表 X在以下示例中 显示在 HTML 表格的行或列中 从 HTML 代码的角度来看 我有 水平显示 table tr td A td td B td td C td tr table 或 垂直显示 table tr td A
  • 使用 React React-router 登录后重定向到主页,并且 usenavigate 不起作用?

    我希望用户在成功登录后重定向到主页 我将用户登录的 api 请求的数据存储在一个名为 currentUser 的变量中 因此如果 currentUser 为 true 它应该重定向到主页 这就是我处理登录请求的方式 export const
  • 错误:创建 React Native 项目版本 0.59.9 时找不到 template.config.js

    当我尝试创建 React Native 项目版本 0 59 9 时 出现以下错误 错误错误 无法在 react native 模板中找到 var folders zc h93bvpb573q24 5ynvgkn1wc0000gn T rnc
  • 如何根据所需表单输入的值更改 CSS 样式

    我想知道如何编写 javascript 来改变所需的表单元素的样式 如果它们有价值的话就改变它们 我想要做的是当所需的文本字段为空时 在它们周围有一个彩色边框 并在它们有值时删除边框样式 我想做的是编写一个 javascript 函数来检查
  • 使用 jquery 提供附加功能时菜单未正确对齐

    I need to make a mega menu similar to one as show in image below 到目前为止 我已经能够在某种程度上使其发挥作用 例如jsFiddle 在这里 http jsfiddle ne
  • Serviceworker Bug event.respondWith

    我的 serviceworker 的逻辑是 当发生获取事件时 它首先获取包含一些布尔值 而不是 event request url 的端点 并根据我正在调用的值检查该值event respondWith 对于当前的获取事件 我正在提供来自缓

随机推荐

  • 如何使用 CUDA C 快速压缩稀疏数组?

    Summary Array A B C 在设备内存中但想要 A B C 使用 CUDA C 最快的方法是什么 Context 我有一个数组A设备 GPU 内存上的整数 在每次迭代中 我随机选择一些大于 0 的元素并从中减去 1 我维护一个排
  • DataTables - 如何使用自己的按钮进行导出?

    我使用 Materialise 作为我的 UI 框架 并使用 DataTables 作为我的表格 我有一个表需要导出到 Excel 我可以使用 DataTables 按钮很好地完成它 但是 它们是默认的 DataTables 按钮 我想使用
  • 无法将 Firebase 存储图像快速显示到 CollectionView 中

    我需要一些帮助 我一直在互联网上寻找帮助 以在 CollectionView 中显示我的 firebase 存储图像 我正在使用 UIImagepicker 将图像上传到 firebase 但它们没有显示在我的 CollectionView
  • 从 Swift 类调用 Objective-C 导致链接器错误

    我正在尝试在 Swift 中使用 RFDuino Objective C 库 这一切听起来很简单 我以前从 Swift 类调用过 Objective C 没问题 然而这一次我碰壁了 创建的头文件 向其中添加了头文件 Swift 可以看到类没
  • DrawingManager.setDrawingMode(null) 导致过多的递归

    请看看这个小提琴 http jsfiddle net HoffZ Zu55b http jsfiddle net HoffZ Zu55b 为什么它会导致错误 太多递归 drawMan setDrawingMode null drawMan
  • LocationManager 每分钟更新一次,消​​耗大量电池电量

    我有一些类似于以下的代码 LocationManager m LocationManager context getSystemService Context LOCATION SERVICE Criteria c new Criteria
  • 简单的html dom:如何获取没有特定属性的标签

    我想获取 class 属性等于 someclass 的标签 但仅获取那些未定义属性 id 的标签 I tried以下 基于此答案 但不起作用 html gt find someclass id Note 我在用着简单的 HTML DOM 类
  • 如何比较两个数组的所有元素?

    我有两个大约 1000 行和 1000 列的大数组 我需要比较这些数组的每个元素 如果相应的元素相等 则将 1 存储在另一个数组中 我可以用 for 循环来做到这一点 但这需要很长时间 我怎样才能更快地做到这一点 给出的答案都是正确的 我只
  • WCF 服务合同中使用soapAction="" 进行多项操作?

    我需要创建一项将由第三方 回调 的服务 因此 我需要遵守他们的 WSDL 他们的 WSDL 定义了所有操作soapAction 所以我的服务也需要做同样的事情 不幸的是 我收到错误 操作A和 乙有 相同的动作 每一次操作 必须具有独特的行动
  • Keras 简单 RNN 实现

    我在尝试编译具有一个循环层的网络时发现了问题 第一层的维度似乎存在一些问题 因此我对 RNN 层在 Keras 中如何工作的理解存在一些问题 我的代码示例是 model add Dense 8 input dim 2 activation
  • 使用 rspec 和 devise sign_in env 进行集成测试

    我正在使用配置为使用omniauth facebook登录集成的设备 当拨打电话时sign in方法来自我的spec request我得到的测试 undefined method env for nil NilClass spec desc
  • Android 免费和付费,具有不同的功能

    我知道开发应用程序的免费和付费版本的最佳方法是拥有一个包含程序主要部分的库项目 然后 免费和付费项目将使用该库项目 这使得免费和付费项目拥有不同的资源 但是 我的问题是我们如何限制免费应用程序中的功能 或将其扩展为付费应用程序 例如 我的免
  • Python 2 与 3。相同的输入,不同的结果。 MD5 哈希值

    Python 3 代码 def md5hex data return hex string of md5 of the given string h MD5 new h update data encode utf 8 return b2a
  • Scala Spark - 处理层次结构数据表

    我有带有树结构的层次结构数据模型的数据表 例如 这是一个示例数据行 Id name parentId path depth 55 Canada null null 0 77 Ontario 55 55 1 100 Toronto 77 55
  • JDBC Hibernate - Mysql 连接错误

    我的 Ubuntu 11 10 桌面上有一个本地 mysql 服务器 主机名 本地主机 用户名 根 密码 root 数据库名称 CBS 我真的很困惑 因为当我使用 访问 mysql 时terminal mysql administrator
  • Highcharts:添加自定义图像按钮

    我想在高图表上添加图像按钮 到目前为止 我已经成功创建了一个图像按钮并在其上附加了一个单击事件 但问题是 图像 sun png 位于图表的左侧 图像按钮右对齐 工具栏的默认位置 有什么解决办法吗 exporting buttons popU
  • 就地处理(无重定向)401 未经授权?

    QUESTION 有什么简单的方法可以直接返回 401 并登录页面 避免 302 重定向 当IAuthorizationFilter我的 IIS 7 0 上的 ASP NET MVC 5 应用程序失败 我必须实现什么基础设施才能使其正常工作
  • 如何判断任务是否已被“观察”?

    这是后续这个问题 https stackoverflow com q 33086371 2674222 我还读过斯蒂芬 托布的 任务和未处理的异常 http blogs msdn com b pfxteam archive 2009 05
  • 在SQL中插入空白行数

    使用 SQL 查询 我需要在结果中包含空白行以使每组 family id 等于 4 行 SELECT ROW NUMBER OVER PARTITION BY family id ORDER BY family id AS rowNum f
  • 使用 jQuery 更改单击的表格行的颜色

    我需要你的帮助 我怎样才能使用 jQuery 更改表中所选行的背景颜色 对于本例 我们使用 css 类 highlighted 如果再次单击同一行 请将其更改回默认颜色 白色 选择 css 类 nonhighlighted table bo