есть ли способ автоматически добавлять кнопки к каждому элементу сгенерированного списка? - PullRequest
Новая
       23

есть ли способ автоматически добавлять кнопки к каждому элементу сгенерированного списка?

1 голос
/ 28 мая 2020

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

function updateSchedules(name = "missing", grade = "missing", date = "missing", time = "missing", status = "missing", id) {
    let table = document.getElementById('schedules');
    let color;

    console.log("Output schedule for " + name);

    if (status.toLowerCase() === 'pending') {
        color = "background-color:rgb(252, 38, 0)";
    } else if (status.toLowerCase() === 'confirmed') {
        color = 'background-color:rgb(0, 255, 13)';
    } else {
        color = 'background-color:rgb(35, 64, 153)';
    }

    table.innerHTML += `
    <tr>
        <td>${name}</td>
        <td>${grade}</td>
        <td id=testday2>${date}</td>
        <td id=testtime2>${time}</td>
        <td style="${color}">${status}</td>
    </tr>`;
}

Есть ли способ добавить кнопки в каждую строку таблицы, которая ссылается на уникальный идентификатор каждой строки, без простого создания кнопок и добавления прослушиватели событий вручную для каждой строки?

1 Ответ

0 голосов
/ 28 мая 2020

Вам нужно добавить еще один тег <td> с тегом <button> и связать его с событием onlick и передать unique_id в параметре функции следующим образом: 

<td><button type="button" onclick="myfunc(${id})"></button></td>

$ {id} может быть строка или число, это зависит от требований

Note-:

  1. Вы должны передать уникальный идентификатор из (backend).
  2. unique_id может быть первичным ключом строки базы данных.

Затем напишите сценарий для обработки кнопки, например -: 

<script>
  function myfunc(unique_id){
     console.log(unique_id);
     // do something
  }
<script>

Более уместно, если вы используете тег привязки с такой кнопкой, как -: 

<td><a onclick="myfunc(${id}")><button type="button"></button></a></td>

Есть несколько способов сделать то же самое. Более уместно, если вы используете ключевое слово this с jquery вместо записи чистого javascript.

...