`

jquery 怎么样实现,点击一个表格(table)的 tr 时改变其背景颜色

阅读更多
jquery实现点击一个表格(table)的 tr 时改变其背景颜色,点击下一个tr时,上一个tr背景变回原来的背景,当前点击的这个tr背景改变。
<script type="text/javascript">
     var pre;//原来的节点,假设原来的背景颜色为白色,点击变为#e6f0fc
        function selectArow(sObject) {
            $(sObject).attr("style", "BACKGROUND-COLOR: #e6f0fc");
            if (pre != null && pre != sObject) $(pre).attr("style", "BACKGROUND-COLOR: white");
                                pre = sObject;
        }
</script>
<table id="tb">
<tr onclick="selectArow(this);"> </tr>
<tr onclick="selectArow(this);"> </tr>
<tr onclick="selectArow(this);"> </tr>
</table>
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    jQuery+ajax实现动态添加表格tr td功能示例

    - **jQuery表格(table)操作技巧汇总**:学习如何使用jQuery对表格进行各种操作,比如排序、筛选、分页等。 - **jQuery操作json数据技巧汇总**:掌握如何在jQuery中有效地操作JSON数据,包括解析JSON、生成JSON等。 -...

    jQuery实现动态更改table表格数据

    一个基本的表格由`&lt;table&gt;`元素开始,包含若干个`&lt;tr&gt;`(行)元素,每个行内又包含若干`&lt;td&gt;`(单元格)或`&lt;th&gt;`(表头)元素。动态编辑表格的关键在于监听用户交互,如点击事件,然后更新相应的表格数据。 1. **...

    JQuery实现动态表格点击按钮表格增加一行

    这里使用了`onclick`属性,当用户点击按钮时触发一个JavaScript函数(`del`函数)。在现代的Web开发中,通常推荐使用更为现代的事件绑定方式,例如使用JQuery的`.on()`方法。 4. 变量和作用域:在JavaScript中,...

    jQuery Table点击选中表格行变色代码

    本示例中的"jQuery Table点击选中表格行变色代码"是关于如何利用jQuery来实现一个交互式表格的功能,当用户点击表格的某一行时,该行会高亮显示,提供更好的用户体验。 首先,`index.html`文件是网页的主结构文件,...

    jQuery Table点击选中表格行变色代码.zip

    本示例中,我们关注的是"jQuery Table点击选中表格行变色代码",这是一个用于实现用户交互功能的常见需求,即当用户点击表格的某一行时,该行会高亮显示,以突出显示用户的当前选择。 首先,我们要理解jQuery的基本...

    jquery实现json数据填充到table表格中并且实现remove add 数据

    对于添加功能,可以添加一个按钮,点击时触发一个函数,这个函数会创建一个新的空白行并添加到表格末尾。例如: ```javascript $('#add_row').on('click', function() { var newRow = $('&lt;tr&gt;'); newRow.append($...

    jQuery实现table中的tr上下移动并保持序号不变

    本示例主要关注如何利用jQuery实现在HTML表格(table)中移动行(tr)的同时保持行内的序号不变,这对于数据排序或用户交互有着重要的应用。我们将探讨以下关键知识点: 1. jQuery选择器与DOM操作: jQuery提供了...

    jQuery实现表头固定表格内容滚动效果

    `jQuery`作为一个广泛使用的JavaScript库,提供了丰富的功能和便利的方法来实现这种效果。本教程将深入探讨如何利用`jQuery`来创建一个表头固定、内容区域可滚动的表格。 首先,我们需要在HTML中构建基本的表格结构...

    jQuery Table表格排序显示代码.zip

    本资源“jQuery Table表格排序显示代码.zip”聚焦于利用jQuery实现动态表格排序的功能,这对于数据展示和用户交互至关重要。下面将详细阐述相关知识点。 1. **jQuery基础**:首先,理解jQuery的基础是至关重要的。...

    jquery 表格 jquery table

    jQuery 表格的另一个重要特性是 AJAX 动态加载数据。通过设置 `ajax` 选项,可以异步从服务器获取数据: ```javascript ajax: function (data, callback, settings) { $.ajax({ url: 'your/data/source', type: ...

    jquery实现表格多选,单击颜色加深,再点击颜色还原,隔行换色,源代码

    在本文中,我们将深入探讨如何使用jQuery来实现一个功能丰富的表格,包括多选、单击颜色变化、再次点击颜色还原以及隔行换色的效果。这些功能对于提高用户体验和交互性非常有帮助,尤其是在数据密集型的Web应用中。...

    jQuery实现动态给table赋值的方法示例

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务。本篇文章将深入探讨如何使用jQuery来动态地给HTML表格(table)赋值,通过一个具体的实例来展示相关技巧。...

    jQuery实现table表格鼠标经过隔行换颜色特效代码.zip

    本资源"jQuery实现table表格鼠标经过隔行换颜色特效代码.zip"提供了一种方法,利用jQuery来实现在网页中table表格鼠标悬停时的视觉效果,即隔行变色。这一功能对于提升用户体验,使得用户在浏览数据密集型表格时能更...

    jQuery table选中表格行变色

    当用户点击表格行时,我们可以改变其CSS样式,使其突出显示。以下是一个简单的示例: ```javascript $(document).ready(function() { $('#myTable tbody tr').click(function() { // 移除所有行的选中样式 $('#...

    table鼠标经过时整行变色 jquery

    在网页设计中,表格(Table)是一种常见的数据展示方式,jQuery 是一个强大的JavaScript库,它极大地简化了DOM操作、事件处理以及动画效果。当我们想要在用户鼠标悬停(mouseover)到表格某一行时,实现整行颜色变化...

    jquery,鼠标悬停。表格行的背景随之改变

    表格行的背景随之改变",指的是使用 jQuery 实现了一个功能:当用户将鼠标悬停在 HTML 表格的某一行上时,这一行的背景颜色会发生变化,当鼠标离开时,背景颜色恢复原状。这样的交互设计可以提高用户体验,使用户更...

    jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置

    总的来说,通过jQuery和JavaScript的组合,我们可以实现一个功能完善的表格列宽度拖动调整功能,提升用户的交互体验。这个功能对于数据展示和列表页面尤其有用,让用户可以根据自己的需求自由调整列宽,使得数据更加...

    可拖动并编辑表格背景颜色的jquery代码

    本文将深入探讨如何使用jQuery实现一个可拖动并编辑表格背景颜色的功能,这在创建交互式和自定义用户体验时非常有用。 首先,我们需要理解基本的HTML结构,一个简单的表格通常由`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;td&gt;`...

    jQuery UI拖拽信息到Table表格特效

    综上所述,"jQuery UI拖拽到Table表格特效"是一个利用jQuery UI库实现的增强用户交互的实用功能。通过结合`draggable`和`droppable`,我们可以创建出一个直观、用户友好的界面,使用户能够轻松地将信息添加到表格中...

Global site tag (gtag.js) - Google Analytics