原神4.8版本重点培养和抽到角色数据表：修改了添加倒计时.隐藏了抽到角色数据表删除按钮、备注列和选择列

最新推荐文章于 2024-08-22 23:24:19 发布
最新推荐文章于 2024-08-22 23:24:19 发布
阅读量102 收藏
点赞数 1
文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lulei5153/article/details/141407359
版权 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原神4.8版本抽到角色和重点培养数据表</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        body {
            background: #1c3b5c;
        }
        a {
            color: #e6a23c;
        }
    }
    /* 头部样式 */
    header {
        width: 99vw;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #cbcbcb;
        position: fixed;
        /* logo */
        figure.logo {
            width: 262px;
            height: 50px;
            /* 缩小 */
            transform: scale(0.8);
            margin-top: 2px;
            margin-left: -15px;
            border-radius: 50%;
            background: #f30303;
            box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
                inset -4px -4px 5px rgba(0, 0, 0, 0.6);
            z-index: 99;
            figcaption {
                background: hsl(0, 0%, 0%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                font-weight: bold;
                box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
                letter-spacing: -3px;
                line-height: 45px;
                border-radius: 50%;
                font-size: 40px;
                width: 152px;
            }
            .my_name1 {
                text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.726);
                clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
                transform: translate(35%, 0%);
                -webkit-text-stroke: #fffbfb 1px;
            }
            .my_name2 {
                text-shadow: 1px 1px 1px hsla(160, 100%, 37%, 0.555);
                clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
                transform: translate(35%, -93%);
                -webkit-text-stroke: #ffffff 1px;
            }
            img {
                width: 60px;
                height: 35px;
                border-radius: 50%;
                transition: transform 0.3s ease;
                position: absolute;
                &:hover {
                    transform: scale(1.3);
                    filter: drop-shadow(0 0 0.3em #ff0202);
                }
            }
            .kong {
                margin-top: 7px;
                margin-left: 200px;
            }
            .ying {
                top: 7px;
                margin-left: 2px;
            }
        }
        /* 时间 */
        time {
            background: -webkit-linear-gradient(315deg, #e1ff00 50%, #ff0000);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 1.5rem;
            font-weight: 900;
            text-shadow: 2px -1px 8px rgba(250, 80, 193, 0.323);
            sub {
                -webkit-text-fill-color: #cfd601;
                text-shadow: 1px 1px 1px #100000;
                font-size: 1rem;
            }
        }
        /* 全屏还原关闭按钮 */
        menu {
            display: flex;
            button {
                background: none;
                border: none;
            }
            img {
                width: 35px;
                margin-top: 5px;
                margin-right: 5px;
                cursor: pointer;
                &:hover {
                    transform: scale(1.2);
                    padding: 5px;
                    background: #ffd000;
                }
            }
            button:nth-child(2) {
                display: none;
                /* 放大镜效果 */
                transform: scale(1.16);
            }
        }
    }
    /* 头部样式 结束 */
    /* 添加倒计时样式 */
    #countdownContainer {
        width: 99vw;
        height: 40px;
        display: flex;
        justify-content: space-between;
        position: fixed;
        transform: translate(0%, 101%);
        background-color: #cbcbcb;
        button {
            cursor: pointer;
            padding: 5px;
        }
        #addCountdown {
            transform: translate(120%, 30%);
            border-radius: 5px;
            color: #daff06;
            text-shadow: 1px 1px 1px #000;
            background: rgba(255, 255, 255, 0.2);
            /* 半透明背景 */
            backdrop-filter: blur(10px);
            /* 模糊效果 */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            /* 阴影效果 */
            border: none;
            div {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                ul {
                    list-style: none;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
        .buttonContainer {
            width: 47px;
            display: flex;
            justify-content: space-between;
            /* 添加按钮 */
            .addCountdownButton {
                width: 47px;
            }
        }
        /* 倒计时 */
        #countdowns {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            div {
                &:hover {
                    background-color: #e6a23c;
                    cursor: pointer;
                }
                input {
                    display: none;
                }
                strong {
                    cursor: pointer;
                    text-shadow: 2px 2px 2px #fffdfd;
                }
                span {
                    cursor: pointer;
                    display: inline-block;
                    color: #fff;
                    text-shadow: 1px 1px 1px #000;
                    font-size: 1.8rem;
                    &:hover {
                        color: #ef0505;
                    }
                }
            }
        }
    }
    /* 添加倒计时样式  结束*/
    /* 主要main样式 */
    main {
        display: flex;
        /* 列表样式 */
        table {
            border-collapse: collapse;
            caption {
                background-color: #80a4b1;
                border-radius: 5px 5px 0 0;
                span {
                    /* 粗字体 */
                    font-weight: bold;
                }
            }
            th,
            td {
                text-align: center;
                border: 1px solid #ddd;
            }
            th {
                background-color: #9f9e9e;
            }
            td {
                color: hsl(0, 0%, 100%);
                text-shadow: 1px 1px 1px #030303;
            }
        }
        /* 原神版本角色列表样式 */
        #character-table {
            margin-top: 81px;
            .character-image,
            .element-image {
                /* 默认隐藏角色图片和元素图片 */
                display: none;
                position: absolute;
            }
            /* 版本角色列表-数据来源后面的按钮*/
            .addButton134152 {
                width: 20px;
                height: 20px;
                padding: 2px;
                border-radius: 50%;
                background-color: #67c23a;
                background-image: linear-gradient(to top left,
                        rgba(0, 0, 0, 0.2),
                        rgba(0, 0, 0, 0.2) 30%,
                        rgba(0, 0, 0, 0));
                box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
                    inset -4px -4px 5px rgba(0, 0, 0, 0.6);
                border: 0px solid black;
            }
            /* 按钮√ */
            .addButton {
                background-color: #f9030300;
                display: none;
                height: 15px;
                width: 25px;
                border-top: none;
                border-right: none;
                border-radius: 0;
                transform: rotate(-45deg);
                transition: all 0.5s ease-in-out;
            }
        }
        .upgrade-table {
            margin-top: 81px;
            display: flex;
            /* 升级数据表的编辑按钮：等级\命座\天赋\备注 */
            .editable {
                /* 鼠标变小手 */
                cursor: pointer;
                &:hover {
                    background-color: #000000;
                    border-radius: 3px;
                    padding: 5px;
                    /* 添加过渡效果 */
                    transition: background-color 0.3s ease, padding 0.3s ease;
                }
            }
            /* 原神抽到角色数据表 */
            /* #characterTable152 {
                input[type='checkbox'] {
                    display: none;
                } 
                 td:nth-child(2),
                td:nth-child(7),
                td:nth-child(8),
                td:nth-child(9) {
                    display: none;
                } 
             } */
        }
    }
    /* 主要main样式 结束 */
</style>
<body>
    <!-- 头部 -->
    <header>
        <figure class="logo">
            <a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" target="_blank">
                <img class="kong" src="file:///D:/img/icon.ico" alt="与妖为邻">
            </a>
            <figcaption class="my_name1">与妖为邻</figcaption>
            <figcaption class="my_name2">与妖为邻</figcaption>
            <a href="file:///D:/web/html%E9%A6%96%E9%A1%B5/%E5%A4%87%E5%BF%98%E5%BD%95.html" class="home_page"
                title="首页" target="_blank">
                <img class="ying" src="file:///D:/img/ying.png" alt="与妖为邻">
            </a>
        </figure>
        <time datetime="2024-07-10" title="2024-07-10" id="dateTime">2024-07-10</time>
        <iframe class="tianqi" frameborder="0" width="280" height="36" scrolling="no" hspace="0"
            src="https://i.tianqi.com/?c=code&id=99"></iframe>
        <menu>
            <button class="fullScreen" type="button"><img src="file:///D:/img/全屏.svg" alt="全屏"
                    onclick="fullScreen()"></button>
            <button class="exitFullScreen" type="button"><img src="file:///D:/img/还原.svg" alt="还原"
                    onclick="exitFullScreen()"></button>
            <button type="button"><img src="file:///D:/img/关闭.svg" alt="关闭" onclick="closeAll()"></button>
        </menu>
    </header>
    <!-- 头部 结束 -->
    <!-- 添加倒计时 -->
    <div id="countdownContainer"></div>
    <!-- 添加倒计时 结束 -->
    <!-- 主要表格 -->
    <main>
        <!-- 角色列表 -->
        <table id="character-table">
            <caption>
                <span>原神4.8版本角色列表 </span>
                <a href="https://genshin-builds.com/cn/characters" target="_blank">数据来源：(genshin-builds.com)</a>
                <button class="addButton134152"></button>
            </caption>
            <tr>
                <th>序号</th>
                <th>元素</th>
                <th>角色</th>
                <th>星级</th>
                <th>添加</th>
                <th>添加</th>
            </tr>
        </table>
        <!-- 升级数据表 -->
        <div class="upgrade-table">
            <div>
                <table id="characterTable134"></table>
            </div>
            <div>
                <table id="characterTable152"></table>
            </div>
        </div>
    </main>
    <!-- 主要表格 结束 -->
</body>
<script>
    // 页面加载完成后才执行必要的初始化操作
    window.addEventListener('load', () => {
        renderTable('1340', 'characterTable134');
        renderTable('1520', 'characterTable152');
        initButtons();
    });
    // 页面加载完成后才执行必要的初始化操作 结束
    // 现在时间
    function showTime() {
        var time = document.getElementById("dateTime");
        var d = new Date();
        var y = d.getFullYear();
        var m = padZero(d.getMonth() + 1);
        var W = "星期" + "日一二三四五六".charAt(d.getDay());
        var D = padZero(d.getDate());
        var H = padZero(d.getHours());
        var M = padZero(d.getMinutes());
        var S = padZero(d.getSeconds());
        time.innerHTML = y + '-' + m + '-' + D + '<sub>' + W + '</sub>' + H + ':' + M + ':' + S;
    }
    function padZero(num) {
        return num < 10 ? "0" + num : num;
    }
    showTime();
    setInterval(showTime, 1000);
    // 现在时间 结束
    // 全屏功能与关闭
    function fullScreen() {
        var elem = document.documentElement;
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) { // Firefox
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
            elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) { // IE/Edge
            elem.msRequestFullscreen();
        }
    }
    function exitFullScreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) { // Firefox
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { // IE/Edge
            document.msExitFullscreen();
        }
    }
    // 获取全屏和还原按钮
    var fullScreenBtn = document.querySelector(".fullScreen");
    var exitFullScreenBtn = document.querySelector(".exitFullScreen");
    // 监听全屏和还原事件
    document.addEventListener("fullscreenchange", function () {
        if (document.fullscreenElement) {
            fullScreenBtn.style.display = "none";
            exitFullScreenBtn.style.display = "block";
        } else {
            fullScreenBtn.style.display = "block";
            exitFullScreenBtn.style.display = "none";
        }
    });
    // 关闭当前窗口
    function closeAll() {
        window.close();
    }
    // 全屏功能与关闭 结束
    /* 添加倒计时函数*/
    // 创建倒计时容器的HTML内容
    const countdownContainer = document.getElementById('countdownContainer');
    countdownContainer.innerHTML = `
        <div id="countdowns">
            <!--动态倒计时区 -->
        </div>
        <!-- 按钮区 -->
        <div class="buttonContainer">
            <button onclick="showAddCountdown()" style="color: #67c23a;" class="addCountdownButton">添加</button>
            <button class="edit" onclick="editSelected()" style="display: none;color: #e6a23c;">改</button>
            <button class="delete" onclick="deleteSelected()" style="display: none;color: red;">删</button>
        </div>
        <dialog id="addCountdown">
            <div>
            <form>
                <button id="cancelAdd" type="submit">取消添加</button>
                <br>
                <input type="text" id="promptInput" placeholder="提示信息">
                <br>
                <input type="datetime-local" id="datetimeInput">
                <button id="saveButton" onclick="saveCountdown()">保存</button>
            </form>
        <p>主要节日时间表</p>
        <ul>
            <li>星尘兑换纠缠之缘重置时间:2024年09月01日04点00分</li>
            <li>幻想真境剧诗重置时间:2024年09月01日04点00分</li>
            <li>渊月螺旋重置时间:2024年09月16日04点00分</li>
            <li>4.8版本下半场限时祈愿结束:2024年08月27日15点00分</li>
            <li>元旦:2025年1月1日</li>
            <li>春节:2025年2月12日</li>
            <li>清明节:2025年4月4日</li>
            <li>劳动节:2025年5月1日</li>
            <li>端午节:2025年6月2日</li>
            <li>中秋节:2025年9月21日</li>
            <li>国庆节:2025年10月1日</li>     
        </ul>
         </div>
        </dialog>
    `;
    let colorIndex = 0; // 初始化颜色索引
    function getRandomColor() {
        const elements = Object.keys(elementColors); // 获取所有元素名称（原神元素颜色数据)
        colorIndex = (colorIndex + 1) % elements.length; // 递增索引，并在达到数组长度时重置为0
        return elementColors[elements[colorIndex]]; // 返回该元素对应的颜色
    }
    // 保存倒计时函数
    function saveCountdown() {
        const promptInput = document.getElementById('promptInput').value.trim();
        const datetimeInput = document.getElementById('datetimeInput').value;
        if (promptInput && datetimeInput) {
            const countdownDiv = document.getElementById('countdowns');
            const timestamp = Date.now();
            const checkboxId = `checkbox_${timestamp}`; // 生成唯一的 checkbox id
            const countdownElement = document.createElement('div');
            countdownElement.style.backgroundColor = getRandomColor(); // 设置随机背景颜色
            countdownElement.innerHTML = `<input type="checkbox" class="countdownCheckbox" id="${checkboxId}" value="${timestamp}"><label for="${checkboxId}"><strong>${promptInput}</strong>:<span id="countdown_${timestamp}"></span></label>`;
            countdownDiv.appendChild(countdownElement);
            updateCountdown(`countdown_${timestamp}`, new Date(datetimeInput));
            // 存储倒计时信息到 localStorage
            localStorage.setItem(`countdown_${timestamp}`, JSON.stringify({
                prompt: promptInput,
                datetime: datetimeInput
            }));
        } else {
            alert('请填写提示信息和目标日期');
        }
    }
    // 页面加载时从 localStorage 中恢复倒计时
    window.onload = function () {
        for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            if (key.startsWith('countdown_')) {
                const data = JSON.parse(localStorage.getItem(key));
                const timestamp = key.split('_')[1];
                const countdownDiv = document.getElementById('countdowns');
                const checkboxId = `checkbox_${timestamp}`; // 生成唯一的 checkbox id
                const countdownElement = document.createElement('div');
                countdownElement.style.backgroundColor = getRandomColor(); // 设置随机背景颜色
                countdownElement.innerHTML = `<input type="checkbox" class="countdownCheckbox" id="${checkboxId}" value="${timestamp}"><label for="${checkboxId}"><strong>${data.prompt}</strong>:<span id="countdown_${timestamp}"></span></label>`;
                countdownDiv.appendChild(countdownElement);
                updateCountdown(`countdown_${timestamp}`, new Date(data.datetime));
            }
        }
    };
    // 更新倒计时函数
    function updateCountdown(elementId, targetDate) {
        const countdownElement = document.getElementById(elementId);
        function update() {
            const now = new Date();
            const total = targetDate - now;
            const absTotal = Math.abs(total);
            const seconds = Math.floor((absTotal / 1000) % 60);
            const minutes = Math.floor((absTotal / 1000 / 60) % 60);
            const hours = Math.floor((absTotal / (1000 * 60 * 60)) % 24);
            const days = Math.floor(absTotal / (1000 * 60 * 60 * 24));
            const timeStr = `${days}天${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
            countdownElement.textContent = total <= 0 ? `已过去${timeStr}` : timeStr;
        }
        function padZero(num) {
            return num < 10 ? `0${num}` : num;
        }
        update();
        setInterval(update, 1000);
    }
    // 监听复选框状态变化
    document.addEventListener('change', function (event) {
        const checkboxes = document.querySelectorAll('.countdownCheckbox');
        const editButton = document.querySelector('.edit');
        const deleteButton = document.querySelector('.delete');
        const addCountdownButton = document.querySelector('.addCountdownButton');
        checkboxes.forEach(checkbox => {
            const countdownElement = checkbox.parentNode;
            if (checkbox.checked) {
                countdownElement.style.backgroundColor = '#f56c6c'; // 选中时改变背景颜色
                countdownElement.style.color = '#f56c6c';
                /*点击span标签时，将span标签的颜色改为红色
                   // 获取所有的 span 元素
            var spans = document.querySelectorAll('span');
            // 遍历每个 span 元素并添加点击事件监听器
            spans.forEach(function(span) {
                span.addEventListener('click', function() {
                    // 将点击的 span 元素的文本颜色改为红色
                    this.style.color = 'red';
                });
            });
                */
            } else {
                countdownElement.style.backgroundColor = '';
                countdownElement.style.color = ''; // 未选中时恢复默认背景颜色
            }
        });
        const checkedCheckboxes = document.querySelectorAll('.countdownCheckbox:checked');
        if (checkedCheckboxes.length > 0) {
            editButton.style.display = 'inline-block';
            deleteButton.style.display = 'inline-block';
            addCountdownButton.style.display = 'none'; // 隐藏添加倒计时按钮
        } else {
            editButton.style.display = 'none';
            deleteButton.style.display = 'none';
            addCountdownButton.style.display = 'inline-block'; // 显示添加倒计时按钮
        }
    });
    // 删除选中的倒计时
    function deleteSelected() {
        const confirmDelete = confirm("确定要删除选中的倒计时吗？");
        if (confirmDelete) {
            const checkboxes = document.querySelectorAll('.countdownCheckbox:checked');
            checkboxes.forEach(checkbox => {
                const timestamp = checkbox.value;
                localStorage.removeItem(`countdown_${timestamp}`);
                checkbox.parentNode.remove();
            });
            // 重置所有复选框状态
            document.querySelectorAll('.countdownCheckbox').forEach(checkbox => {
                checkbox.checked = false;
            });
            // 隐藏编辑和删除按钮，显示添加按钮
            document.querySelector('.edit').style.display = 'none';
            document.querySelector('.delete').style.display = 'none';
            document.querySelector('.addCountdownButton').style.display = 'inline-block';
        }
    }
    // 编辑选中的倒计时
    function editSelected() {
        const checkboxes = document.querySelectorAll('.countdownCheckbox:checked');
        if (checkboxes.length === 0) return;
        checkboxes.forEach(checkbox => {
            const timestamp = checkbox.value;
            const data = JSON.parse(localStorage.getItem(`countdown_${timestamp}`));
            if (data) { // 检查数据是否存在
                const newPrompt = prompt('请输入新的提示信息', data.prompt);
                const newDatetime = prompt('目标日期(YYYY-MM-DDTHH:MM,例如:2024-10-01T04:00 2024-10-01 00:00)', data.datetime);
                if (newPrompt && newDatetime) {
                    localStorage.setItem(`countdown_${timestamp}`, JSON.stringify({
                        prompt: newPrompt,
                        datetime: newDatetime
                    }));
                    const checkboxId = `checkbox_${timestamp}`; // 生成唯一的 checkbox id
                    const countdownElement = document.getElementById(`countdown_${timestamp}`).parentNode;
                    countdownElement.innerHTML = `<input type="checkbox" class="countdownCheckbox" id="${checkboxId}" value="${timestamp}"><label for="${checkboxId}"><strong>${newPrompt}</strong>: <span id="countdown_${timestamp}"></span></label>`;
                    updateCountdown(`countdown_${timestamp}`, new Date(newDatetime));
                }
            } else {
                console.error(`Countdown data for timestamp ${timestamp} not found in localStorage.`);
            }
        });
        // 重置所有复选框状态
        document.querySelectorAll('.countdownCheckbox').forEach(checkbox => {
            checkbox.checked = false;
        });
        // 隐藏编辑和删除按钮，显示添加按钮
        document.querySelector('.edit').style.display = 'none';
        document.querySelector('.delete').style.display = 'none';
        document.querySelector('.addCountdownButton').style.display = 'inline-block';
    }
    // 显示添加倒计时对话框
    function showAddCountdown() {
        document.getElementById('addCountdown').showModal();
    }
    /* 添加倒计时函数*/
    /* 原神4.8版本角色数据*/
    const characters = [
        {
            element: "火", // 元素类型
            elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Pyro.png?strip=all&quality=75&w=48", // 元素图标
            role: [
                { star: "5", name: "阿蕾奇诺", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/arlecchino/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "林尼", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/lyney/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "迪希雅", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/dehya/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "迪卢克", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/diluc/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "胡桃", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/hu_tao/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "可莉", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/klee/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "宵宫", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yoimiya/image.png?strip=all&amp;quality=100&amp;w=140" },
                { star: "4", name: "托马", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/thoma/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "烟绯", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yanfei/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "香菱", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/xiangling/image.png?strip=all&quality=100&w=140" },
                { star: "4", name: "班尼特", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/bennett/image.png?strip=all&quality=100&w=140" },
                { star: "4", name: "安柏", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/amber/image.png?strip=all&quality=100&w=140" },
                { star: "4", name: "辛焱", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/xinyan/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "嘉明", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/gaming/image.png?strip=all&quality=100&w=140" },
                { star: "4", name: "夏沃蕾", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/chevreuse/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "旅行者 (火)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_electro/image.png?strip=all&quality=100&w=140" },
            ]
        },
        {
            element: "水", // 元素类型
            elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Hydro.png?strip=all&quality=75&w=48", // 元素图标
            role: [
                { star: "5", name: "妮露", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/nilou/image.png?strip=all&amp;quality=100&amp;w=140" },
                { star: "5", name: "莫娜", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/mona/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "达达利亚", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/tartaglia/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "珊瑚宫心海", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/sangonomiya_kokomi/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "希格雯", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/sigewinne/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "夜兰", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yelan/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "神里绫人", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kamisato_ayato/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "芙宁娜", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/furina/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "那维莱特", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/neuvillette/image.png?strip=all&quality=100&w=140" },
                { star: "4", name: "芭芭拉", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/barbara/image.png?strip=all&quality=100&w=140" },
                { star: "4", name: "行秋", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/xingqiu/image.png?strip=all&quality=100&w=140" },
                { star: "4", name: "坎蒂丝", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/candace/image.png?strip=all&amp;quality=100&amp;w=140" },
                { star: "5", name: "旅行者 (水)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_anemo/image.png?strip=all&quality=100&w=140" },
            ]
        },
        {
            element: "风", // 元素类型
            elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Anemo.png?strip=all&quality=75&w=48", // 元素图标
            role: [
                { star: "5", name: "温迪", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/venti/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "琴", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/jean/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "魈", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/xiao/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "闲云", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/xianyun/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "枫原万叶", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kaedehara_kazuha/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "流浪者", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/wanderer/image.png?strip=all&quality=100&w=140" },
                { star: "4", name: "珐露珊", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/faruzan/image.png?strip=all&quality=100&w=140" },
                { star: "4", name: "砂糖", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/sucrose/image.png?strip=all&quality=100&w=140" },
                { star: "4", name: "鹿野院平藏", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/shikanoin_heizou/image.png?strip=all&quality=100&w=140" },
                { star: "4", name: "琳妮特", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/lynette/image.png?strip=all&quality=100&w=140" },
                { star: "4", name: "早柚", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/sayu/image.png?strip=all&amp;quality=100&amp;w=140" },
                { star: "5", name: "旅行者 (风)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_anemo/image.png?strip=all&quality=100&w=140" },
            ]
        },
        {
            element: "雷", // 元素类型
            elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Electro.png?strip=all&quality=75&w=48", // 元素图标
            role: [
                { star: "5", name: "刻晴", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/keqing/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "雷电将军", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/raiden_shogun/image.png?strip=all&quality=100&w=140" },
                { star: "5", name: "八重神子", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yae_miko/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "克洛琳德", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/clorinde/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "赛诺", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/cyno/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "菲谢尔", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/fischl/image.png?strip=all&quality=100&w=140" },
                { star: "4", name: "北斗", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/beidou/image.png?strip=all&quality=100&w=140" },
                { star: "4", name: "丽莎", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/lisa/image.png?strip=all&quality=100&w=140" },
                { star: "4", name: "雷泽", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/razor/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "赛索斯", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/sethos/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "多莉", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/dori/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "久岐忍", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kuki_shinobu/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "九条裟罗", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kujou_sara/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "旅行者 (雷)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_dendro/image.png?strip=all&quality=100&w=140" }
            ]
        },
        {
            element: "草", // 元素类型
            elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Dendro.png?strip=all&quality=75&w=48", // 元素图标
            role: [
                { star: "5", name: "艾梅莉埃", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/emilie/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "艾尔海森", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/alhaitham/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "白术", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/baizhu/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "纳西妲", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/nahida/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "提纳里", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/tighnari/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "绮良良", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kirara/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "卡维", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kaveh/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "瑶瑶", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yaoyao/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "柯莱", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/collei/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "旅行者 (草)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_dendro/image.png?strip=all&quality=100&w=140" }
            ]
        },
        {
            element: "冰", // 元素类型
            elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Cryo.png?strip=all&quality=75&w=48", // 元素图标
            role: [
                { star: "5", name: "莱欧斯利", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/wriothesley/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "七七", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/qiqi/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "甘雨", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/ganyu/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "申鹤", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/shenhe/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "神里绫华", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kamisato_ayaka/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "埃洛伊", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/aloy/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "优菈", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/eula/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "菲米尼", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/freminet/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "米卡", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/mika/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "莱依拉", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/layla/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "罗莎莉亚", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/rosaria/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "迪奥娜", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/diona/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "重云", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/chongyun/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "凯亚", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/kaeya/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "夏洛蒂", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/charlotte/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "旅行者 (冰)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_geo/image.png?strip=all&quality=100&w=140" }
            ]
        },
        {
            element: "岩", // 元素类型
            elementImage: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/elements/Geo.png?strip=all&quality=75&w=48", // 元素图标
            role: [
                { star: "5", name: "千织", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/chiori/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "娜维娅", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/navia/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "荒泷一斗", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/arataki_itto/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "阿贝多", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/albedo/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "钟离", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/zhongli/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "云堇", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/yun_jin/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "五郎", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/gorou/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "凝光", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/ningguang/image.png?strip=all&quality=100&w=140", },
                { star: "4", name: "诺艾尔", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/noelle/image.png?strip=all&quality=100&w=140", },
                { star: "5", name: "旅行者 (岩)", image: "https://i2.wp.com/genshinbuilds.aipurrjects.com/genshin/characters/traveler_geo/image.png?strip=all&quality=100&w=140", },
            ]
        }
    ];
    /* 原神4.8版本角色数据 结束*/
    /* 原神元素颜色数据*/
    const elementColors = {
        "火": "#FF9933",
        "水": "#3399FF",
        "风": "#66c6ac",
        "雷": "#CC66FF",
        "草": "#66CC66",
        "冰": "#99CCFF",
        "岩": "#FFCC33"
    };
    function getElementColor(element) {
        return elementColors[element];
    }
    function getElementImage(element) {
        const foundElement = characters.find(e => e.element === element);
        return foundElement ? foundElement.elementImage : "";
    }
    function getCharacterImage(role) {
        for (const element of characters) {
            const foundRole = element.role.find(r => r.name === role);
            if (foundRole) {
                return foundRole.image;
            }
        }
        return "";
    }
    /* 原神元素颜色数据 结束*/
    /* 原神全部角色列表*/
    function loadData() {
        const table = document.querySelector('#character-table');
        let index = 1;
        let elementIndex = {};
        characters.forEach(element => {
            if (!elementIndex[element.element]) {
                elementIndex[element.element] = 1;
            }
            element.role.forEach(role => {
                const row = table.insertRow();
                row.insertCell().textContent = index++;
                const elementCell = row.insertCell();
                const elementColor = getElementColor(element.element);
                elementCell.innerHTML = `<span class="element-name" style="color: ${elementColor};">${element.element} (${elementIndex[element.element]++})</span><img src="${element.elementImage}" alt="${element.element}" class="element-image">`;
                const roleCell = row.insertCell();
                const roleColor = role.star === "5" ? "#ac7647" : "#846baa";
                roleCell.innerHTML = `<span class="character-name" style="color: ${roleColor};">${role.name}</span><img src="${role.image}" alt="${role.name}" class="character-image">`;
                const starCell = row.insertCell();
                const addCell134 = row.insertCell();
                addCell134.innerHTML = `<button onclick="addCharacter('1340', '${element.element}', '${role.name}', '${role.image}', '${role.star}')">培养</button><button class="addButton addButton134"></button>`;
                const addCell152 = row.insertCell();
                addCell152.innerHTML = `</button><button onclick="addCharacter('1520', '${element.element}', '${role.name}', '${role.image}', '${role.star}')">抽到</button><button class="addButton addButton152">`;
                starCell.textContent = role.star;
                row.style.backgroundColor = elementColor; // 设置背景颜色
            });
        });
    }
    loadData();
    /* 原神全部角色列表 结束*/
    /* 原神角色列表显示角色图片、元素图片*/
    const table = document.querySelector('#character-table');
    // 添加事件监听器
    table.addEventListener('mouseover', function (event) {
        const target = event.target;
        if (target.classList.contains('character-name')) {
            target.nextElementSibling.style.display = 'inline'; // 显示角色图片
        } else if (target.classList.contains('element-name')) {
            target.nextElementSibling.style.display = 'inline'; // 显示元素图片
        }
    });
    table.addEventListener('mouseout', function (event) {
        const target = event.target;
        if (target.classList.contains('character-name')) {
            target.nextElementSibling.style.display = 'none'; // 隐藏角色图片
        } else if (target.classList.contains('element-name')) {
            target.nextElementSibling.style.display = 'none'; // 隐藏元素图片
        }
    });
    /* 原神角色列表显示角色图片、元素图片 结束*/
    /* 添加角色功能*/
    function addCharacter(storageKey, element, role, image, star) {
        const data = JSON.parse(localStorage.getItem(storageKey)) || [];
        const elementData = data.find(e => e.element === element);
        if (elementData && elementData.characters.some(c => c.role === role)) {
            document.querySelector('.addButton134152').style.backgroundColor = '#ff0000';
            return;
        }
        if (!elementData) {
            data.push({
                element: element,
                characters: []
            });
        }
        const newCharacter = {
            role: role,
            image: image,
            star: star,
            level: 1,
            constellation: 0,
            talent: "1/1/1",
            note: "备注",
            selected: false
        };
        data.find(e => e.element === element).characters.push(newCharacter);
        localStorage.setItem(storageKey, JSON.stringify(data));
        renderTable(storageKey, storageKey === '1340' ? 'characterTable134' : 'characterTable152');
        initButtons(); // 更新按钮状态
    }
    /* 添加角色功能 结束*/
    /* 升级数据表*/
    function renderTable(storageKey, tableId) {
        const data = JSON.parse(localStorage.getItem(storageKey)) || [];
        const characterTable = document.getElementById(tableId);
        characterTable.innerHTML = `
<caption>
    <a href="https://bbs.mihoyo.com/ys/strategy/channel/map/37/39?bbs_presentation_style=no_header&amp;hide_nav=true&amp;from=COLLECTION_BG" target="_blank">原神wiki角色攻略</a>
    <span>${tableId === 'characterTable134' ? '原神重点培养列表' : '原神抽到角色数据表'}</span> 
    <a href="https://act.mihoyo.com/ys/app/interactive-map/index.html?bbs_presentation_style=no_header&amp;lang=zh-cn&amp;utm_source=bbs&amp;utm_medium=mys&amp;utm_campaign=pcicon&amp;_markerFps=24#/map/2?shown_types=NaN,-1084,508,2&amp;center=2008.50,-1084.00&amp;zoom=-3.00" target="_blank">提瓦特大地图(mihoyo.com)</a>
    ${tableId !== 'characterTable152' ? `<button type="button" onclick="deleteSelectedRows('${storageKey}', '${tableId}')" style="float: right;color:#ff0000;cursor: pointer;">删除选中</button>` : ''}
</caption>
<tr>
    <th>序号</th>
    <th>元素</th>
    <th>角色</th>
    <th>角色图片</th>
    <th style="display:none;">星级</th>
    <th>等级</th>
    <th>命座</th>
    <th style="width:100px;">天赋</th>
    <th style="width:400px;${tableId === 'characterTable152' ? 'display:none;' : ''}">备注</th>
    <th${tableId === 'characterTable152' ? ' style="display:none;"' : ''}>选择</th>
</tr>
`;
        let row = 1;
        let lastElement = null;
        data.forEach((elementData, i) => elementData.characters.forEach((character, j) => {
            const newRow = characterTable.insertRow();
            newRow.insertCell().textContent = row++;
            if (elementData.element !== lastElement) {
                const elementCell = newRow.insertCell();
                elementCell.rowSpan = elementData.characters.length;
                const elementImage = document.createElement('img');
                elementImage.src = getElementImage(elementData.element);
                elementImage.style.width = '24px';
                elementImage.onerror = function () {
                    elementCell.textContent = elementData.element;
                };
                elementImage.title = elementData.element; // 添加title属性显示元素名称
                elementCell.appendChild(elementImage);
                lastElement = elementData.element;
            }
            const roleCell = newRow.insertCell();
            roleCell.textContent = character.role;
            roleCell.style.color = character.star === "5" ? "#ac7647" : "#846baa";
            const characterImageCell = newRow.insertCell();
            const characterImage = document.createElement('img');
            characterImage.src = getCharacterImage(character.role);
            characterImage.style.width = '48px';
            characterImageCell.appendChild(characterImage);
            newRow.insertCell().style.display = 'none'; // 隐藏星级列
            newRow.insertCell().innerHTML = `<span class="editable" onclick="editField('${storageKey}', 'level', ${i}, ${j})">${character.level}</span>`;
            newRow.insertCell().innerHTML = `<span class="editable" onclick="editField('${storageKey}', 'constellation', ${i}, ${j})">${character.constellation}</span>`;
            newRow.insertCell().innerHTML = `<span class="editable" onclick="editField('${storageKey}', 'talent', ${i}, ${j})">${character.talent}</span>`;
            newRow.insertCell().innerHTML = `<span class="editable" onclick="editField('${storageKey}', 'note', ${i}, ${j})"${tableId === 'characterTable152' ? ' style="display:none;"' : ''}>${character.note}</span>`;
            newRow.style.backgroundColor = getElementColor(elementData.element);
            newRow.insertCell().innerHTML = `<input type="checkbox" ${character.selected ? 'checked' : ''} onchange="updateCheckboxStatus('${storageKey}', this, ${i}, ${j})"${tableId === 'characterTable152' ? ' style="display:none;"' : ''}>`;
        }));
    }
    /* 升级数据表 结束*/
    /* 编辑等级、命座、天赋、备注数据*/
    function editField(storageKey, field, elementIndex, characterIndex) {
        let data = JSON.parse(localStorage.getItem(storageKey)) || [];
        const newValue = prompt("请输入新的值:", data[elementIndex].characters[characterIndex][field]);
        if (newValue !== null) {
            data[elementIndex].characters[characterIndex][field] = newValue;
            localStorage.setItem(storageKey, JSON.stringify(data));
            // 获取另一个表格的 storageKey
            const otherStorageKey = storageKey === '1340' ? '1520' : '1340';
            let otherData = JSON.parse(localStorage.getItem(otherStorageKey)) || [];
            // 找到对应的角色并更新数据
            const elementData = otherData.find(e => e.element === data[elementIndex].element);
            if (elementData) {
                const characterData = elementData.characters.find(c => c.role === data[elementIndex].characters[characterIndex].role);
                if (characterData) {
                    characterData[field] = newValue;
                    localStorage.setItem(otherStorageKey, JSON.stringify(otherData));
                }
            }
            // 重新渲染两个表格
            renderTable('1340', 'characterTable134');
            renderTable('1520', 'characterTable152');
        }
    }
    /* 编辑等级、命座、天赋、备注数据 结束*/
    /* 删除功能*/
    function deleteSelectedRows(storageKey, tableId) {
        const data = JSON.parse(localStorage.getItem(storageKey)) || [];
        data.forEach(elementData => {
            elementData.characters = elementData.characters.filter(character => !character.selected);
        });
        localStorage.setItem(storageKey, JSON.stringify(data));
        renderTable(storageKey, tableId);
        initButtons(); // 重新初始化按钮状态
    }
    /* 删除功能 结束*/
    /* 复选框状态更新功能*/
    function updateCheckboxStatus(storageKey, checkbox, elementIndex, characterIndex) {
        const data = JSON.parse(localStorage.getItem(storageKey)) || [];
        data[elementIndex].characters[characterIndex].selected = checkbox.checked;
        localStorage.setItem(storageKey, JSON.stringify(data));
    }
    /* 复选框状态更新功能 结束*/
    /* 按钮切换功能*/
    function initButtons() {
        const table = document.querySelector('#character-table');
        const rows = table.rows;
        for (let i = 1; i < rows.length; i++) {
            const elementCell = rows[i].cells[1];
            const roleCell = rows[i].cells[2];
            const element = elementCell.querySelector('.element-name').textContent.split(' ')[0];
            const role = roleCell.querySelector('.character-name').textContent;
            const existingElement134 = JSON.parse(localStorage.getItem('1340'))?.find(e => e.element === element);
            const existingElement152 = JSON.parse(localStorage.getItem('1520'))?.find(e => e.element === element);
            const existingCharacter134 = existingElement134?.characters.find(c => c.role === role);
            const existingCharacter152 = existingElement152?.characters.find(c => c.role === role);
            if (existingCharacter134) {
                rows[i].cells[4].querySelector('button').style.display = 'none';
                rows[i].cells[4].querySelector('.addButton134').style.display = 'inline';
            } else {
                rows[i].cells[4].querySelector('button').style.display = 'inline';
                rows[i].cells[4].querySelector('.addButton134').style.display = 'none';
            }
            if (existingCharacter152) {
                rows[i].cells[5].querySelector('button').style.display = 'none';
                rows[i].cells[5].querySelector('.addButton152').style.display = 'inline';
            } else {
                rows[i].cells[5].querySelector('button').style.display = 'inline';
                rows[i].cells[5].querySelector('.addButton152').style.display = 'none';
            }
        }
    }
    /* 按钮切换功能 结束*/
</script>
</html>

 

与妖为邻
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原神4.8版本抽到角色和重点培养数据表
lulei5153的博客
08-20 590
【代码】原神4.8版本抽到角色和重点培养数据表。
修改原神4.8版本双号升级计划角色数据列表：输入添加改成点击按钮就可以添加了
lulei5153的博客
08-17 117
【代码】修改原神4.8版本双号升级计划角色数据列表：输入添加改成点击按钮就可以添加了。
原神4.8版本升级计划数据表
lulei5153的博客
08-09 823
原神4.8版本角色数据升级计划表。
原神4.8版本双号升级计划角色数据列表
lulei5153的博客
08-11 723
【代码】原神4.8版本双号升级计划角色数据列表。
原神4.8版本角色数据
lulei5153的博客
08-08 234
【代码】原神4.8版本角色数据。
原神4.8版本角色数据列表
lulei5153的博客
08-08 192
【代码】原神4.8版本角色数据列表。
修改了原神4.8版本升级数据表
lulei5153的博客
08-18 471
【代码】修改了原神4.8版本升级数据表。
修改原神4.8版本角色列表
最新发布
lulei5153的博客
08-22 44
【代码】修改原神4.8版本角色列表。
版本信息: Microsoft .NET Framework 版本:4.0.30319； ASP.NET 版本:4.8.3928.0
weixin_48584082的博客
01-14 2895
“/”应用程序中的服务器错误。 分析器错误 说明:在分析向此请求提供服务所需资源时出错。请检查下列特定分析错误详细信息并适当地修改源文件。分析器错误消息:未能加载类型“Elabcare.QMS.WebUI.Global”。源错误: 行 1: <%@ Application Codebehind="Global.asax.cs" Inherits="Elabcare.QMS.WebUI.Global" Language="C#" %> 源文件:/globa...
数据结构和算法4.8.pdf
03-10
数据结构和算法4.8.pdf
转转大师数据恢复软件 v2.0.4.8官方版
12-31
为您提供转转大师数据恢复软件下载，转转大师数据恢复软件是一款功能强大的数据恢复工具，它体积小，界面简洁，操作简单。支持恢复多种存储介质数据：电脑硬盘、U盘/移动硬盘、内存卡、CF卡、SD卡、数码相机、记忆棒...
qt类表.zip_QT_qt 类框架_qt4 类表大全_qt4.8类表_qt类表
09-24
"qt4 类表大全"和"qt4.8类表"指的是QT 4系列中的类库参考，QT 4是QT的一个重要版本，包含了众多改进和新特性。在QT 4.8这个稳定版本中，开发者可以找到几乎所有的核心类和模块，包括但不限于： 1. **QWidget** 和 *...
数据管理.MySQL.phpMyAdmin.4.8.0.1.Final.简体中文多语言版.rar
06-29
它提供了一个直观的用户界面，让用户无需编写SQL语句即可完成常见的数据库操作，如创建、修改和删除表，导入导出数据，管理用户权限等。phpMyAdmin 4.8.0.1是其一个重要的版本，引入了多项改进和修复，增强了用户...
汇川PLC编程软件AutoShop V4.8.2.4 版本-安装包-链接地址.txt
10-28
汇川PLC编程软件AutoShop V4.8.2.4 版本_安装包-链接地址
前端开发攻略---在Vue3项目中修改Element-Plus主题色
nibabaoo的博客
08-22 87
在Vue3项目中修改Element-Plus主题色
pywebview 入门
小小宾的博客
08-18 748
pywebview 是一个轻量级的 python 库，旨在简化桌面应用程序的开发。它利用系统的 WebView 组件，使得开发人员可以使用现代 Web 技术（HTML、CSS、JavaScript）来创建用户界面，同时使用 python 处理业务逻辑。pywebview 使得创建跨平台桌面应用程序变得更加简单和高效。
理解现代前端开发：从HTML到React的进化之路
qq_62512874的博客
08-18 648
随着互联网的不断发展，前端开发已经经历了从静态页面到复杂单页应用（SPA）的转变。作为前端开发者，我们需要不断更新知识，掌握最新的技术栈，以应对日益复杂的开发需求。本篇文章将带你从前端的基础知识逐步深入，探索现代前端开发的关键技术，包括HTML、CSS、JavaScript，以及流行的框架如React。前端开发是一个不断演进的领域，新的工具和框架层出不穷。通过不断学习和实践，我们可以掌握最新的前端技术，构建高效、美观且功能丰富的现代Web应用。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 263
【代码】【js】各类前端输入校验方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值