感謝各位的回答，我組織了一下，這個問題修改下代碼就好了，也希望官方可以把這個代碼整合進下一個版本更新！
我的站點測試鏈接：https://blog.haodaima.cn/forum.php?mod=viewthread&tid=1
截圖202408231455498832.jpg (178.57 KB, 下載次數: 41)
下載附件
2024-8-23 14:55 上傳
我修改后的代碼，不僅可以實現手機上左右滑動，正確顯示表格狀態，左上角還有一個按鈕，支持一鍵復制表格內容，同時【全選表格】告知用戶復制了哪些，彈出提示框：“表格內容已復制”。每次點擊，提示框的顏色都不一樣，方便區分有時候復制錯表格再來復制這個，提醒當前復制的是哪個。
代碼如下：
1、打開文件/source/function/function_discuzcode.php
約438行左右，找到表格顯示函數，function parsetable，將其內容替換如下：意在修改表格顯示樣式，其中藍色部分為修改的部分，可整個函數復制替換，只替換藍色也行
- function parsetable($width, $bgcolor, $message) {
- if(strpos($message, '[/tr]') === FALSE && strpos($message, '[/td]') === FALSE) {
- $rows = explode("\n", $message);
- <font color="#0000ff"> $s = !defined('IN_MOBILE') ? '<div style="overflow-x:auto;"><button class="copy-btn" onclick="copyTable(this)" style="margin-bottom: 10px;">一鍵復制</button><table cellspacing="0" class="t_table" '.
- ($width == '' ? NULL : 'style="width:'.$width.'"').
- ($bgcolor ? ' bgcolor="'.$bgcolor.'">' : '>') : '<div style="overflow-x:auto;"><button class="copy-btn" onclick="copyTable(this)" style="margin-bottom: 10px;">一鍵復制</button><table cellspacing="0" class="t_table">';</font>
- foreach($rows as $row) {
- $s .= '<tr><td>'.str_replace(array('\|', '|', '\n'), array('|', '</td><td>', "\n"), $row).'</td></tr>';
- }
- $s .= '</table>';
- return $s;
- } else {
- if(!preg_match("/^\[tr(?:=([\(\)\s%,#\w]+))?\]\s*\[td([=\d,%]+)?\]/", $message) && !preg_match("/^<tr[^>]*?>\s*<td[^>]*?>/", $message)) {
- return str_replace('\"', '"', preg_replace("/\[tr(?:=([\(\)\s%,#\w]+))?\]|\[td([=\d,%]+)?\]|\[\/td\]|\[\/tr\]/", '', $message));
- }
- if(substr($width, -1) == '%') {
- $width = substr($width, 0, -1) <= 98 ? intval($width).'%' : '98%';
- } else {
- $width = intval($width);
- $width = $width ? ($width <= 560 ? $width.'px' : '98%') : '';
- }
- $message = preg_replace_callback("/\[tr(?:=([\(\)\s%,#\w]+))?\]\s*\[td(?:=(\d{1,4}%?))?\]/i", 'parsetable_callback_parsetrtd_12', $message);
- $message = preg_replace_callback("/\[\/td\]\s*\[td(?:=(\d{1,4}%?))?\]/i", 'parsetable_callback_parsetrtd_1', $message);
- $message = preg_replace_callback("/\[tr(?:=([\(\)\s%,#\w]+))?\]\s*\[td(?:=(\d{1,2}),(\d{1,2})(?:,(\d{1,4}%?))?)?\]/i", 'parsetable_callback_parsetrtd_1234', $message);
- $message = preg_replace_callback("/\[\/td\]\s*\[td(?:=(\d{1,2}),(\d{1,2})(?:,(\d{1,4}%?))?)?\]/i", 'parsetable_callback_parsetrtd_123', $message);
- $message = preg_replace("/\[\/td\]\s*\[\/tr\]\s*/i", '</td></tr>', $message);
- <font color="#0000ff"> return (!defined('IN_MOBILE') ? '<div style="overflow-x:auto;"><button class="copy-btn" onclick="copyTable(this)" style="margin-bottom: 10px;">一鍵復制</button><table cellspacing="0" class="t_table" '.
- ($width == '' ? NULL : 'style="width:'.$width.'"').
- ($bgcolor ? ' bgcolor="'.$bgcolor.'">' : '>') : '<div style="overflow-x:auto;"><button class="copy-btn" onclick="copyTable(this)" style="margin-bottom: 10px;">一鍵復制</button><table cellspacing="0" class="t_table">').
- str_replace('\"', '"', $message).'</table></div>';</font>
- }
- }
找到/template/default/common/header_common.htm
在文件底部添加如下代碼
- <script>
- var lastColorSchemeIndex = -1; // 初始化變量，記錄上一次使用的顏色索引，初始值為-1表示尚未選擇顏色
- function copyTable(button) {
- var table = button.nextElementSibling; // 獲取按鈕下一個兄弟元素，即表格元素
-
- // 定義一個函數，用于選擇整個表格內容
- function selectTable() {
- if (window.getSelection) {
- // 創建一個新的范圍對象
- var range = document.createRange();
- range.selectNode(table); // 將范圍設置為包含整個表格
- window.getSelection().removeAllRanges(); // 清除當前的所有選區
- window.getSelection().addRange(range); // 將新的范圍添加到選區中
- } else if (document.selection) {
- // 針對較舊的瀏覽器（如IE）的選擇邏輯
- var range = document.body.createTextRange();
- range.moveToElementText(table); // 將范圍設置為表格文本
- range.select(); // 選擇范圍
- }
- }
- // 首先選擇表格內容，以便后續操作
- selectTable();
- var rows = table.rows; // 獲取表格的所有行
- var result = ''; // 初始化一個空字符串，用于存儲表格數據
- // 遍歷表格的每一行
- for (var i = 0; i < rows.length; i++) {
- var cells = rows[i].cells; // 獲取當前行的所有單元格
- // 遍歷當前行的每一個單元格
- for (var j = 0; j < cells.length; j++) {
- result += cells[j].innerText + (j === cells.length - 1 ? '' : '\t'); // 將單元格內容加入結果字符串，用制表符分隔
- }
- result += '\n'; // 每一行結束后，加入換行符
- }
- // 移除最后一個多余的換行符
- if (result.endsWith('\n')) {
- result = result.slice(0, -1);
- }
- // 將結果復制到剪貼板
- var tempTextArea = document.createElement('textarea'); // 創建一個臨時的文本區域元素
- tempTextArea.value = result; // 將表格內容賦值給臨時文本區域
- document.body.appendChild(tempTextArea); // 將臨時文本區域添加到文檔中
- tempTextArea.select(); // 選擇臨時文本區域的內容
- document.execCommand('copy'); // 執行復制命令
- document.body.removeChild(tempTextArea); // 復制完成后，移除臨時文本區域
-
- // 再次選擇表格，確保它在復制后被全選
- selectTable();
-
- // 定義三種提示框顏色方案，包含背景色和文字顏色
- var colorSchemes = [
- { background: '#4CAF50', color: 'white' }, // 綠色背景，白色文字
- { background: '#FF9800', color: 'black' }, // 橙色背景，黑色文字
- { background: '#2196F3', color: 'white' } // 藍色背景，白色文字
- ];
-
- // 確保新選擇的顏色方案與上一次不同
- var newColorSchemeIndex;
- do {
- newColorSchemeIndex = Math.floor(Math.random() * colorSchemes.length); // 隨機選擇一個顏色索引
- } while (newColorSchemeIndex === lastColorSchemeIndex); // 如果新顏色與上一次相同，則重新選擇
- lastColorSchemeIndex = newColorSchemeIndex; // 更新記錄的顏色索引為當前選擇的顏色
- var selectedColorScheme = colorSchemes[newColorSchemeIndex]; // 獲取選中的顏色方案
- // 創建一個提示框元素，并設置其樣式和文本內容
- var alertBox = document.createElement('div');
- alertBox.className = 'copy-alert'; // 設置提示框的CSS類
- alertBox.textContent = "表格內容已復制！"; // 設置提示框顯示的文本
- alertBox.style.backgroundColor = selectedColorScheme.background; // 應用隨機選擇的背景顏色
- alertBox.style.color = selectedColorScheme.color; // 應用隨機選擇的文字顏色
- document.body.appendChild(alertBox); // 將提示框添加到文檔中
- // 讓提示框顯示
- alertBox.style.display = 'block';
- // 1秒后自動隱藏提示框并移除它
- setTimeout(function() {
- alertBox.style.display = 'none'; // 隱藏提示框
- document.body.removeChild(alertBox); // 從文檔中移除提示框
- }, 1000);
- }
- </script>
- <!--按鈕樣式-->
- <style>
- .copy-btn {
- background: linear-gradient(45deg, #ff6b6b, #f94d6a); /* 漸變背景 */
- border: none; /* 移除邊框 */
- color: white; /* 白色文本 */
- padding: 10px 20px; /* 按鈕內邊距 */
- text-align: center; /* 文字居中 */
- text-decoration: none; /* 移除下劃線 */
- display: inline-block; /* 使按鈕在一行內 */
- font-size: 14px; /* 字體大小 */
- margin: 4px 2px; /* 外邊距 */
- cursor: pointer; /* 鼠標指針樣式 */
- border-radius: 8px; /* 圓角 */
- transition: background 0.3s, transform 0.1s; /* 背景色和縮放效果漸變 */
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加陰影 */
- }
- .copy-btn:hover {
- background: linear-gradient(45deg, #f94d6a, #ff6b6b); /* 懸停時漸變背景 */
- }
- .copy-btn:active {
- transform: scale(0.95); /* 點擊時的縮放效果 */
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 點擊時調整陰影 */
- }
- .copy-alert {
- position: fixed;
- top: 50%; /* 垂直居中 */
- left: 50%; /* 水平居中 */
- transform: translate(-50%, -50%); /* 將元素中心點移到正確的位置 */
- background-color: #4CAF50; /* 綠色背景 */
- color: white; /* 白色文本 */
- padding: 10px 20px; /* 內邊距 */
- border-radius: 5px; /* 圓角 */
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加陰影 */
- z-index: 1000; /* 確保在最前面 */
- font-size: 14px;
- display: none; /* 初始狀態下隱藏 */
- }
- </style>
- <!--表格顯示框線，表格單行顯示-->
- <style>
- .t_table {
- width: 100%; /* 設置表格的寬度為父容器的 100%，即表格會自動適應父容器的寬度 */
- min-width: 600px; /* 設置表格的最小寬度為 600 像素，確保內容即使在父容器寬度較小時也能完整顯示 */
- table-layout: auto; /* 設置表格布局為自動，即表格列的寬度會根據內容自動調整 */
- }
- .t_table td {
- padding: 4px; /* 設置單元格內容與單元格邊框之間的內邊距為 4 像素 */
- line-height: 1.1; /* 設置單元格內容的行高為 1.1 倍的字體大小，確保內容間距適中 */
- border: 1px solid #afbeca; /* 設置單元格的邊框為 1 像素實線，顏色為 #afbeca（淺灰色） */
- overflow: hidden; /* 當單元格內容過多時，超出部分會被隱藏，防止溢出影響布局 */
- }
- </style>
將【2】的代碼復制進這個文件底部，</head>代碼之前，即可
|
關注公眾號
有償服務微信
有償服務QQ
皖公網安備34010302002376號 )|網站地圖|
發表于 2024-8-20 17:44:14
發表于 2024-8-20 22:34:08