单击表格行时记录 JSON 字段

Posted 2023-05-08

【中文标题】单击表格行时记录 JSON 字段

【英文标题】：Log JSON field when clicking on a table row

【发布时间】：2020-01-18 03:32:44

【问题描述】：

我正在使用Framework7 构建一个移动应用程序。使用popup 和request 功能，我正在动态构建一个包含JSON 数据的html 表，如下所示：

//Do something when popup is opened
$$(document).on('popup:opened', '.popup-airconSearch', function (e) 
  //Show preloader 
  app.preloader.show();
  //Request json data from URL
  app.request.json('my-URL', function (data) 
    var tableHtml = '';
      for(var i = 0; i < data.length; i+=1)
        tableHtml+= '<tr><td class="numeric-only">' +data[i].brand+ '</td> <td class="numeric- only">' +data[i].model+ '</td></tr>';        
      
    //Add rows to HTML table    
    $$('.data-table #airconDatabase').html(tableHtml);
    app.preloader.hide();    
  )
)

JSON URL 还包含一个 ID 字段，我试图在单击表格行时记录每个条目的 ID。我已经更新了上面的函数：

$$('.data-table #airconDatabase tr').on('click', e =>       
  var id = data[i].regnumber;
  console.log (id);      
) 

但是，控制台将 ID 记录为欠精细。如果我把它改成

var id = data[0].regnumber;

然后，无论单击哪个表行，都会将第一个 JSON 条目 regnumber 字段记录到控制台。如果我把它改成

var id = data[1].regnumber;

然后记录第二个 JSON 条目 regnumber 字段，依此类推。

我哪里错了？

【问题讨论】：

whats i in var id = data[i].regnumber ，您还需要循环遍历，就像您在上述步骤中所做的那样

@KaranTewari 我明白了。但是，如果我在上述步骤中使用相同的循环，那么控制台会记录所有条目的 regnumber 字段，而不仅仅是已单击的表行中的条目。

在请求部分之外，您无权访问数据对象。因此，您必须在表格 html 中包含某种 id 或 data-attribute，您可以稍后再获取。

谢谢@Joerg，看看我的回答:)

【参考方案1】：

我的解决方案：

首先使用 JSON 数据中的行 ID 构建动态 HTML 表：

tableHtml+= '<tr id="' +data[i].am_5_regnumber+ '"><td class..

然后在点击表格行时获取行ID：

$$('.data-table #airconDatabaseTable tbody tr').on('click', function (e) 
    var zaf = $$(this).closest('tr').attr('id');
    console.log (zaf);       
  ) 

除了上述之外，我还必须在 HTML 表格中添加一个 ID，而不仅仅是表格主体。