加亮某行(带有单选框)

最新推荐文章于 2024-10-09 11:23:49 发布
最新推荐文章于 2024-10-09 11:23:49 发布
阅读量547 收藏
点赞数
分类专栏： web javascript 文章标签： input function html border table c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ITdada/article/details/7559413
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <!-- 加亮某行(带有单选框) -->
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <style>
        thead{
            background-color:#cccccc;
        }
        .row1{
            background-color:#FFE7BA;
        }
        .row2{
            background-color:#FFF0F5;
        }
        .selected{
            background-color:#FFFF00;
        }
    </style>
        <script type="text/javascript" src="../js/jquery-1.4.3.js">
        </script>
        <script type="text/javascript">
            $(function(){
                $('tbody tr:even').addClass('row1');
                $('tbody tr:odd').addClass('row2');
                //已经选中的那一行应该加亮
                $('tbody :radio:checked').parent().parent().addClass('selected');
                $('tbody tr').click(function(){
                    $(this).addClass('selected')
                    .siblings().removeClass('selected');
                    $(this).find(':radio').attr('checked',true);
                });
            });
        </script>
    </head>
    <body>
        <table width="50%" border="1" cellpadding="0" cellspacing="0">
            <caption style="font-weight:800;">
                员工信息
            </caption>
            <thead>
                <tr>
                    <th>
                        &nbsp;
                    </th>
                    <th>
                        姓名
                    </th>
                    <th>
                        薪水
                    </th>
                    <th>
                        年龄
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input type="radio" name="c1" checked="checked" />
                    </td>
                    <td>
                        张三
                    </td>
                    <td>
                        20000
                    </td>
                    <td>
                        23
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" name="c1" />
                    </td>
                    <td>
                        李四
                    </td>
                    <td>
                        22000
                    </td>
                    <td>
                        22
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" name="c1" />
                    </td>
                    <td>
                        王五
                    </td>
                    <td>
                        14000
                    </td>
                    <td>
                        26
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" name="c1" />
                    </td>
                    <td>
                        马六
                    </td>
                    <td>
                        15000
                    </td>
                    <td>
                        21
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>


ITdada
关注
专栏目录
JQuery动态操作表格(添加、删除、多选、全选删除行操作)
wangxiaohigh
10-18 571
JQery动态操作表格，能够实现 添加行，多选、全选行、删除行操作，这是一个很有参考价值的JQuery适时控制表格的一个功能，含有丰富的注释，方便大家研究学习。 &lt;%@ page language="java" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E...
element-表格table高亮显示某行
weixin_51746147的博客
10-27 815
element-表格table高亮显示某行
使用CSS实现细边框，隔行变色，高亮选中行的表格
weixin_43379230的博客
02-05 1864
表格是网页中的重要组成部分，下面让我们通过CSS来实现一个细边框，隔行变色，高亮选中行的表格；以便一同学习参考。 细边框表格 先来看一段HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</tit...
vue+element ui 表格一整行选择（绑定单选按钮）
weixin_45717240的博客
08-11 2974
先上成品图 element ui表格在做单行选择时，可以直接使用table自带的属性 highlight-current-row （当前行高亮）和 row-click（点击某一行） 方法来选取一行并高亮显示，但是视觉效果并不是很好，所以决定再给表格每一行绑定一个单选框，将单选框的选择状态和表格的单选状态高亮显示进行绑定。 相关HTML如下所示，以一个简单表格为例 <template> <div class="listSelection-tbl"> .
iOS第三方框架
HumorousGhost
04-13 1835
图像： 1.图片浏览控件MWPhotoBrowser        实现了一个照片浏览器类似 iOS 自带的相册应用，可显示来自手机的图片或者是网络图片，可自动从网络下载图片并进行缓存。可对图片进行缩放等操作。       下载：https://github.com/mwaterfall/MWPhotoBrowser   目前比较活跃的社区仍旧是Github，除此以外
二、Python复习教程（重点）- 前端框架
花开如雨的博客
10-26 5333
目录导航： 文章目录目录导航：三、Web前端1.1 Web前端开发介绍1. Web网站介绍2. 动态网站开发所需的Web构件3. Web的工作原理1.2 HTML基础语法 （缺）1.3 HTML常用标签介绍1.3.1 文本标签:1.3.2 格式化标签:1.3.3 图片标签img*1.3.4 HTML中的超级链接*1.3.5 表格标签1.3.6 form表单标签 (其中1~5重点，其他了解)1.3.7 ``...`` 行内框架1.3.8 多媒体标签（了解）1.4 CSS层叠样式表介绍1.4.1 什么是CSS?
iOS常用第三方框架总结
u012338816的专栏
03-09 2656
图像： 1.图片浏览控件MWPhotoBrowser        实现了一个照片浏览器类似 iOS 自带的相册应用，可显示来自手机的图片或者是网络图片，可自动从网络下载图片并进行缓存。可对图片进行缩放等操作。       下载：https://github.com/mwaterfall/MWPhotoBrowser 目前比较活跃的社区仍旧是Github，除此以外也有一些不错的库散落在
常用iOS的第三方框架
风雪寒晨的博客
08-29 3010
图像： 1.图片浏览控件MWPhotoBrowser        实现了一个照片浏览器类似 iOS 自带的相册应用，可显示来自手机的图片或者是网络图片，可自动从网络下载图片并进行缓存。可对图片进行缩放等操作。       下载：https://github.com/mwaterfall/MWPhotoBrowser 目前比较活跃的社区仍旧是Github，除此以外也有一些不错的库散落在
整理常用iOS的第三方框架
lijuan3203的专栏
03-30 1754
图像： 1.图片浏览控件MWPhotoBrowser        实现了一个照片浏览器类似 iOS 自带的相册应用，可显示来自手机的图片或者是网络图片，可自动从网络下载图片并进行缓存。可对图片进行缩放等操作。       下载：https://github.com/mwaterfall/MWPhotoBrowser 目前比较活跃的社区仍旧是Github，除此以外也有一些不错的库散落在
Element UI 表格点击选中行/取消选中 快捷多选 以及快捷连续多选，高亮选中行
qq_38396215的博客
08-26 1万+
Element UI 表格点击选中行/取消选中 快捷多选 以及快捷连续多选，高亮选中行实现效果1. 监听`row-click`事件，实现选中2. 实现选中取消，以及单个选中3. 按住`ctrl`实现多选4. `shift/alt`键实现连续多选5. 实现选中高亮Demo及代码 ElementUI table自带的有一个highlight-current-row的属性，但是只能单选。所以要实现点击行...
【成为架构师课程系列】消息队列：秒杀时如何处理每秒上万次的下单请求？
热门推荐
AI天才研究院
02-05 1万+
幂等是一个数学上的概念，它的含义是多次执行同一个操作和执行一次操作，最终得到的结果是相同的，说起来可能有些抽象，我给你举个例子：比如，男生和女生吵架，女生抓住一个点不放，传递你不在乎我了吗？（生产消息）的信息。那么当多次埋怨你不在乎我了吗？的时候（多次生产相同消息），她不知道的是，男生的耳朵（消息处理）会自动把 N 多次的信息屏蔽，就像只听到一次一样，这就是幂等性。如果我们消费一条消息的时候，要给现有的库存数量减 1，那么如果消费两条相同的消息就会给库存数量减 2，这就不是幂等的。
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6479
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
表格展开与收缩
ITdada的专栏
05-15 1020
Insert title here              thead{             background-color:#cccccc;         }         .p{             background-color:#FFE7BA;         }                  .selected{             back
轮播器
ITdada的专栏
05-15 548
Insert title here     *{         margin:0px;         padding:0px;     }     #d1{         border : 1px solid #aaaaaa;         margin-left:200px;         margin-top:40px;         width:548px;
加亮某行(带有多选框)
ITdada的专栏
05-15 458
Insert title here                  thead{             background-color:#cccccc;         }         .row1{             background-color:#FFE7BA;         }         .row2{             background-
HTML 与 ES6 是前端开发的两大核心技术
qq_25416827的博客
10-02 988
HTML：主要负责页面的结构、语义化、布局和多媒体处理。ES6：提高了 JavaScript 的开发效率和可读性，尤其是模块化、异步编程和数据处理方式的革。
【FastAdmin】全栈视角下的页面跳转实现：从原生html、javascrpt、php技术到jQuery、FastAdmin框架
最新发布
田辛_DensinTian的专栏
10-09 493
页面跳转是Web开发中的基本操作，不同的技术栈提供了不同的实现方法。本文将详细介绍在原生JavaScript、原生HTML、原生PHP、jQuery以及FastAdmin框架中实现页面跳转的各种方法，并分析每种方法的优势、劣势和适用场景。
html 之 relative 和 absolute
u010194271的博客
10-09 223
结合 relative 和 absolute 的工作原理当一个父元素使用 relative 定位，并且其子元素或伪元素使用 absolute 定位时，子元素会根据父元素的边界进行定位，而不是根据视口或文档流。这个模式非常常见，用于创建复杂的布局效果。
element 表格前带单选框
09-15
### 回答1： 要在 element 表格前添加单选框，可以使用以下步骤： 1. 在表格前添加一个 div 元素。 2. 在 div 元素中添加一个 radio 组件，用于表示单选框。 3. 将表格和单选框组件放在同一个 div 中。 4. 使用 CSS 样式对单选框和表格进行布局。 以下是代码示例： ```html <div> <el-radio v-model="selectedRow" :label="row"> </el-radio> <el-table :data="tableData"> <el-table-column prop="name" label="Name"> </el-table-column> <el-table-column prop="age" label="Age"> </el-table-column> </el-table> </div> ``` 在上面的代码中，我们使用了一个 `div` 元素将单选框和表格组合在一起。`el-radio` 组件用于渲染单选框，`v-model` 指令用于绑定选中的值。`el-table` 组件用于渲染表格，`prop` 属性用于指定表格列所需的数据属性，`label` 属性用于设置表头标题。我们可以根据需要添加更多的表格列。 ### 回答2： element表格前带单选框是指在element表格的每一行前面都会有一个单选框控件。单选框是一种常用的用户界面控件，用于在多个选项中选择一个。 在element表格中添加单选框有很多用途和优点。首先，单选框可以让用户很方便地进行选择，特别是当选项较多时，用户可以直接点击单选框来快速选择。其次，单选框的状态可以很明确地表示用户的选择，给用户提供了直观的反馈。 通过在element表格前加入单选框，可以提供更多的交互性和灵活性。比如，在表格中显示一组可选项，并且要求用户只能选择其中的一个选项。这对于用户进行选择或筛选非常有帮助，特别是在需要从多个选项中进行排他性选择的场景下。 单选框的使用还可以带来一些额外的功能。例如，用户可以通过选择单选框来全选或取消全选表格中的所有行。这可以简化用户在表格中进行批量操作的步骤，提高用户的效率和体验。 综上所述，element表格前带有单选框可以提供更好的用户交互和选择功能。单选框作为一种常用的用户界面控件，可以方便用户进行选择，并且提供明确的反馈。无论是用于选择特定项目还是用于批量操作，单选框都能在element表格中发挥重要作用。 ### 回答3： element 表格前带单选框，是一种常见的界面设计，用于在表格中选择单个选项。 单选框是一种用于选择一项的UI控件，通常是一个圆形框内有一个小圆点，用于标识是否选中。在表格中，每一行前面都带有一个单选框，可以通过点击单选框来选择对应行的数据。 这种设计常用于需要用户从多个选项中选择一个的情况。例如，在一个学生信息表格中，每一行代表一个学生的信息，包括姓名、年龄和性别等。如果要求用户选择一个学生，就可以在每一行前面加上一个单选框。用户只需要点击单选框即可选择对应的学生，系统可以获取用户选中的学生信息进行后续处理。 通过在表格前加入单选框，可以提高用户选择数据的便捷性和效率。用户不需要在多个选项中找到合适的选择按钮，而是直接在表格中进行选择。同时，用户可以一次只选择一个选项，避免了多选框所带来的选择困惑。 总的来说，element 表格前带单选框是一种简洁、直观的界面设计，适用于需要用户在表格中选择一个选项的场景，提高了用户体验和操作效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ITdada

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值