基于ID生成从JSON到HTML表格 [英] Generating from JSON to HTML Table based on ID

问题描述

所以我对JSON几乎是全新的，对jquery来说也是相当新颖的。我一直在努力学习如何基于JSON数据生成HTML表格。但更重要的是，我将在其中放置多个包含不同JSON数组的表。

因此，使用给定的解决方案，我成功地能够生成一个表中的数据，但由于没有指定哪个表到哪个表生成它，它会将数据生成到页面上的每个表中。我一直试图找出在哪里添加特定的表ID，但我把它们放在哪里似乎都是错误的。

基本代码可以工作，但会将其放入每个表中：

  var tr; 
 for（var i = 0; i  tr = $（'< tr />'）; 
 tr.append（< td> + cte [i] .accountName +< / td>）; 
 tr.append（< td> + cte [i] .advisor +< / td>）; 
 tr.append（< td>+Link.link（cte [i] .link）+< / td>）; 
 $（'table'）。append（tr）; 
} 
  

我的html表格代码：

 < table id =cteTable> 
< tr> 
< th>帐户名称< / th> 
顾问< / th> 
< th>链接< / th> 
< / tr> 
< / table> 
 
< table id =saTable> 
< tr> 
< th>帐户名称< / th> 
顾问< / th> 
< th>链接< / th> 
< / tr> 
< / table> 
  

而当我尝试时

  tr = $（'＃cteTable< tr />'）; 
或
 tr = $（'＃cteTable tr'）; 
  

不是生成一个表，而是创建任何东西。我知道我遇到的这个问题是由于缺乏对jquery和json的知识。所以任何帮助或正确的方向指导将不胜感激。

解决方案

第一部分

  tr = $（'< tr />'）; 
  

是不必要的，它不会返回任何内容，使用jquery获取html元素，只需将它的标记名称/班级名称/编号在报价单内。

  $（'table'）
 $（'。class'）
 $（'＃id '）
  

将生成的tr（实际上是一个字符串形式的html）在表格中使用append函数的表格就像这样

  $（'＃tableID'）。append（tr）
  

当您使用表格标签名称时，它将获取当前页面上的所有表格并将您的tr附加到他们。

So I am pretty much brand new to JSON and fairly new to jquery. I've been trying to learn how to generate an HTML table based on the JSON data. But more importantly, I'm going to have multiple tables with different JSON arrays inside of them.

So using the solution given here, I am successfully able to generate the data into a table, but since no where does it specify which table to generate it into, it generates the data into every table on the page. I've been trying to figure out where to add the specific table ID's but everywhere I place them seems to be wrong.

Base code that works but puts it into every table:

    var tr;
    for (var i = 0; i < cte.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + cte[i].accountName + "</td>");
        tr.append("<td>" + cte[i].advisor + "</td>");
        tr.append("<td>" + "Link".link(cte[i].link) + "</td>");
        $('table').append(tr);
    }

My html table code:

<table id="cteTable">
    <tr>
        <th>Account Name</th>
        <th>Advisor</th>
        <th>Links</th>
    </tr>
</table>

<table id="saTable">
    <tr>
        <th>Account Name</th>
        <th>Advisor</th>
        <th>Links</th>
    </tr>
</table>

And when I try doing

tr = $('#cteTable <tr/>');
or
tr = $('#cteTable tr');

Instead of generating into one table, it doesn't create anything. I know this problem I'm having is due to a lack of knowledge of jquery and json. So any help or guidance in the right direction would be greatly appreciated.

解决方案

The first part of

tr = $('<tr/>');

Is unnecessary, it returns nothing, to fetch an html element using jquery you simply put it's tag name / class name / Id inside the quotes.

$('table')
$('.class') 
$('#id') 

To put your generated tr (which is practically an html in the form of a string) into the table you use the append function on the table like so

$('#tableID').append(tr) 

When you're using the table tag name it takes all the tables on the current page and appends your tr to them.

这篇关于基于ID生成从JSON到HTML表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！