如何用HTML/CSS/JS实现表格局部刷新及SQLite3数据触发页面跳转

一、无刷新刷新表格（展示SQLite3最新数据） #

前端无法直接读取SQLite3数据库，必须通过后端接口获取最新数据，再用JavaScript动态更新表格内容，具体步骤如下：

1. 后端编写数据接口 #

先实现一个接口（比如/api/get-team-data），从SQLite3查询队伍的最新数据，以JSON格式返回所需字段（team1、team2、team_img1、nm_team1等）。
示例（Python Flask）：

from flask import Flask, jsonify
import sqlite3

app = Flask(__name__)

@app.route('/api/get-team-data')
def get_team_data():
    conn = sqlite3.connect('your-db.db')
    cursor = conn.cursor()
    
    # 查询team1队员数据
    cursor.execute("SELECT player, xp, user_img FROM team1")
    team1 = [{'player': row[0], 'xp': row[1], 'user_img': row[2]} for row in cursor.fetchall()]
    
    # 查询team2队员数据
    cursor.execute("SELECT player, xp, user_img FROM team2")
    team2 = [{'player': row[0], 'xp': row[1], 'user_img': row[2]} for row in cursor.fetchall()]
    
    # 查询队伍基础信息（假设存在对应表）
    cursor.execute("SELECT nm_team, team_img FROM teams WHERE id=1")
    team1_info = cursor.fetchone()
    cursor.execute("SELECT nm_team, team_img FROM teams WHERE id=2")
    team2_info = cursor.fetchone()
    
    conn.close()
    
    return jsonify({
        'team1': team1,
        'team2': team2,
        'nm_team1': team1_info[0],
        'team_img1': team1_info[1],
        'nm_team2': team2_info[0],
        'team_img2': team2_info[1]
    })

if __name__ == '__main__':
    app.run()

2. 前端修改表格结构+编写更新逻辑 #

给表格的表头和表体添加ID方便JS定位，然后编写函数请求接口、动态更新内容：

<!-- 给关键区域添加ID -->
<table class="table table-dark">
    <thead id="table-header">
        <tr>
            <div>
                <p><b><img class="small_img1" src="/static/{{team_img1}}"> {{nm_team1}}  <p >75&nbsp;</p></b></p>
                <p ><b>&nbsp;75</p> <p> {{nm_team2}}<img class="small_img1" src="/static/{{team_img2}}"></b></p>
            </div>
        <tr>
            <th ><b>Name</b></th>
            <th ><b> LEVEL </b></th>
            <th></th>
            <th></th>
            <th style="font-size:20px"><b> LEVEL </b></th>
            <th style="font-size:20px"><b>الاسم</b></th>
        </tr>
        </tr>
    </thead>
    <tbody id="table-body">
        <!-- 初始内容由模板渲染，后续JS会替换 -->
        {%for player in team1 %}
        <tr>
            <td><img class="small_img" src="/static/{{player['user_img']}}"> {{player['player']}}</td>
            <td>{{player['xp']}}</td>
            <td></td>
            {%endfor%}
            <td></td>
            {%for player in team2 %}
            <td>{{player['xp']}}</td>
            <td >{{player['player']}} <img class="small_img" src="/static/{{player['user_img']}}"> </td>
        </tr>
            {%endfor%}
    </tbody>
</table>

<script>
// 更新表格的核心函数
function updateTable() {
    fetch('/api/get-team-data')
        .then(response => response.json())
        .then(data => {
            // 更新表头的队伍信息
            const headerDiv = document.querySelector('#table-header div');
            headerDiv.innerHTML = `
                <p><b><img class="small_img1" src="/static/${data.team_img1}"> ${data.nm_team1}  <p >75&nbsp;</p></b></p>
                <p ><b>&nbsp;75</p> <p> ${data.nm_team2}<img class="small_img1" src="/static/${data.team_img2}"></b></p>
            `;
            
            // 更新表体的队员数据
            const tbody = document.getElementById('table-body');
            let tbodyHTML = '';
            
            // 拼接team1的行内容
            data.team1.forEach(player => {
                tbodyHTML += `
                    <tr>
                        <td><img class="small_img" src="/static/${player.user_img}"> ${player.player}</td>
                        <td>${player.xp}</td>
                        <td></td>
                `;
            });
            
            // 中间空列
            tbodyHTML += '<td></td>';
            
            // 拼接team2的行内容
            data.team2.forEach(player => {
                tbodyHTML += `
                        <td>${player.xp}</td>
                        <td >${player.player} <img class="small_img" src="/static/${player.user_img}"> </td>
                    </tr>
                `;
            });
            
            tbody.innerHTML = tbodyHTML;
            
            // 检查是否触发页面跳转（和第二个需求结合）
            checkForTriggerData(data);
        })
        .catch(error => console.error('更新表格失败:', error));
}

// 设置定时刷新，每5秒更新一次（可根据需求调整）
setInterval(updateTable, 5000);

// 页面加载完成后立即执行一次更新
window.onload = updateTable;
</script>

二、SQLite3出现特定数据时自动切换页面 #

在上述updateTable函数中添加检查逻辑，判断返回的数据是否符合触发条件，满足则跳转页面：

function checkForTriggerData(data) {
    // 示例：检查team1中是否有玩家经验值达到100
    const triggerCondition = data.team1.some(player => player.xp >= 100);
    if (triggerCondition) {
        // 跳转到目标页面
        window.location.href = '/target-page.html';
    }

    // 可根据需求修改触发条件，比如检查特定玩家名称
    // const hasSpecificPlayer = data.team2.some(player => player.player === '指定玩家');
    // if (hasSpecificPlayer) {
    //     window.location.href = '/another-page.html';
    // }
}

注意事项 #

• 后端接口需确保正确关闭数据库连接，避免资源泄漏。
• 定时刷新的间隔不宜过短，防止给服务器造成不必要的压力。
• 若需要更实时的通知，可考虑使用WebSocket替代定时轮询，但实现复杂度更高，普通场景下定时轮询足够。

内容的提问来源于stack exchange，提问作者ahmed basrada