js可编辑表格

最新推荐文章于 2021-05-08 05:26:29 发布
最新推荐文章于 2021-05-08 05:26:29 发布
阅读量2.1k 收藏 2
点赞数
分类专栏： web前端学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/libin_1/article/details/51828776
版权

这里写图片描述
这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript" src="js/editable.js"></script>
        <title>无标题文档</title>
        <style type="text/css">
            table {
                text-align: center;
                border: 1px solid black;
                width: 508px;
                border-collapse: collapse;
            }

            tr th {
                background: pink;
            }

            p>span {
                display: inline-block;
                width: 50px;
                text-align: right;
            }
        </style>
        <script type="application/javascript">
            $(function() {
                var str_1 = [{
                    "name": "放款笔数",
                    "id": "473982794",
                    "value": "我是zz"
                }, {
                    "name": "banner地址",
                    "id": "78943294",
                    "value": "http://www.baidu.com"
                }, {
                    "name": "这是哪个三",
                    "id": "129787",
                    "value": "我是zz"
                }, {
                    "name": "我了很多很多",
                    "id": "123455",
                    "value": "http://www.sain.com"
                }];
                show(str_1);

                function show(str_1) {
                    for (var i = 0; i < str_1.length; i++) {
                        $('tbody').append('<tr><td>' + str_1[i].name + '</td><td>' + str_1[i].value + '</td><td><a href="#" class="bj">编辑</a><span>&nbsp;</span><a href="#" class="save">保存</a></td></tr>');
                    }
                }

                $('tbody').on('click', '.bj', function() {
                    var index = $(this).parent().parent().index();
                    var num = $("tr").eq(index + 1);
                    var num1 = num.find('td:eq(0)').text();
                    var num2 = num.find('td:eq(1)').text();
                    num.find('td:eq(0)').text('').append(' <input type="text" value="' + num1 + ' " />');
                    num.find('td:eq(1)').text('').append(' <input type="text" value="' + num2 + ' " />');;
                });
                $('tbody').on('click', '.save', function() {
                    var index = $(this).parent().parent().index();
                    var num = $("tr").eq(index + 1);
                    var val1 = num.find('input:eq(0)').val();
                    var val2 = num.find('input:eq(1)').val();
                    num.find('td:eq(0)').html('').remove("input").text(val1);
                    num.find('td:eq(1)').html('').remove("input").text(val2);
                });
            })
        </script>
    </head>

    <body>

        <table class="mytable" border="1" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th width="85">属性名</th>
                    <th width="205">值</th>
                    <th width="105">操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </body>

</html>

demo版：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

        <title>无标题文档</title>
        <style type="text/css">
            table {
                text-align: center;
                border: 1px solid black;
                width: 508px;
                border-collapse: collapse;
            }

            tr th {
                background: pink;
            }

            .sava {
                display: none;

            }

            p>span {
                display: inline-block;
                width: 50px;
                text-align: right;
            }
        </style>
        <script type="application/javascript">
            $(function() {





                var str_1 = [{
                    "name": "放款笔数",
                    "id": "473982794",
                    "value": "我是zz"
                }, {
                    "name": "banner地址",
                    "id": "78943294",
                    "value": "http://www.baidu.com"
                }, {
                    "name": "这是哪个三",
                    "id": "129787",
                    "value": "我是zz"
                }, {
                    "name": "我了很多很多",
                    "id": "123455",
                    "value": "http://www.sain.com"
                }];
                show(str_1);

                function show(str_1) {
                    for (var i = 0; i < str_1.length; i++) {
                        $('tbody').append('<tr opid="'+str_1[i].id+'"><td>' + str_1[i].name + '</td><td>' + str_1[i].value + '</td><td><a href="#" id="bj" class="bj">编辑</a><a href="#" id="sava" class="sava">保存</a><span>&nbsp;</span><a href="#" class="add">增加</a></td></tr>');
                    }
                }

                $('tbody').on('click', '#bj', function() {
                    $(this).hide().next('.sava').show();
                    var index = $(this).parent().parent().index();
                    var num = $("tr").eq(index + 1);
                    var num1 = num.find('td:eq(0)').text().trim();;
                    var num2 = num.find('td:eq(1)').text().trim();;
                    num.find('td:eq(0)').html('').append(' <input type="text" value="'+num1+'" />');
                    num.find('td:eq(1)').html('').append(' <input type="text" value="'+num2+'" />');
                });
                $('tbody').on('click', '#sava', function() {
                    var index = $(this).parent().parent().index();
                    var num = $("tr").eq(index + 1);
                    var val1 = num.find('input:eq(0)').val().trim();;
                    var val2 = num.find('input:eq(1)').val().trim();;
                    num.find('td:eq(0)').html('').remove("input").text(val1);
                    num.find('td:eq(1)').html('').remove("input").text(val2);
                    $(this).hide().prev('.bj').show();

                });
                $('tbody').on('click', '.add', function() {
                    $('tbody').append('<tr><td><input type="text" value=" "></td><td><input type="text" value=" "></td><td><a href="#" id="bj" class="bj" style="display: none">编辑</a><a href="#" id="sava" class="sava" style="display: inline-block">保存</a><span>&nbsp;</span><a href="#" class="add">增加</a></td></tr>');
                });
            });
        </script>
    </head>

    <body>

        <table class="mytable" border="1" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th width="205">属性名</th>
                    <th width="205">值</th>
                    <th width="305">操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </body>

</html>
最骚的就是你
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现可编辑的表格
01-10
JS实现可编辑的表格
JS制作可编辑表格
Shine的专栏
05-27 6276
  html>head>title>title>head>body>    table id="editTable" border="1">        tr>            td>aaaaaaatd>            td>bbbbbbbtd>            td>ccccccctd>        tr>        tr>            td>d
js实现表格编辑功能
08-13
类似excel的编辑功能，可以修改文本，编辑，复制，黏贴
js实现可编辑表格一
xyr05288的专栏
04-27 3690
from:"http://apps.hi.baidu.com/share/detail/30648462">http://apps.hi.baidu.com/share/detail/30648462   [javascript] view plaincopy GridEdit.js   [javascript] view pl
js 可编辑表格,批量编辑
03-22
在JavaScript的世界里，创建可编辑表格并实现批量编辑是一项常见的需求，特别是在Web应用程序中，用户可能需要对数据进行即时更新和管理。在这种情况下，利用js的前端组件库能够极大地简化开发工作。本话题将深入...
可编辑表格
04-20
原生JavaScript制作的可编辑表格无需依赖外部库，如jQuery或Angular等，可以降低页面加载时间，提高性能。下面将详细探讨如何使用JavaScript实现这一功能，以及相关的编程技巧。 首先，创建一个基本的HTML表格是...
js可编辑表格样表
12-18
js可编辑表格样表,可对列表进行新增、删除、修改操作
可编辑表格js代码
10-09
在这个"可编辑表格js代码"中，`demo.html`很可能是展示这个功能的实例页面，它可能包含了一个预定义的表格，并应用了相关的JavaScript代码，使得用户可以直接在浏览器中编辑表格内容。而`js`文件则包含了实现这一...
JS实现可编辑的表格单元格
07-26
JS实现可编辑的表格单元格JS实现可编辑的表格单元格JS实现可编辑的表格单元格JS实现可编辑的表格单元格JS实现可编辑的表格单元格JS实现可编辑的表格单元格
JS实现可在线编辑的表格
04-13
一直需要一个可以编辑的WEB表格，但由于种种原因都没有去想，今天终于下定决心写一个，支持下拉框（其他控件可以自己扩展），支持公式计算。欢迎朋友引用和完善效果图：http://hi.baidu.com/senty/blog/item/0b0a8226797112128b82a152.html
js实现可以编辑的表格
01-08
自己用jQuery写的可以让table实现可以编辑和保存，可以大大的提高用户体验。js文件注有注释，非常容易理解。
javascript可编辑的表格
05-26
NULL 博文链接：https://zhangxinming.iteye.com/blog/510920
js做的可编辑的表格
10-12
这个是我在网上找的，用js做的可编辑的表格，挺好的，大家可以下来研究一下。
用js制作的可编辑表格
11-07
用js控制的可编辑的表格 很简单的制作可编辑的表格
JS 可编辑表格的实现
如诗
05-08 4088
1、实现效果 用户点击语文，数学，英语部分的单元格，可以实现分数的编辑，总分也会随之变化。先看下效果，如图： 2、设计思路 先通过HTML5+CSS3绘制表格，添加input的样式和err提示动画。 给要修改的数据的单元格添加name属性，给总分那一列的单元格添加rname属性。先获取所有要更改数据的单元格，通过for循环遍历，给他们添加单击事件。 定义一个addAnimate方法，表示...
JavaScript实现在线编辑表格
weidegong的专栏
03-28 2793
======JavaScript在线表格演示====== 中国 美国 英国 标题一标题二标题三....可定义多个，与上面的数目保持一致...-->注：第一列单击弹出下拉框选择；在表格最后一行，按下“下箭头”可以增加一个新的空行;使用回车键可以向下遍历整个表格*****=====下列按钮根据需要选定使用======***
js 实现可编辑的表格
qq_34851243的博客
05-14 6413
利用 js 实现一个 可以改变任意指定的 单元格的值，并可以删除任意一个单元格： 效果界面如图： 原理分析： 实现对任意一个单元格的修主要需要做到三步： 获取单元格的id 。 var tb = document.getElementById("d"); 获取行输入框和列输入框的 value 值，并将 value 值转换成 整数。 var row = d...
js可编辑的表格
最新发布
05-25
你可以使用HTML中的表格元素（table、tr、td等）来创建一个表格，然后使用JavaScript来使其可编辑。以下是一个简单的例子： HTML代码： ```html <table id="myTable"> <tr> <td contenteditable="true">Edit Me</td> <td contenteditable="true">Edit Me Too</td> </tr> <tr> <td contenteditable="true">Edit Me Again</td> <td contenteditable="true">And Me</td> </tr> </table> ``` JavaScript代码： ```javascript var table = document.getElementById("myTable"); var cells = table.getElementsByTagName("td"); for (var i = 0; i < cells.length; i++) { cells[i].addEventListener("blur", function(){ //保存表格内容 localStorage.setItem(this.id, this.innerHTML); }); if (localStorage.getItem(cells[i].id)) { cells[i].innerHTML = localStorage.getItem(cells[i].id); } } ``` 这个例子中，我们给每个表格单元格添加了`contenteditable`属性，使其可编辑。然后，我们使用JavaScript来监听每个单元格的`blur`事件，当单元格失去焦点时，我们将其内容保存到`localStorage`中。在页面加载时，我们检查每个单元格是否已经有内容保存在`localStorage`中，如果有，则将其内容恢复。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值