Question

因为我在javascript中制作了表格主体，如以下代码所示。由于我是编程新手，所以谁能说出如何将每个表行的数据转换成querystring然后传递到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。

所以...

 updateChartData(){
    console.log('in update chart data')
    console.log('temp values' + this.temperatureArray)
    this.chartData1[0].data =  this.temperatureArray
    this.labels = this.timeArray
  }

然后，使用该数组生成表：

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>，然后在另一个表单元格中将其关闭。而且，由于您似乎希望使用javascript处理行单击，因此该锚是多余的。

最后，让我们设置点击处理程序。它将依赖于以下事实：每行都有一个HTML属性，该属性指示数组中完整记录的索引。

<A>

警告：自从我使用jquery已经有一段时间了。我似乎记得，jquery事件处理程序收到的单击元素为$("#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 });。如果不是这种情况，则您可能需要在该处理程序中做更多工作以从事件中识别相关的this。

如果是这种情况，请发表评论，我可以进行深入探讨。或者，您可以进行一些研究并自己弄清楚。

如何将每个表行的数据转换为不同的查询字符串并将数据传递到另一个视图

1 个答案: