Как преобразовать данные каждой строки таблицы в другую строку запроса и передать данные в другое представление

Question

Как я сделал тело таблицы в моем javascript, который показан в приведенном ниже коде.Поскольку я новичок в программировании, может кто-нибудь сказать, как превратить данные каждой строки таблицы в строку запроса, а затем перейти на другую страницу, такую ​​как HTML?Заранее благодарен

var Ref = firebase.database().ref().child("posts");
Ref.on("child_added", snap => {
  var name = snap.child("name").val();
 var region = snap.child("region").val();
  var form = snap.child("form").val();
  var code = snap.child("code").val();


  $("#table_body").append("<tr><td><a href='postlist.html?key='>" +       code  + "</td><td>" + name + "</td><td>" + region + "</td><td>" + form.  +"</a></td><td>");



  $("#table_body").off("click").on( "click", "tr", function() {

  });

Answer 1

Я бы использовал атрибут данных HTML5 в каждой строке, чтобы связать строку таблицы с записью, хранящейся в постоянном массиве. Обработчик щелчков прочитал бы атрибут данных, вытащил целевую строку из массива, чтобы построить URL.

Итак ...

const posts = []

const Ref = firebase.database().ref().child("posts")

Ref.on("child_added", snap => {
    posts.push({
        'name': snap.child("name").val(),
        'region': snap.child("region").val(),
        'form': snap.child("form").val(),
        'code': snap.child("code").val()
    })
})

Затем используйте этот массив для генерации таблицы:

posts.forEach((post, i) => {
    $("#table_body")
    .append(`
        <tr data-post-index="${i}">
            <td>${post.code}</td>
            <td>${post.name}</td>
            <td>${post.region}</td>
            <td>${post.form}</td>
        </tr>
    `);
})

Я удалил тег <A>, который использовался плохо. Вы не можете начать <A> в одной ячейке таблицы, а затем закрыть ее в другой ячейке таблицы. И, поскольку кажется, что вы хотите, чтобы щелчки строк обрабатывались с использованием javascript, эта привязка является излишней.

Наконец, давайте настроим обработчик кликов. Он будет опираться на тот факт, что каждая строка имеет атрибут HTML, который указывает индекс полной записи в массиве.

$("#table_body").off("click").on( "click", "tr", function() {
    const postIndex = $(this).attr('data-post-index')
    const post = posts[postIndex]
    window.location = `postlist.html?key=${post.code}` // or whatever
});

Предупреждение : я давно не пользовался jquery. Кажется, я вспоминаю, что обработчики событий jquery получают элемент clicked как this. Если это не так, вам может потребоваться немного больше работы внутри этого обработчика, чтобы определить соответствующий <TR> из события.

Если это так, оставьте комментарий, и я смогу в нем разобраться. Или вы могли бы сделать небольшое исследование и выяснить это самостоятельно.