javascript - 将表格列 DB 结果文本复制到剪贴板
问题描述
我有一个经典的 ASP 页面,它从数据库中提取记录并在表格中显示结果。其中一列根据正在显示的记录集显示电子邮件。我想在复制此列中所有电子邮件的页面上添加一个复制到剪贴板按钮。
这是循环记录集的当前脚本。
RESPONSE.WRITE "<tr>"& vbCrlf
RESPONSE.WRITE "<td>FULL NAME</td>"& vbCrlf
RESPONSE.WRITE "<td>EMAIL</td>"& vbCrlf
RESPONSE.WRITE "</tr>"& vbCrlf
IF NOT rsMembers.EOF AND NOT rsMembers.BOF THEN
DO WHILE NOT rsMembers.EOF
RESPONSE.WRITE "<tr>"& vbCrlf
RESPONSE.WRITE "<td>" & rsMembers("First Name") & " " & rsMembers("Last Name") & "</td>"& vbCrlf
RESPONSE.WRITE "<td><a href='mailto:"&rsMembers("Email")&"'>" & rsMembers("Email") & "</a></td>"& vbCrlf
RESPONSE.WRITE "</tr>"& vbCrlf
rsMembers.MOVENEXT
LOOP
END IF
我最初的尝试是在每个电子邮件记录的循环中包含一个隐藏字段,并通过向其添加数字或其他内容来使该字段的 ID 唯一。然后在 javascript 循环中遍历所有可能的 ID。
RESPONSE.WRITE "<tr>"& vbCrlf
RESPONSE.WRITE "<td>FULL NAME</td>"& vbCrlf
RESPONSE.WRITE "<td>EMAIL</td>"& vbCrlf
RESPONSE.WRITE "</tr>"& vbCrlf
IF NOT rsMembers.EOF AND NOT rsMembers.BOF THEN
DO WHILE NOT rsMembers.EOF
RESPONSE.WRITE "<tr>"& vbCrlf
RESPONSE.WRITE "<td>" & rsMembers("First Name") & " " & rsMembers("Last Name") & "</td>"& vbCrlf
RESPONSE.WRITE "<td><a href='mailto:"&rsMembers("Email")&"'>" & rsMembers("Email") & "</a><input type='hidden' value='"& rsMembers("Email") &"' id='myInput'></td>"& vbCrlf
RESPONSE.WRITE "</tr>"& vbCrlf
rsMembers.MOVENEXT
LOOP
END IF
Java
<script>
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("myInput");
/* Select the text field */
copyText.select();
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied the text: " + copyText.value);
</script>
然后添加一个按钮进行复制:
<button onclick="myFunction()">Copy text</button>
不确定是否有办法将所有电子邮件结果放入数组中,然后将它们写入一个隐藏字段。例如
<input type="hidden" value="DB Array of emails with a comma between each" id="myInput">
示例: 在此处输入图像描述
解决方案
这是一个 jQuery 解决方案。
“复制全部”按钮触发了一个点击事件。通过使用“电子邮件”类检索任何元素的文本值来收集电子邮件地址,然后将其传递给名为“copyToClipboard”的函数,该函数创建一个临时隐藏的文本区域以从中选择和复制电子邮件值。它应该适用于所有浏览器。
编辑:我更新了代码以允许您从任何列复制数据。您只需指定一个目标类并将其作为数据属性传递。您可能只需指定一个列号并查找嵌套表数据而不必分配类,但不幸的是,这超出了我的 JavaScript 知识范围,加上电子邮件列中的 href 链接会使这变得棘手。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Database Results</title>
</head>
<body>
<table width="0%" border="2" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Names - <button class="CopyColumn" data-target=".names">Copy All</button></th>
<th>Emails - <button class="CopyColumn" data-target=".emails" data-separator="; ">Copy All</button></th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="names">Name One</td>
<td><a href="mailto:email1@email.com" class="emails">email1@email.com</a></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="names">Name Two</td>
<td><a href="mailto:email2@email.com" class="emails">email2@email.com</a></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="names">Name Three</td>
<td><a href="mailto:email3@email.com" class="emails">email3@email.com</a></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="names">Name Four</td>
<td><a href="mailto:email4@email.com" class="emails">email4@email.com</a></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="names">Name Five</td>
<td><a href="mailto:email5@email.com" class="emails">email5@email.com</a></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="names">Name Six</td>
<td><a href="mailto:email6@email.com" class="emails">email6@email.com</a></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="names">Name Seven</td>
<td><a href="mailto:email7@email.com" class="emails">email7@email.com</a></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="names">Name Eight</td>
<td><a href="mailto:email8@email.com" class="emails">email8@email.com</a></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="names">Name Nine</td>
<td><a href="mailto:email9@email.com" class="emails">email9@email.com</a></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="names">Name Ten</td>
<td><a href="mailto:email10@email.com" class="emails">email10@email.com</a></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".CopyColumn").click(function(){
var btn = $(this);
// Disable the button whilst the clipboard copy is performed
btn.prop("disabled", true);
var colData = "";
// Use a line break to seperate the column data if no separator is specified
var colSeparator = (btn.data("separator")===undefined) ? "\n" : btn.data("separator");
// Loop through all elements with the target class
$(btn.data("target")).each(function() {
// Collect the column data and add the separator
colData += $(this).text() + colSeparator;
});
// Copy the column data to the clipboard
copyToClipboard(colData.trim());
// Make a copy of the button text
var btn_txt = btn.html();
// Change the button text to "Copied"
btn.html("Copied");
// Revert the button text after 1.5 seconds
setTimeout(function(){
btn.html(btn_txt);
// Enable the button
btn.prop("disabled", false);
},1500);
});
});
function copyToClipboard(text) {
if (window.clipboardData && window.clipboardData.setData) {
// IE specific code path to prevent textarea being shown while dialog is visible.
return clipboardData.setData("Text", text);
} else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
var textarea = document.createElement("textarea");
textarea.textContent = text;
textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
document.body.appendChild(textarea);
textarea.select();
try {
return document.execCommand("copy"); // Security exception may be thrown by some browsers.
} catch (ex) {
console.warn("Copy to clipboard failed.", ex);
return false;
} finally {
document.body.removeChild(textarea);
}
}
}
</script>
</body>
</html>
JSfiddle:https ://jsfiddle.net/j4r9sxwt/
您需要对 ASP 代码进行的唯一更改是:
RESPONSE.WRITE "<td><a href='mailto:"&rsMembers("Email")&"' class='emails'>" & rsMembers("Email") & "</a></td>"& vbCrlf
推荐阅读
- soap - webMethods 6.5 中的 SOAP 错误“iaik.security.ssl.SSLException: Peer sent alert: Alert Fatal: handshake failure”
- r - 使用引导、分类变量的分位数回归的置信区间
- react-native - 有什么方法可以从 React Native 中的 env 文件中获取 appcenter 配置
- php - PHP IF 语句包含 || 从一个数组
- reactjs - 如何在 ant design 或 material UI 中使用 react-hook-form
- database - 使用 UNIX 建立与 DB2 的连接
- unity3d - 脚本创建的 GameObject(Prefab 对象)在 Unity3d 中不出现在 Game View 中但出现在 Scene View 中
- time-complexity - 大写 N 与小 n 的时间复杂度
- c++ - SFML 从文件加载完成并出现错误代码
- angular - 指令中的 NgControl:没有 NgControl 的提供者