jQuery-动态生成表格+点击按钮将序列复制到剪贴板

最新推荐文章于 2025-06-03 09:40:25 发布

淀粉肠狂热粉

最新推荐文章于 2025-06-03 09:40:25 发布

阅读量710

点赞数 24

文章标签： jquery 前端 javascript

本文链接：https://blog.youkuaiyun.com/pxy7896/article/details/144512247

版权

web前端专栏收录该内容

33 篇文章

订阅专栏

问题描述

假设我有一个form，填写一些信息后，点击提交按钮向后天发送post请求，后台返回后，在form下面动态产生一个表格。表格中每一行都包含开始和结束位置，用来分割序列。点击表格最后一列中的按钮，将根据该行的起终位置，分割序列，然后将分割后的序列放到剪贴板上，用户可以粘贴到别的地方。同时会提示已粘贴到剪贴板。

复制序列时实现的效果如下图所示：
在这里插入图片描述

实现方法

首先在<form>下方提前留出放表格的位置，当异步提交返回时，拼接<table>内容。对于每行末尾的按钮，添加两个属性：1.序列属性data-seq，带需要复制的序列；2.表示复制的属性copy-seq，用于监听。最后，为表格增加一个函数，监听表格内具有copy-seq类的子元素的点击事件，当这些元素（即按钮）被点击时，将data-seq带的序列复制到剪贴板，并且通过信息提示框告知用户。

代码

<form>
<!-- 省略表单内容 -->
</form>
<!-- 放动态表格的地方 -->
<div id="output-res" style="display: none">
</div>
<!-- 放信息提示框 -->
<div id="helpinfo" style="display: none">
</div>

<script>
	$("#input-design-submit").click(function () {
		$.ajax({
        	type: 'POST',
            url: "/run_command",
            data: {},
            success: function (resp) {
			// 拼接table内容略，其中按钮那里这样写：
			var tr = "<td><span class='copy-seq' data-seq='" + seq.slice(a, b) + "'><input type='button' value='复制序列'></span></td>"
		});
	});

	// 监听
    $("#output-res").on("click", ".copy-seq", function (e) {
        // 阻止事件的默认行为。对于点击事件
        // 这通常意味着阻止跳转至新的 URL 或重新加载页面
        e.preventDefault();
        // 调用复制到剪贴板的函数
        copyToClipboard($(this).attr("data-seq"));
    });

    function copyToClipboard(text) {
        // 使用jquery创建一个新的<input>元素，用于临时存放待复制的文本
        var temp = $("<input>");
        // 添加到<body>里，因为要执行select()操作，必须要添加
        $("body").append(temp);
        // 将text的数字和空格替换掉，然后赋值给temp，并选中
        temp.val(text.replace(/[0-9 ]+/mg, '')).select();
        try{
        	// 将选中的文本复制到剪贴板，如果成功则返回true
            if(document.execCommand("copy")){
            	// 正确提示。
				$("#helpinfo").html('<div class="alert alert-success "><button type="button" class="close" data-dismiss="alert"aria-hidden="true">&times;</button>' + "已复制到剪贴板！" + '</div>');
				$("#helpinfo").show();
            }else{
				// 错误信息1
            }
        }catch(err){
			// 错误信息2
        }
        // 移除<input>元素
        temp.remove();
    }

</script>