Динамическое изменение идентификаторов таблиц

Контекст

Я работаю над таблицей футбольной лиги. Я хочу, чтобы он обновлялся автоматически, поэтому я добавил несколько функций с помощью кнопки, которая редактирует данные командной таблицы. Вот моя основная функция, которая определяет в зависимости от записанных голов, был ли матч проигранным, выигранным или ничьей:

function PlayMatch()
        {
            /* We get scored and conceded goals */
            var scored = document.getElementById("scored").value;
            var conceded = document.getElementById("conceded").value;
            var error = document.getElementById("error_filling");

            /* We get sure that both fields are filled */
            if ((scored == "") || (conceded == ""))
            {
                /* Show error message */
                if (error.style.display === "none")
                {
                    error.style.display = "block";
                }
                else
                {
                    error.style.display = "block";
                }
            }
            else
            {
                /* Hide error message */
                if (error.style.display === "block")
                {
                    error.style.display = "none";
                }
                else
                {
                    error.style.display = "none";
                }

                /* We compare and decide if the match was a won, a draw or a lost */
                if (scored > conceded)
                {
                    Won();
                }
                else
                {
                    if (scored == conceded)
                    {
                        Draw();
                    }
                    else
                    {
                        if (scored < conceded)
                        {
                            Lost();
                        }
                    }
                }
            }
        }

Функции Выигрыш, Ничья и Поражение используются для изменения данных команды в таблице. В конце каждой из этих трех функций вызывается функция с именем Count, которая позволяет изменить количество забитых мячей, количество голов против забитых и разницу забитых мячей в таблице. Я не показываю их коды, потому что знаю, что они работают, и этот вопрос будет очень длинным. Вот коды, соответствующие средству обновления данных команды, которое включает скрытое сообщение об ошибке, используемое в функции PlayMatch:

<fieldset>
        <legend>Malaga CF</legend>

        <button onclick = "PlayMatch()">Play Match</button>

        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

        <div id = "error_filling" style = "display:none; color:red; font-family:Impact">Both fields must be filled!</div>

        <br><br>

        Scored goals<input type = "text" id = "scored" size = "2">

        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

        Conceded goals<input type = "text" id = "conceded" size = "2">
    </fieldset>

Наконец, вот таблица рейтингов:

<div id = "DIV_league_table" align = "left" style = "display:block;">
        <table width = "60%" border = "0" style = "text-align:center;">
            <tr class = "top_row">
                <th width = "7%">POS</th>
                <th width = "35%">TEAM</th>
                <th width = "7%">PLYD</th>
                <th width = "7%">WON</th>
                <th width = "7%">DRW</th>
                <th width = "7%">LST</th>
                <th width = "7%">FVR</th>
                <th width = "7%">AGT</th>
                <th width = "7%">GD</th>
                <th width = "7%">PTS</th>
            </tr>
            <tr class = "promotion_row" style = "background:#01DF01;">
                <td id = "position">1</td>    <!-- Position -->
                <td id = "team" align = "left">&nbsp;&nbsp;&nbsp;<img src = "img/teams/malaga.png" width = "15" height = "15">&nbsp; Malaga CF</td>
                <td id = "played">0</td>  <!-- Played matches -->
                <td id = "wins">0</td>    <!-- Wins -->
                <td id = "draws">0</td>   <!-- Draws -->
                <td id = "loses">0</td>   <!-- Loses -->
                <td><span type = "text" id = "goalsInFavour">0</span></td>  <!-- Goals in Favour -->
                <td><span type = "text" id = "goalsAgainst">0</span></td>   <!-- Goals Against -->
                <td><span id = "goalsDifference"></span></td> <!-- Goals Difference -->
                <td id = "points"><b>0</b></td>   <!-- Points -->
            </tr>
        </table>
    </div>


Вопрос

Сейчас я планирую добавить еще 21 команду, но если я буду использовать разные теги для каждой команды, код будет очень большим, а сейчас я этого не хочу. Это код, который заменяет предыдущее средство обновления данных команды:

<fieldset>
        <legend>Match simulator</legend>

        <select id = "local_selector" onchange = "AssignSide();">
            <option value = "1">Málaga CF</option>
            <option value = "2">Granada CF</option>
            <option value = "3">Deportivo</option>
            <option value = "4">Alcorcón</option>
            <option value = "5">UD Las Palmas</option>
            <option value = "6">Albacete</option>
            <option value = "7">RCD Mallorca</option>
            <option value = "8">Oviedo</option>
            <option value = "9">Almería</option>
            <option value = "10">Real Sporting</option>
            <option value = "11">Elche CF</option>
            <option value = "12">Osasuna</option>
            <option value = "13">Numancia</option>
            <option value = "14">Rayo Majadahonda</option>
            <option value = "15">CD Lugo</option>
            <option value = "16">Tenerife</option>
            <option value = "17">Reus Deportiu</option>
            <option value = "18">Zaragoza</option>
            <option value = "19">Cádiz</option>
            <option value = "20">Extremadura</option>
            <option value = "21">Nástic</option>
            <option value = "22">Córdoba</option>
        </select>
        <input type = "text" id = "scored_local" size = "2">
        <button onclick = "JugarPartido()">Jugar Partido</button>
        <input type = "text" id = "conceded_visitor" size = "2">
        <select id = "visitor_selector" onchange = "AssignSide();">
            <option value = "1">Málaga CF</option>
            <option value = "2">Granada CF</option>
            <option value = "3">Deportivo</option>
            <option value = "4">Alcorcón</option>
            <option value = "5">UD Las Palmas</option>
            <option value = "6">Albacete</option>
            <option value = "7">RCD Mallorca</option>
            <option value = "8">Oviedo</option>
            <option value = "9">Almería</option>
            <option value = "10">Real Sporting</option>
            <option value = "11">Elche CF</option>
            <option value = "12">Osasuna</option>
            <option value = "13">Numancia</option>
            <option value = "14">Rayo Majadahonda</option>
            <option value = "15">CD Lugo</option>
            <option value = "16">Tenerife</option>
            <option value = "17">Reus Deportiu</option>
            <option value = "18">Zaragoza</option>
            <option value = "19">Cádiz</option>
            <option value = "20">Extremadura</option>
            <option value = "21">Nástic</option>
            <option value = "22">Córdoba</option>
        </select>

        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

        <div id = "error_filling" style = "display:none; color:red; font-family:Impact">Both fields must be filled!</div>
    </fieldset>

Я предпочитаю, чтобы таблица оставалась прежней, каждая команда с одинаковым идентификатором «проигрывает» из-за проигранных игр. Затем, если я выберу, например, Malaga CF в раскрывающемся списке local_selector, изменю его переменные на «plays_local», «wins_local» и т. д., Чтобы отредактировать их в зависимости от результата матча, не редактируя остальные команды, а затем вернув их обратно в «сыгранный» , "выигрывает" и т. д.
Это возможно? При необходимости я могу предоставить дополнительную информацию. Извините, если я забыл перевести некоторую часть кода (у меня изначально имена и идентификаторы на испанском языке) или если я опубликовал так много информации, но я хотел дать как можно больше контекста, поскольку эти переменные влияют на многие части кода.

Привет, Карлос! Прежде чем я углублюсь в это, никогда не давайте один и тот же идентификатор двум разным элементам на странице. Используйте классы или атрибуты данных. Это правило не является исключением, оно только повредит ваш код и помешает работе.

zfrisch 31.10.2018 19:59

@zfrisch Я немного об этом имел в виду. Сначала я подумал, что могу использовать эти значения в селекторе, чтобы перейти к <tr> определенной команды и изменить там ее переменные, потому что они находятся в том же <tr>, но это не похоже на лучший способ сделать это

Carlos Vega 31.10.2018 20:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
42
0

Другие вопросы по теме