`
tanglong8848
  • 浏览: 71195 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

表格点击行高亮显示

 
阅读更多

<script>
onload=function(){
var tbl = document.getElementById("tbl");
for(var i = 0; i < tbl.rows.length; i++){
tbl.rows[i].onclick =function(){
if(window.cur) window.cur.style.background = "";
this.style.background = "#CCC";
window.cur = this;
}
}
}
</script>

<table id="tbl" cellspacing="0" border="1">
<tr><td>xx</td><td>xx</td></tr>
<tr><td>xx</td><td>xx</td></tr>
<tr><td>xx</td><td>xx</td></tr>
<tr><td>xx</td><td>xx</td></tr>
</table>

分享到:
评论

相关推荐

    MFC的ctrllist改变点击行高亮颜色

    可以看我另一个链接的实现哦https://blog.csdn.net/weixin_38433139/article/details/111350116 我例程里还实现了很多别的功能例如换行显示 设置行高,设置字体大小,点击获取行列数等等

    tablesorter+行高亮+列高亮

    总之,`tablesorter+行高亮+列高亮`的组合提供了一个功能强大的交互式表格解决方案,允许用户方便地查看和操作数据。通过JavaScript和CSS的巧妙结合,开发者可以实现丰富的用户界面效果,提高数据的可读性和用户友好...

    jquery实现控制表格行高亮实例

    ### jQuery 实现控制表格行高亮实例解析 #### 一、引言 在网页开发过程中,经常需要对表格中的行进行交互式操作,比如当用户点击某一行时,该行会被高亮显示以便于用户更好地识别当前选中的数据。本文将详细介绍...

    详解element-ui表格中勾选checkbox,高亮当前行

    我们在做后台管理系统的时候经常需要操作表格,这里我们要实现的一个功能就是,勾选复选框,高亮显示当前行,也就是当前行样式改变。这是一个非常常见的使用场景,官网给我们提供了一个带Checkbox的table表格,但是...

    jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例

    接下来,我们需要在jQuery中编写函数来处理表格行的点击事件,使其高亮显示。在给出的JavaScript代码中,`$(document).ready()` 函数确保在DOM加载完成后执行我们的代码。`doChangeColorOfRow()` 函数是关键,它接收...

    javascript实现table选中的行以指定颜色高亮显示的方法

    为了实现点击行高亮显示的效果,通常会在JavaScript中编写相应的函数来监听表格行的点击事件。具体到本例中,使用了`document.getElementById`方法获取到指定的表格元素,再通过`getElementsByTagName`获取所有的行...

    LabVIEW表格选中行的上色、改变背景颜色.rar

    为了实现选中行高亮,你可以定义一个特定的颜色变量,如淡蓝色,当行号在选中行数组中时,将该颜色应用于该行。 4. **清除其他行颜色**:为了确保只有选中的行有高亮效果,你可能需要在每次事件触发时清除之前被...

    CSS实现表格样式及全选功能

    4. 奇偶行高亮:使用`:nth-child(odd)`和`:nth-child(even)`伪类选择器可以为奇数行和偶数行设置不同的背景色。 5. 表格内边距:通过`padding`属性可以控制单元格内部内容与边框的距离。 二、全选功能的实现 全选...

    jQuery仿Excel表格列表排序代码

    这通常通过在输入框中输入关键词,然后遍历表格数据,对比每一项与关键词的匹配度,将匹配的行高亮显示或者隐藏不匹配的行。这个功能可能涉及到DOM操作,例如使用jQuery的`filter()`或`grep()`函数。 **字体和样式*...

    jQuery 插件 表格高亮显示选中行 全选、反选(四种模式)

    在本文中,我们将深入探讨如何使用jQuery插件来实现表格中的行高亮显示以及全选、反选功能。这个插件特别适用于数据展示和交互性强的网页应用,它提供了四种不同的工作模式,使得用户可以更加方便地管理和操作表格...

    表格隔行换色 鼠标移过变色

    在网页设计中,表格是一种常见的数据展示方式,为了提高数据可读性和用户交互性,我们经常需要对表格进行一些...在实际开发中,可以根据需求进一步定制,如添加选中行高亮、全选/全取消功能等,以满足不同场景的需求。

    jquery实现表格中点击相应行变色功能效果【实例代码】

    4. 为了确保一次只能有一个行高亮显示,需要在给当前行添加高亮样式的同时,取消其他所有行的高亮显示。通过`.siblings()`方法选择当前行的所有同级元素(即表格中的其他行),然后使用`.removeClass('selected')`...

    jQuery代码实现表格中点击相应行变色功能

    例如,当用户点击表格中的某一行时,为了让用户明确哪一行被选中,我们可以实现一个功能,使得被点击的行高亮显示,而其他行恢复原状。在本案例中,我们将使用jQuery这个强大的JavaScript库来实现这个功能。 首先,...

    vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例

    在示例中,通过`:data`属性绑定数据源,`highlight-current-row`属性使选中行高亮,`@selection-change`监听选中项变化,`v-loading`控制加载状态。 2. **数据绑定和事件处理**:在`&lt;el-table-column&gt;`中,`prop`...

    修改grid行或列颜色

    此方法适用于需要对数据进行视觉区分的应用场景,例如:高亮显示某些特定行或列,使得用户能够快速识别出重要的数据。 ### 一、ExtJS GridView配置详解 在ExtJS中,`gridviewConfig` 是一个非常重要的配置对象,它...

    jqGrid表格内容查询读取代码.zip

    4. 高度可定制:jqGrid提供丰富的选项和事件,可以调整表格样式、行选择模式、行高亮颜色等。开发者可以根据需求调整网格的行为和外观。 在这个压缩包中,`index.html`文件是项目的主入口,它包含了HTML结构和引用...

    ListView控件学习.rar

    - **FullRowSelect**:启用后,选择项时将整个行高亮显示。 - **GridLines**:控制是否显示网格线。 7. **使用示例** - 文件管理器应用:显示目录结构和文件信息。 - 数据库浏览:显示数据库记录。 - 设置程序...

    premo_table:PremoTable是一个Flutter软件包,用于创建类似于表格组件的Google表格和Excel

    此外,还可以设置行高亮、列冻结等效果,增强视觉表现。 5. **排序与过滤**:PremoTable提供内置的排序和过滤功能,用户可以通过点击表头进行列排序,或者根据条件过滤数据,使得大量数据的管理更加便捷。 6. **...

Global site tag (gtag.js) - Google Analytics