Флажок идентификатор строки таблицы HTML

Я хотел бы иметь идентификатор таблицы базы данных в каждой строке в качестве значения флажка динамической таблицы html.

Я использую ajax для извлечения данных из базы данных mysql и создаю новую переменную в виде html-текста для добавления в тело таблицы.

Код HTML

<div class = "col-sm-6" id = "ftbl">
    <label for = "urbandata">View urban data</label>
    <table class = "table table-bordered table-striped">
      <thead>
        <tr>
          <th>Check</th>
          <th>ID</th>
          <th>Type</th>
          <th>Master</th>
          <th>Slave</th>
          <th>Orbit</th>
          <th>Mode</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
</div>

Код JS

$.ajax({
    url: "fetchurban.php",
    method: "POST",
    data:{id:id},
    dataType: "JSON",
    success: function(data){
      if (data){
      var trHTML = '';
        $.each(data, function (i, item) {
            trHTML +='<tr><td><input type = "checkbox" id = "checkview" onclick = "QuickView()" name = "'+ item.TblID +'"></td><td>' + item.Type + '</td><td>' + item.Master + '</td><td>' + item.Slave + '</td><td>' + item.Orbit + '</td><td>' + item.Mode + '</td><td><a href='+ item.ImgTIF+ ' title = "Download High Quality" data-toggle = "tooltip"><span class = "glyphicon glyphicon-download"> </span></a><a href=#?id='+ item.ImgLow + ' title = "Download Low Quality" data-toggle = "tooltip"><span class = "glyphicon glyphicon-cloud-download"></span></a></td></tr>' ;
        });
        $('#ftbl tbody').append(trHTML);
      }
    }
  })
})

Если пользователь установит флажок, я хотел бы иметь идентификатор таблицы базы данных. Теперь с этим кодом у меня один и тот же идентификатор для всех строк таблицы

Идентификаторы должны быть уникальными в HTML-документе, поэтому вы не можете использовать здесь id = "checkview" для начала. // Вы имеете в виду часть name = "'+ item.TblID +'" здесь? Что ж, тогда, вероятно, все ваши предметы имеют одинаковую TblID ценность для начала.

04FS 17.05.2019 10:23

Можете ли вы поделиться своим JSON, полученным с сервера? Как говорит @04FS, у вас, вероятно, есть тот же идентификатор в вашем json.

Maelig 17.05.2019 10:43
Поведение ключевого слова "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
165
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете установить идентификатор как элемент data- ввода:

function QuickView(element) {
  var rowId = $(element).data('id');
  // here comes the rest of your code.
}

$.ajax({
    url: "fetchurban.php",
    method: "POST",
    data:{id:id},
    dataType: "JSON",
    success: function(data){
      if (data){
      var trHTML = '';
        $.each(data, function (i, item) {
            trHTML +='<tr><td><input type = "checkbox" data-id = "'+ item.TblID +'" onclick = "QuickView(this)"></td><td>' + item.Type + '</td><td>' + item.Master + '</td><td>' + item.Slave + '</td><td>' + item.Orbit + '</td><td>' + item.Mode + '</td><td><a href='+ item.ImgTIF+ ' title = "Download High Quality" data-toggle = "tooltip"><span class = "glyphicon glyphicon-download"> </span></a><a href=#?id='+ item.ImgLow + ' title = "Download Low Quality" data-toggle = "tooltip"><span class = "glyphicon glyphicon-cloud-download"></span></a></td></tr>' ;
        });
        $('#ftbl tbody').append(trHTML);
      }
    }
  })
})

Вот демо вышеперечисленного.

Обновлено:

Я удалил исходное предложение о том, что нельзя использовать целое число для атрибута ID, поскольку оно больше недействительно, как указал Квентин в комментариях. Иногда трудно забыть то, чему ты когда-то научился.

«Поскольку идентификатор HTML-элемента не может начинаться с целого числа» — это ограничение было снято много лет назад, когда вышел HTML 5. Единственными ограничениями являются «уникальность» и «без пробелов».

Quentin 17.05.2019 11:37

@Quentin, мой плохой, исправил это в своем посте. Спасибо за указание на это!

SaschaM78 17.05.2019 11:47

Я хотел бы поблагодарить вас! Это решение то, что я хочу!

John Deligiannis 18.05.2019 07:59

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