html动态表格

xiaoerbuyu1233

已于 2024-02-04 11:45:53 修改

阅读量518

点赞数 5

文章标签： android

于 2024-02-04 11:24:04 首次发布

本文链接：https://blog.csdn.net/xiaoerbuyu1233/article/details/136022821

版权

文章描述了一个使用jQuery创建的网页，展示了如何动态生成表格来分享和管理内容，包括添加、删除和复制功能。

摘要由CSDN通过智能技术生成

<!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>