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