表格操作

最新推荐文章于 2024-09-21 20:10:00 发布
最新推荐文章于 2024-09-21 20:10:00 发布
阅读量86 收藏
点赞数
分类专栏： 前端特效 文章标签： js html javascript web css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AnitaSun/article/details/110065096
版权

表格查找

在搜索框里输入想要的数字标号或书名可以找到相应的书

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html" charset="utf-8">
    <title>我的test</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            font-family:"Microsoft YaHei";
        }
        table{
            margin-top:20px;
            border:1px solid #000;
            border-collapse:collapse;
        }
        table tr td{
            border:1px solid #000;
            padding:5px 10px;
        }
    </style>
</head>
<body>
<input type="text"/>
<input type="button" value="查找" onclick="find();"/>
<table>
    <tr>
        <td>1</td>
        <td>C#</td>
    </tr>
    <tr>
        <td>2</td>
        <td>C++</td>
    </tr>
    <tr>
        <td>3</td>
        <td>js</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Jquery</td>
    </tr>
    <tr>
        <td>5</td>
        <td>html</td>
    </tr>
    <tr>
        <td>6</td>
        <td>PHP</td>
    </tr>
    <tr>
        <td>7</td>
        <td>Perl</td>
    </tr>
    <tr>
        <td>8</td>
        <td>PASCAL</td>
    </tr>
</table>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    function find(){
        var str=/^\S+$/;  //严格匹配非空格的字符
        // 取到text框里的值
        var findText = $('input').eq(0).val();
        if(str.test(findText)){
            $('tr').hide().filter(':contains('+findText+')').show();
        }else{
            //如果输入的不是字符,就将tr里面的全部显示出来
            $('tr').show();
        }
    }
</script>
</html>

表格行交换

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html" charset="utf-8">
    <title>我的test</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei";
        }

        table {
            border: 1px solid #000;
            border-collapse: collapse;
        }

        table tr td {
            border: 1px solid #000;
            padding: 5px 10px;
            cursor: pointer;
        }

        .bgColor {
            background: red;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>1</td>
            <td>jQuery</td>
            <td>Javascript</td>
        </tr>
        <tr>
            <td>2</td>
            <td>.Net</td>
            <td>C#</td>
        </tr>
        <tr>
            <td>3</td>
            <td>J2EE</td>
            <td>Java</td>
        </tr>
        <tr>
            <td>4</td>
            <td>PHP</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Perl</td>
            <td>&nbsp;</td>
        </tr>
    </table>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function () {
        var destRow = undefined;//目标行,即要改变到的行
        var curtRow;//当前点击行
        var chgRow = undefined;//要改变位置的行
        var clickcount = 0;//点击次数

        $('table tr td').each(function () {
            var currentTD = $(this);
            currentTD.on('click', function () {
                clickcount += 1;//每次点击,点击次数加1
                var currentRow = currentTD.parent('tr'); //找到当前点击td所对应的tr
                
                if (clickcount % 2 == 1) { //点击次数为奇数次
                    chgRow = currentRow;   //要改变位置的行等于当前的行
                    chgRow.addClass('bgColor');  //给当前的行添加背景颜色
                } else {
                    destRow = currentRow;  //如果点击次数为偶数,当前的行是要改变到的行
                }

                if (destRow != undefined && chgRow != undefined) {//只有当被改变行与目标行都存在时,才进行位置交换。该判断条件不能省略,不然单数次的时候会直接把clickcount重置,导致计数出错
                    if (chgRow.position().top > destRow.position().top) {//在下面的行的top大于在上面行的top值,所以用insertBefore
                        chgRow.insertBefore(destRow);
                    } else if (chgRow.position().top < destRow.position().top) {
                        chgRow.insertAfter(destRow);
                    }
                    clickcount = 0;  //全部重置
                    chgRow.removeClass('bgColor');
                    destRow = undefined;
                    chgRow = undefined;
                }
            });
        });
    });
</script>

</html>
Anita-Sun
关注
专栏目录
Javascript 表格操作实现代码
10-29
Javascript 表格操作实现代码 Javascript 是一种广泛应用于 Web 开发的脚本语言，它可以用来实现网页的交互效果和动态更新。在本文中，我们将通过实例代码来介绍如何使用 Javascript 实现表格操作，包括获取表格值...
js简单表格操作
07-15
在JavaScript（简称JS）中，表格操作是网页动态交互中常见的功能，主要用于处理HTML中的`<table>`元素。本教程将深入探讨如何使用JS实现表格的增、删、改操作，帮助你创建更加灵活和交互性强的数据展示界面。 首先...
layui 表格操作列按钮动态显示的实现方法
10-16
1. **layui表格操作列的定义** layui表格允许开发者通过`<script type="text/html">`标签来定义操作列的模板。在这个模板中，我们可以使用`{{# }}`这样的Mustache语法来处理数据。例如，在上述代码中，我们定义了一...
简单的js表格操作
11-22
效果图：   任务：  1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff  var tr=document.getElementsByTagName("tr");... // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件...
intellij-idea创建html项目
weixin_45710581的博客
09-17 1161
你可以根据自己的喜好和需求自定义IDEA的工作区，包括颜色主题、字体大小、快捷键等。
HTML粉色烟花秀
兔子王
09-21 877
HTML语言实现的粉红色跨年烟花秀的完整代码。
【HTML样式】加载动画专题 每周更新
m0_73918768的博客
09-20 663
方块移动加载动画 电子风变脸 正方体组合 跳跃式加载动画 下一篇文章应该是Linux安装Java和Maven的脚本 如果想看的可以点个关注~
在HTML中添加图片
Q18600000000的博客
09-15 433
标签中指定要显示的图像
左键选择v-html绑定的文本内容，松开鼠标后出现复制弹窗
y1059477028的博客
09-20 315
【代码】左键选择v-html绑定的文本内容，松开鼠标后出现复制弹窗。
窗口框架frame(HTML前端)
qq_74861982的博客
09-15 1088
我们要在另一个网页中显示，此时我们就要设置默认打开的网页，也就是a标签的target属性，记得先对要显示的网页设置一个name,方便指定网页打开。4.此时找到frame.html在浏览器中预览效果如下，我们可以看到，一个网页分为左中右三个小的网页了，并且三个小的网页显示的东西不同。作用：将网页分割为多个HTML页面，即将窗口分为多个小窗口，每个小窗口可以显示不同的页面，但是在浏览器中是一个完整的页面。然后我们在左边那个网页插入两个超链接，一个是个人简历，一个是兴趣爱好。点击我的兴趣爱好，将出现如何内容。
HTML-DOM模型
My_story_begins的博客
09-21 655
如何使用前端调试
html外部链接css怎么引用
最新发布
weixin_43187635的博客
09-21 111
在 HTML 文件中，可以通过 标签引用外部的 CSS 文件，从而将样式与结构分离。这个标签通常放在 HTML 文档的 部分，来确保在页面加载时样式能够正确应用。href=“styles.css”：指定外部 CSS 文件的路径，这里是相对路径 styles.css，也可以使用绝对路径或 URL。type=“text/css”：指定文件类型为 CSS（现在可以省略，默认就是 CSS）。这样，HTML 页面中的所有元素都会根据 styles.css 文件中的样式规则进行渲染。
echarts图表刷新
2301_81449444的博客
09-21 139
图表制作完成，点击刷新图标，可以刷新。
除了 SEO 之外，HTML 语义化还有什么用？
longyiyiyu123的博客
09-18 1028
每次碰到 HTML 语义化的话题，几乎 99% 的前端都会想到 SEO。那除了 SEO，你还会想到什么呢？
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 90
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
文件系统设计 - 开发文件系统 Store (上篇)
qq_44746132的博客
09-21 220
本章以一个基础的响应式Store类开始，对编辑器最核心的基础模块-文件系统管理进行开发设计，遵循面向接口编程的理念，设计文件系统的相关接口类型定义。
Babel
小秀的博客
09-20 503
它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为，尤其是提供对较新 ECMAScript 特性（如 Promise、Symbol、Object.assign 等）的支持。随着 JavaScript 标准不断更新，新的特性和功能被添加，但并不是所有的浏览器都能及时支持这些新特性。core-js 通常与 Babel 一起使用。core-js 是模块化的，这意味着开发者可以按需引入自己需要的 polyfill，而不是全部引入，这不仅能减少代码体积，还有助于提高性能。
vue复制信息到粘贴框
程序员一枚，仅记录工作中的难点
09-21 117
main.js文件引入。
C#实现Word表格操作示例
在C#编程中，操作Word文档中的表格是常见的需求，特别是在处理数据导入、导出或自动化办公文档编辑时。本文将深入讲解如何使用C#通过Microsoft.Office.Interop.Word库来实现对Word表格的操作，特别是针对不规则表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值