Question

我在 JSON 文件中有大量值，其中包含场地名称及其联系信息以及说明。我想生成一个表，列出我页面上JSON文件的内容。我希望创建一个实时搜索功能，删除与检测到的每个keyUp不再相关的每个条目。

JSON

[
    {
        "name": "Aquarium Caf&eacute; Bar",
        "site": "http://www.aquariumcafebar.ca",
        "address": "2923 Masson 728-6116",
        "genre": "default"
    },‎
    {
        "name": "Ar&eacute;na Pierre &#8220;Pete&#8221; Morin",
        "site": "none",
        "address": "1925 St-Antoine 634-3471",
        "genre": "default",
    }
]

建议的HTML

<table>
    <thead>
        <tr>
            <th>Venue</th>
            <th>Address</th>
            <th>Website</th>
            <th>Genre</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Aquarium Caf&eacute; Bar</td>
            <td>2923 Masson 728-6116</td>
            <td>http://www.aquariumcafebar.ca</td>
            <td>Rock</td>
        </tr>
    </tbody>
</table>

我对如何从jQuery中的venues.json文件中获取JSON有一个模糊的想法，但是一旦我将它与.append（）包含所有信息，我真的不知道如何处理它。我只是想在这里找一些语法帮助！

哦，如果您对用户搜索时如何更新表格有任何明智的想法，我们将不胜感激！

爱

BenjiBee

Answer 1

您可以使用jQuery.tmpl使用如下模板从JSON数据创建表：

<script type="text/html" id="VenueTemplate">
  <table id="VenueResults">
    <thead>
      <tr>
        <th>Venue</th>
        <th>Address</th>
        <th>Website</th>
        <th>Genre</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>${name}</td>
        <td>${address}</td>
        <td>${site}</td>
        <td>${genre}</td>
      </tr>
    </tbody>
  </table>
</script>

这个jQuery渲染模板并将其注入名为Container的占位符/容器div：

var yourJSONData;  // Assuming you've loaded this from wherever.

$('#VenueTemplate').tmpl(yourJSONData)
                   .appendTo('#Container');

然后使用the quickSearch plugin以交互方式过滤该数据。它可以应用于表格（在渲染之后，当然），如下所示：

$('#SearchInputField').quicksearch('#VenueResults tbody tr');

Answer 2

如果您不想使用插件，这是一项非常简单的任务。这假定为jQuery 1.4或更晚。

试一试： http://jsfiddle.net/ZBKSg/

的jQuery

var $tbody = $('table > tbody');

   // Assumes the data is assigned to a variable "data"
for(var i = 0, len = data.length; i < len; i++) {
    var $tr = $('<tr />');
    $('<td/>',{text:data[i].name}).appendTo($tr);
    $('<td/>',{text:data[i].site}).appendTo($tr);
    $('<td/>',{text:data[i].address}).appendTo($tr);
    $('<td/>',{text:data[i].genre}).appendTo($tr);
    $tr.appendTo($tbody);
}

HTML

<table>
    <thead>
        <tr>
            <th>Venue</th>
            <th>Address</th>
            <th>Website</th>
            <th>Genre</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

你可能会加速它有点像这样：

试一试： http://jsfiddle.net/ZBKSg/1/

var $tbody = $('table > tbody');
var row = '<tr><td></td><td></td><td></td><td></td></tr>'

for(var i = 0, len = data.length; i < len; i++) {
    var $tr = $(row);
    $tr.children(':first').text(data[i].name)
                .next().text(data[i].site)
                .next().text(data[i].address)
                .next().text(data[i].genre);
    $tr.appendTo($tbody);
}

jQuery，JSON，搜索等

2 个答案: