<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分享收藏</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.option-btns {
text-align: center;
}
table {
margin-top:20px;
border-collapse: collapse;
width: 100%; /* 设置表格宽度为100% */
table-layout: fixed; /* 固定表格布局,有助于控制列宽 */
}
td {
text-align: left; /* 默认左对齐 */
width: 95%; /* 设置表格宽度为95% */
}
</style>
<script>
$(document).ready(function() {
// 模拟从后台获取的数据
var data = [
{ "id": 1, "msg": "内123容1https://www.baidu.com/" },
{ "id": 2, "msg": "内23容2 https://www.baidu.com/" },
{ "id": 3, "msg": "内fdsgfdg容3" }
];
// 遍历数据,为每个元素创建表格行
$.each(data, function(index, item) {
appendRow(item.id, linkify(item.msg));
});
// 新增按钮点击事件
$('#addBtn').click(function() {
var newRowId = $('table tbody tr').length + 1; // 简单生成新行的ID
appendRow(newRowId, '新增内容' + newRowId);
});
// 动态绑定删除按钮的点击事件
$('table').on('click', '.delete-btn', function() {
$(this).closest('tr').remove();
// 这里可以添加调用后台删除方法的代码
});
// 动态绑定复制按钮的点击事件
$('table').on('click', '.copy', function() {
var textToCopy = $(this).closest('tr').find('td:first').text(); // 获取这一行第一个单元格的文本
copyTextToClipboard(textToCopy); // 调用复制到剪贴板的函数
});
});
// 函数:将文本中的URL转换为可点击的链接
function linkify(inputText) {
var replacedText, replacePattern1;
//URLs starting with http://, https://, or ftp://
replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');
return replacedText;
}
// 函数:复制文本到剪贴板
function copyTextToClipboard(text) {
var tempTextArea = document.createElement("textarea");
tempTextArea.style.position = 'fixed';
tempTextArea.style.opacity = '0';
tempTextArea.textContent = text;
document.body.appendChild(tempTextArea);
tempTextArea.select();
try {
document.execCommand('copy'); // 尝试复制文本
} catch (err) {
console.error('复制失败', err);
}
document.body.removeChild(tempTextArea); // 删除临时文本域
}
// 函数:向表格追加一行
function appendRow(id, msg) {
var row = `<tr>
<td>${msg}</td>
<td class="option-btns">
<button class="copy">复制</button>
<button class="delete-btn">删除</button>
</td>
</tr>`;
$('table tbody').append(row);
};
</script>
</head>
<body>
<button id="addBtn">新增</button>
<table border="1">
<thead>
<tr>
<th style='width: 90%;'>内容</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 表格行将通过jQuery动态添加 -->
</tbody>
</table>
</body>
</html>
html动态表格
原创
©著作权归作者所有:来自51CTO博客作者痛而不觉的原创作品,请联系作者获取转载授权,否则将追究法律责任
下一篇:Android 圆形图片显示
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
css html js 动态修改表格
<!DOCTYPE html>
html css javascript HTML 数组