???㈢?姣???锛?瀹??惰冻??姣???瀹?搴?锛??╂?ㄦ???¤冻??涓??????ㄦ??
????甯??堕?淬??锛?2024-06-28 11:19:16
瀹??惰冻??姣???瀹?搴?锛??╂?ㄦ???¤冻??涓??????ㄦ??
script.js
javascript
// ?ㄥ?????
const matches = [];
let selectedMatchId = null;// ??濮???
window.onload = () => {fetchMatches();
};// ?峰??姣?璧??版?
const fetchMatches = () => {fetch('https://example.com/api/matches').then(response => response.json()).then(data => {matches.push(...data);renderMatches(data);}).catch(error => {console.error('Error fetching matches:', error);});
};// 娓叉??姣?璧???琛
const renderMatches = (data) => {const tableBody = document.getElementById('matches').getElementsByTagName('tbody')[0];for (let match of data) {const row = tableBody.insertRow();row.onclick = () => selectMatch(match.id);const homeTeamCell = row.insertCell();homeTeamCell.innerHTML = match.homeTeam;const scoreCell = row.insertCell();scoreCell.innerHTML = `${match.homeGoals} - ${match.awayGoals}`;const awayTeamCell = row.insertCell();awayTeamCell.innerHTML = match.awayTeam;const timeCell = row.insertCell();timeCell.innerHTML = match.time;}
};// ???╂?璧?
const selectMatch = (matchId) => {selectedMatchId = matchId;fetchMatchDetails(matchId);
};// ?峰??姣?璧?璇︽??
const fetchMatchDetails = (matchId) => {fetch(`${matchId}`).then(response => response.json()).then(data => {renderMatchDetails(data);}).catch(error => {console.error('Error fetching match details:', error);});
};// 娓叉??姣?璧?璇︽??
const renderMatchDetails = (data) => {const matchDetails = document.getElementById('match-details');matchDetails.innerHTML = `
涓婚??锛?${data.homeTeam}
瀹㈤??锛?${data.awayTeam}
姣???锛?${data.homeGoals} - ${data.awayGoals}
杩???锛?
${data.goals.map(goal => `
-
${goal.player} (${goal.minute}')
`).join('')}
`;
};
