<!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;
}
.option-time {
text-align: center;
}
table {
margin-top: 20px;
border-collapse: collapse;
width: 100%; /* 设置表格宽度为100% */
table-layout: fixed; /* 固定表格布局，有助于控制列宽 */
}
td {
text-align: left; /* 默认左对齐 */
width: 95%; /* 设置表格宽度为95% */
}
td.content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<script>
$(document).ready(function () {
// 模拟从后台获取的数据
var data = [
{"id": 1,"timerStr":"20240221_211336", "msg": "六王毕，四海一，蜀山兀，阿房出。覆压三百余里，隔离天日。骊山北构而西折，直走咸阳。二川溶溶，流入宫墙。五步一楼，十步一阁。廊腰缦回，檐牙高啄。各抱地势，钩心斗角。盘盘焉，囷囷焉，蜂房水涡，矗不知其几千万落。长桥卧波，未云何龙？复道行空，不霁何虹？高低冥迷，不知西东。歌台暖响，春光融融。舞殿冷袖，风雨凄凄。一日之内，一宫之间，而气候不齐。\n" +
"妃嫔媵嫱，王子皇孙，辞楼下殿，辇来于秦，朝歌夜弦，为秦宫人。明星荧荧，开妆镜也。绿云扰扰，梳晓鬟也。渭流涨腻，弃脂水也。烟斜雾横，焚椒兰也。雷霆乍惊，宫车过也。辘辘远听，杳不知其所之也。一肌一容，尽态极妍，缦立远视，而望幸焉。有不见者，三十六年。\n" +
"燕赵之收藏，韩魏之经营，齐楚之精英，几世几年，剽掠其人，倚叠如山。一旦不能有，输来其间。鼎铛玉石，金块珠砾，弃掷逦迤，秦人视之，亦不甚惜。\n" +
"嗟乎！一人之心，千万人之心也。秦爱纷奢，人亦念其家。奈何取之尽锱铢，用之如泥沙？使负栋之柱，多于南亩之农夫。架梁之椽，多于机上之工女。钉头磷磷，多于在庾之粟粒。瓦缝参差，多于周身之帛缕。直栏横槛，多于九土之城郭。管弦呕哑，多于市人之言语。使天下之人，不敢言而敢怒。独夫之心，日益骄固。戍卒叫，函谷举，楚人一炬，可怜焦土！\n" +
"呜呼！灭六国者，六国也，非秦也。族秦者，秦也，非天下也。嗟乎！使六国各爱其人，则足以拒秦。使秦复爱六国之人，则递三世可至万世而为君，谁得而族灭也？秦人不暇自哀，而后人哀之。后人哀之而不鉴之，亦使后人而复哀后人也。 "},
{"id": 211,"timerStr":"20240221_211326", "msg": "https:www.baidu.comhttps:www.baidu.comhttps:www.baidu.comhttps:www.baidu.comhttps:www.baidu.comhttps:www.baidu.comhttps:www.baidu.comhttps:www.baidu.comwww.baidu.com."},
{"id": 3,"timerStr":"20240221_211339", "msg": "内fdsgfdg容3"}
];
// 遍历数据，为每个元素创建表格行
$.each(data, function (index, item) {
// console.log(JSON.stringify(item)+' '+item.msg+' '+item.id);
appendRow(item.id, linkify(item.msg),item.timerStr);
});
// 新增按钮点击事件
$('#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.content').text(); // 获取这一行类为content的单元格的文本
copyTextToClipboard(textToCopy); // 调用复制到剪贴板的函数
});
// 动态绑定复制按钮的点击事件
$('table').on('click', '.copyLink', function () {
<!-- var idValue = $(this).closest('tr').find('.rowId').text(); -->
var idValue = $(this).closest('tr').find('.copyLink').data('id');
alert(idValue);
// <!-- var textToCopy = $(this).closest('tr').find('td.content').text(); // 获取这一行类为content的单元格的文本 -->
// <!-- var textToCopy = $(this).closest('tr').find('td:first').text(); // 获取这一行第一个单元格的文本 -->
// <!-- copyTextToClipboard(textToCopy); // 调用复制到剪贴板的函数 -->
});
$('table').on('click', 'td.content', function () {
var $row = $(this).closest('tr');
if ($row.next().hasClass('full-content')) {
$row.next().remove(); // 如果下一行是完整内容行，就移除它
} else {
var fullContent = $(this).text(); // 获取这个单元格的完整内容
if (fullContent.length>150) {
$row.after('<tr class="full-content"><td colspan="3" style="word-wrap: break-word; padding: 5px">' + fullContent + '</td></tr>'); // 在这一行后面添加一个新行来显示完整的内容
}
}
});
});
// 函数：将文本中的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,timerStr) {
console.log(msg + ' = ' + id);
var row = '<tr>' +
'<td class="option-time">' + (timerStr ? timerStr : '无') + '</td>' +
'<td class="content">' + (msg ? msg : '无') + '</td>' +
'<td class="option-btns">' +
'<button class="copy">copy</button>' +
'<button class="copyLink" data-id="' + (id ? id : '') + '">copyLink</button>' +
'<button class="delete-btn">del</button>' +
'</td>' +
'</tr>';
$('table tbody').append(row);
};
</script>
</head>
<body>
<button id="addBtn">新增</button>
<table border="1">
<thead>
<tr>
<th style='width: 12%;'>time</th>
<th style='width: 70%;'>content</th>
<th style='width: 12%;'>operation</th>
</tr>
</thead>
<tbody>
<!-- 表格行将通过jQuery动态添加 -->
</tbody>
</table>
</body>
</html>
另一个
<!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;
}
.option-time {
text-align: center;
}
table {
margin-top: 20px;
border-collapse: collapse;
width: 100%; /* 设置表格宽度为100% */
table-layout: fixed; /* 固定表格布局，有助于控制列宽 */
}
td {
text-align: left; /* 默认左对齐 */
width: 95%; /* 设置表格宽度为95% */
}
td.content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
tr.full-content td.content {
white-space: normal;
overflow: visible;
text-overflow: initial;
}
</style>
<script>
$(document).ready(function () {
// 模拟从后台获取的数据
var data = [
{"id": 1,"timerStr":"20240221_211336", "msg": "六王毕，四海一，蜀山兀，阿房出。覆压三百余里，隔离天日。骊山北构而西折，直走咸阳。二川溶溶，流入宫墙。五步一楼，十步一阁。廊腰缦回，檐牙高啄。各抱地势，钩心斗角。盘盘焉，囷囷焉，蜂房水涡，矗不知其几千万落。长桥卧波，未云何龙？复道行空，不霁何虹？高低冥迷，不知西东。歌台暖响，春光融融。舞殿冷袖，风雨凄凄。一日之内，一宫之间，而气候不齐。
妃嫔媵嫱，王子皇孙，辞楼下殿，辇来于秦，朝歌夜弦，为秦宫人。明星荧荧，开妆镜也。绿云扰扰，梳晓鬟也。渭流涨腻，弃脂水也。烟斜雾横，焚椒兰也。雷霆乍惊，宫车过也。辘辘远听，杳不知其所之也。一肌一容，尽态极妍，缦立远视，而望幸焉。有不见者，三十六年。
燕赵之收藏，韩魏之经营，齐楚之精英，几世几年，剽掠其人，倚叠如山。一旦不能有，输来其间。鼎铛玉石，金块珠砾，弃掷逦迤，秦人视之，亦不甚惜。
嗟乎！一人之心，千万人之心也。秦爱纷奢，人亦念其家。奈何取之尽锱铢，用之如泥沙？使负栋之柱，多于南亩之农夫。架梁之椽，多于机上之工女。钉头磷磷，多于在庾之粟粒。瓦缝参差，多于周身之帛缕。直栏横槛，多于九土之城郭。管弦呕哑，多于市人之言语。使天下之人，不敢言而敢怒。独夫之心，日益骄固。戍卒叫，函谷举，楚人一炬，可怜焦土！
呜呼！灭六国者，六国也，非秦也。族秦者，秦也，非天下也。嗟乎！使六国各爱其人，则足以拒秦。使秦复爱六国之人，则递三世可至万世而为君，谁得而族灭也？秦人不暇自哀，而后人哀之。后人哀之而不鉴之，亦使后人而复哀后人也。 "},
{"id": 211,"timerStr":"20240221_211326", "msg": "内23容2 https://www.baidu.com/"},
{"id": 3,"timerStr":"20240221_211339", "msg": "内fdsgfdg容3"}
];
// 遍历数据，为每个元素创建表格行
$.each(data, function (index, item) {
// console.log(JSON.stringify(item)+' '+item.msg+' '+item.id);
appendRow(item.id, linkify(item.msg),item.timerStr);
});
// 新增按钮点击事件
$('#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.content').text(); // 获取这一行类为content的单元格的文本
copyTextToClipboard(textToCopy); // 调用复制到剪贴板的函数
});
// 动态绑定复制按钮的点击事件
$('table').on('click', '.copyLink', function () {
<!-- var idValue = $(this).closest('tr').find('.rowId').text(); -->
var idValue = $(this).closest('tr').find('.copyLink').data('id');
alert(idValue);
// <!-- var textToCopy = $(this).closest('tr').find('td.content').text(); // 获取这一行类为content的单元格的文本 -->
// <!-- var textToCopy = $(this).closest('tr').find('td:first').text(); // 获取这一行第一个单元格的文本 -->
// <!-- copyTextToClipboard(textToCopy); // 调用复制到剪贴板的函数 -->
});
// 动态绑定点击事件
$('table').on('click', 'td.content', function () {
var $row = $(this).closest('tr');
var $contentCell = $(this);
var contentWidth = $contentCell.width();
var scrollWidth = $contentCell[0].scrollWidth;
if (scrollWidth > contentWidth) {
if ($row.hasClass('full-content')) {
$row.removeClass('full-content');
} else {
$row.addClass('full-content');
}
}
});
});
// 函数：将文本中的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,timerStr) {
console.log(msg + ' = ' + id);
var row = '<tr>' +
'<td class="option-time">' + (timerStr ? timerStr : '无') + '</td>' +
'<td class="content">' + (msg ? msg : '无') + '</td>' +
'<td class="option-btns">' +
'<button class="copy">copy</button>' +
'<button class="copyLink" data-id="' + (id ? id : '') + '">copyLink</button>' +
'<button class="delete-btn">del</button>' +
'</td>' +
'</tr>';
$('table tbody').append(row);
};
</script>
</head>
<body>
<button id="addBtn">新增</button>
<table border="1">
<thead>
<tr>
<th style='width: 12%;'>time</th>
<th style='width: 70%;'>content</th>
<th style='width: 12%;'>operation</th>
</tr>
</thead>
<tbody>
<!-- 表格行将通过jQuery动态添加 -->
</tbody>
</table>
</body>
</html>
1374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
