js 选择表的行变颜色

最新推荐文章于 2021-03-30 16:51:06 发布
最新推荐文章于 2021-03-30 16:51:06 发布
阅读量1k 收藏
点赞数
分类专栏： JS 文章标签： generator null function border table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DaturaJie/article/details/7824012
版权

   var selectedRow=null;
   function col(obj){ 
 obj.style.backgroundColor='534543'; //点击的行变颜色; 
 if(selectedRow!=null) selectedRow.style.removeAttribute("backgroundColor"); 
 if(selectedRow==obj) selectedRow=null;//重复点击返回原色
 else selectedRow=obj; 
 } 

是选中的行变色。


<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
 <script type="text/javascript">
   var selectedRow=null;
   function col(obj){ 
obj.style.backgroundColor='534543'; 
if(selectedRow!=null) selectedRow.style.removeAttribute("backgroundColor"); 
if(selectedRow==obj) selectedRow=null;
else selectedRow=obj; 
} 
 </script>
 <body>
   <table id="test" border=1>
   <tr οnclick="col(this);">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
   </tr>
   <tr οnclick="col(this);">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
   </tr>
   <tr οnclick="col(this);">
<td>M</td>
<td>E</td>
<td>C</td>
<td>T</td>
<td>T</td>
   </tr>
   </table>
 </body>
</html>

DaturaJie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现表格选中多行变色,修改和删除多行
04-03
本文件利用 AJAX 和JavaScript实现了动态生成表格,以及对表格的修改,删除多行并返回数据库更新.可以选中单行,不连续的多行,和连续的多行(shift 拖选),在前台按列排序. 仿excel,在前台按列进行排序,倒序等 欢迎大家提出宝贵意见
JS实现点击行改变颜色
王世洪的博客
09-20 2362
在实际项目开发中，有些开发出来的报表的数据量是比较大的，或者是多维度的大数据分析报表，在这个时候，为了观察方便，我们一般会对报表进行底色区分，改变每个隔行的颜色，方便用户对报表数据进行阅读。 然而，有些应用场景中，隔行区分颜色不一定能满足阅读的需求，或报表页面中有分模块的颜色区分，此时用隔行颜色差对页面的色彩布局影响不是很好；用户实际应用时，希望的是在用户点击单元格时，改变当前单元格所在行的背景...
js实现表格变色点击行颜色改变
xiaodanjava的专栏
10-21 8119
 forword http://blog.csdn.net/cai7095576/article/details/21808445 js实现表格变色点击行颜色改变 [html] view plain copy print? HTML>       HEAD>       META   http-equiv="Content-Type"   co
JS——最常用的表格项全选与取消全选及隔行变色！
qq_44945999的博客
03-25 360
一、表单全选按钮与取消全选 1.做法：让下面所有的checkbox 的checked 属性跟随全选按钮。 2.下面的复选框（表单项前的复选框）全部选中的时候，上面的全选框才能选中。 具体做法： (1)给下面所有的复选框都绑定点击事件。 (2)每次点击都要循环检查是否所有的复选框都被选中，如果是，则全选框选中，反之，不选中。 二、表单项隔行变色 利用鼠标事件： onmouseover 和 onmouseout 即可 三、具体代码实现 <!DOCTYPE html> <html>
javascript改变行的颜色问题
张彬在奋斗
05-07 596
var ybgcolor='#FFFF00'; //原表格的背景 var mbgcolor='#FF3333'; //鼠标移动上去表格的背景 var lgbcolor='#FFFF00'; //鼠标离开后表格的背景 window.onload=function showtable(){  var tablename=document.getElementById("mytable"
table行随鼠标移动变色示例
09-04
`$("#tab tr").mouseover()` 和 `$("#tab tr").mouseout()` 事件监听鼠标悬停和离开，动态地为当前行的单元格添加或移除 `.mouse_color` 类，从而改变颜色。 最后，附录中的代码展示了这个页面可能包含的Java服务器...
jQuery table选中表格行变色
10-25
在CSS中定义`selected`类，以设置选中行的背景颜色和其他样式： ```css #myTable tbody tr.selected { background-color: #FFFFCC; /* 变色后的颜色，可自定义 */ } ``` 这样，当你点击表格中的任意一行时，该行...
color_pick.zip_colorPicker_颜色选择
09-20
它的API通常包括初始化、获取和设置颜色值、事件监听等功能，使得集成到现有项目中变得简单易行。 例如，我们可以使用以下步骤在网页上添加一个颜色选择器： 1. 引入colorpicker的JavaScript和CSS文件。 2. 创建一...
单元选择合并变色示例代码
09-04
这个功能主要用于表格，使得用户在选择多个连续的单元格时，这些被选中的单元格会呈现一种统一的颜色，增强用户体验。 首先，让我们分析提供的代码片段。这段代码使用HTML、CSS和JavaScript（jQuery库）来实现这个...
javascript使用onclick事件改变选中行的颜色
10-26
在这个场景中，`onclick`事件被用来改变表格（table）中被点击行的颜色，从而提供一种视觉反馈，让用户知道他们选择了哪一行。 首先，我们来详细解释一下`onclick`事件。`onclick`是HTML元素的一个属性，可以接受一...
一个js做的钟表，酷哦
09-30
一个js做的钟表，随鼠标移动。酷炫拽。不见得有大用途，只是很好玩
JS-表格隔行变色效果
Anna
09-15 2055
效果描述：使特定的表格隔行变色。 代码如下： 表格隔行变色 第一行第一行 第二行第二行 第三行第三行 第四行第四行 第五行第五行 第六行第六行 var item = document.getElementById("tb"); //获取I
JavaScript实现单击行变颜色
唯佳
11-13 959
 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">JavaS
html——js将匹配关键字使其变为红色
知北行的博客
07-18 3937
js将匹配关键字使其变为红色 /** * 将关键字变为红色 * @param str 待处理字符串 * @param keyWord 关键字字符串 * @returns {*} 将关键字变为红色加粗后的字符串 */ function changeKeyRed(str,keyWord) { if(str!=null&&keyWord!=null
用css3+js写了一个钟表
08-11 147
本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=h01bib&title=%E7%94%A8css3%2Bjs%E5%86%99%E4%BA%86%E4%B8%80%E4%B8%AA%E9%92%9F%E8%A1%A8 有一...
JS 表格各行变色
BowenXu11的博客
04-07 173
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> ...
GridView某行某列（单元格）根据某条件标色
m0_52390420的博客
03-30 937
一、背景   在开发中经常会遇到有需求根据某列上某些内容符合某些条件，在该行的某列（可以为自身，可以是所在行的某列）设置背景色以突出显示。网上查找的大多是判断某行某列然后直接在上面标注颜色，这里需要在其他地方标注，写下来以备后来人借鉴。 二、实现方法   在GridView的方法中有一个叫做CustomDrawCell，该方法是数据已绑定，而页面还在绘制过程中的方法，利用此方法可以根据内容在对应的单元格上标注颜色。详细代码如下： private void gvCwzl_CustomDrawCell(obje
js如何实现动态点击改变单元格颜色？
weixin_33878457的博客
05-28 2061
js如何实现动态点击改变单元格颜色？ 一、总结 1、通过table的rows属性，遍历表格所有行，然后通过cells属性，遍历每一行中的单元格。 2、遍历的过程中，动态的为每一个单元格定义单击事件，改变单元格的背景色     二、js如何实现动态点击改变单元格颜色？ 1、动态改变单元格背景色案例 实例描述： 单击单元格后改变其背景颜色,再次单击则恢复之前样式 案例要...
javascript根据条件给单元格添加不同颜色的
weixin_39833509的博客
04-26 749
javascript: # cat /static/myscript/myjs.js $(".item-comment").mouseover(function () { $(this).addClass("commentacthide") }).mouseout(function () { $(this).removeClass("commentacthid...
jquery表格隔行变色
最新发布
01-04
2. 使用:eq()选择器根据索引值选择特定行，并使用css()方法设置背景颜色。 ```javascript $("tr:eq(0)").css("background-color", "颜色"); ``` 请注意，上述代码中的"myTable"是表格的ID，你需要将其替换为你实际...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值