`

可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...

    Paste2 for mac 最新中文破解版

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

    Paste_2.2.5(MAC新版本)

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

    自用开源 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软件安装包

    PasteMe快速分享文本代码的网站项目支持加密一键复制永久保存阅后即焚等功能

    【标题】中的“PasteMe”是一个快速分享文本代码的在线平台,特别强调了其支持加密、一键复制、永久保存以及阅后即焚等高级特性。这个项目是针对“Ubuntu Paste”的本地化版本,旨在为用户提供更加安全和便捷的文本...

Global site tag (gtag.js) - Google Analytics