`

可paste的editable table

阅读更多
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <metahttp-equiv="X-UA-Compatible"content="ie=edge">
    <title>Document</title>
    <scriptsrc="https://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>

</head>

<body>
    <tableid="example"class="display"cellspacing="0"width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
        </thead>
        <tbody>
            <tr>
                <td><inputtype="text"></td>
                <td><inputtype="text"></td>
                <td><inputtype="text"></td>
            </tr>
            <tr>
                <td><inputtype="text"></td>
                <td><inputtype="text"></td>
                <td><inputtype="text"></td>
            </tr>
            <tr>
                <td><inputtype="text"></td>
                <td><inputtype="text"></td>
                <td><inputtype="text"></td>
            </tr>
        </tbody>
    </table>

    <script>
        $(document).ready(function () {
            $('td input').bind('paste', null, function (e) {
                $txt = $(this);
                setTimeout(function () {
                    var values = $txt.val().split(/\s+/);
                    var currentRowIndex = $txt.parent().parent().index();
                    var currentColIndex = $txt.parent().index(); 
                    
                    var totalRows = $('#example tbody tr').length;
                    var totalCols = $('#example thead th').length;
                    var count =0;
                    for (var i = currentColIndex; i < totalCols; i++) {
                        if (i != currentColIndex)
                            if (i != currentColIndex)
                                currentRowIndex = 0;
                        for (var j = currentRowIndex; j < totalRows; j++) {                           
                            var value = values[count];
                            var inp = $('#example tbody tr').eq(j).find('td').eq(i).find('input');
                            inp.val(value);
                            count++;
                           
                        }
                    }


                }, 0);
            });
        });
    </script>

</body>
</html>
分享到:
评论

相关推荐

    基于js粘贴事件paste简单解析以及遇到的坑

    在Chrome浏览器中,`e.clipboardData`具有`items`属性,可用来检查剪贴板中是否存在图片等复杂数据。然而,Safari浏览器并不支持这一属性,因此在实现跨浏览器兼容时需特别注意。 `clipboardData`对象是`Data...

    Paste_3.0.9.dmg

    Paste

    PIL图像处理模块paste方法简单使用详解

    ### PIL图像处理模块paste方法简单使用详解 #### 一、PIL与Pillow模块简介 在Python编程语言中,PIL(Python Imaging Library)是一个强大的图像处理库,它提供了多种功能来处理各种类型的图像文件。然而,由于PIL...

    Paste_2.2.5(MAC新版本)

    【Paste_2.2.5(MAC新版本)】是一个专为macOS High Sierra系统设计的应用程序更新,针对用户在使用旧版本时遇到的闪退问题进行了修复和优化。Paste是一款强大的剪贴板管理工具,它能够提升用户在Mac设备上的复制粘贴...

    Paste2 for mac 最新中文破解版

    18更新最新版,Paste for Mac 中文破解版,下载解压zip文件,dmg文件双击安装无需注册码即可使用

    自用开源 Easy Copy Paste的插件,2.0版本,wordpress插件

    值得注意的是,开源性质的Easy Copy Paste意味着其源代码可供公众查看和修改,鼓励社区成员贡献自己的改进和扩展。这样的开放环境通常会促进软件的持续发展和完善,用户也可以根据自身需求对其进行定制。 综上所述...

    Paste2Dos Tool

    【Paste2Dos Tool】是一个专为DOS...对于习惯于DOS或者需要在DOS下执行任务的用户来说,这是一个不可或缺的辅助工具。通过熟练掌握Paste2Dos,你可以在处理批处理任务、调试程序或者执行系统管理命令时更加得心应手。

    close tab & window paste value & table

    NOTES表格复制工具,可以复制漂亮的EXCEL可编辑表格到NOTES中。

    Paste 2.5.6.dmg

    Paste for mac是一款神奇的剪切板管理软件:Paste它能够为您储存您在设备上复制您的所有内容,并...是您日常生活工作中必不可少的一款软件,如果您也在寻找剪切板管理查看工具,那么paste mac版可能是你不错的选择哦!

    前端项目-paste.js.zip

    6. **自定义配置**: paste.js 可能提供了一些可配置选项,允许开发者根据需求定制行为,比如设置图片质量、是否允许特定类型的数据被处理等。 7. **示例与文档**: 为了方便开发者使用,"paste.js-master" 文件夹...

    mac下的paste效率工具

    Paste – smart clipboard history & snippets manager 对于 需要打开 直接复制粘贴功能的同学: 1.下载了附件中的Paste_Helper.app.zip,解压后 2.When the download is complete, launch Paste Helper by double ...

    Pin in Paste 和 Press Fit 两种PCB焊接或组装工艺示例

    本文将深入探讨两种常见的PCB焊接或组装工艺——"Pin in Paste"和"Press Fit"。 首先,让我们来了解"Pin in Paste"工艺。这种工艺主要用于焊接具有通孔引脚的元器件,比如微处理器和内存芯片。在"Pin in Paste"过程...

    如果你还不知道AD原理图的Smart Paste

    Altium Designer(简称AD)是一款广泛使用的PCB设计软件,其强大的功能之一就是Smart Paste功能。这个特性极大地提升了原理图设计的效率,特别是在处理大量网络连接时,避免了手动输入网络标号的繁琐工作。 首先,...

    PCB中PASTE和SOLDER的区别

    ### PCB中PASTE和SOLDER的区别 在印刷电路板(Printed Circuit Board,简称PCB)的设计与制造过程中,涉及到多种不同的技术与材料。其中,PASTE(焊膏)和SOLDER(焊料)是两个非常重要的概念。下面将详细介绍这...

    simple-editable-div:干净简单的跨浏览器可编辑div

    简单的可编辑Div 这是一种构建可在Chrome,Firefox和Edge中运行的Content Editable Div的简单方法。 当editable-div.js加载并准备就绪时,对于支持该值的浏览器,它将所有具有contenteditable和CSS plaintext类的DIV...

    Paste_3.0.2(91).dmg

    paste for mac 激活版

    Paste破解版:mac复制粘贴历史记录小软件

    复制粘贴历史记录小软件下载,Mac(Paste破解版), 博客链接:https://blog.csdn.net/kzadmxz/article/details/81413141

    redmine图片粘贴插件:clipboard_image_paste.zip

    为了进一步增强其用户体验,"clipboard_image_paste"插件应运而生,该插件允许用户直接从剪贴板粘贴图片到Redmine中的表单注释框,极大地提高了工作效率。 这个插件主要适用于Redmine 4.0.4版本,通过"clipboard_...

    mac 免费paste软件安装包

    mac 免费paste软件安装包

    WordPress插件easy-copy-paste支持外链图片批量保存到本地

    插件介绍:Easy-Copy-Paste插件支持将wordpress文章中的远程图片进行本地化保存,防止远程图片突然失效造成文章图片不能正常显示。 使用方法:在wordpress...支持版本:目前支持wordpress6.1,5.4等版本,可自行测试。

Global site tag (gtag.js) - Google Analytics