Javascript 如何在主干网中建立垂直和水平数据相互关联的表

我正在根据这些年来参加某项运动的国家建立一个体育图表

我有一份国家名单（6个国家）。我有一份年份清单（1970-2016）

我有一张桌子，上面是年份（水平方向），左边是国家（垂直方向）。在年份的每个单元格下，我必须输入是或否（无论国家是否参与） 这就是我构建数据的方式：

countries: [
   {name: 'UK', years: [ 1999, 2003 ] },
   {name: 'US', years: [ 1992, 2005 ] },
]

创建姓名列表（在左侧）很容易 但不知道如何在顶端创造年份，然后如何将它们与国家联系起来

---

我应该在一个单独的集合中有年份吗？

假设您有一个带有两个属性的

国家

模型，

名称

和

年份

（数组）

我的回答就像你在使用模板一样。如果你不是，那没关系，因为逻辑是一样的

var Countries = Backbone.Collection.extend({
    model:Country,
    tpl:_.template($('#table-tpl').html()),
    render:function(){
        var tableHtml = this.tpl({countries:this.collection.toJSON()})
        this.$el.html(tableHtml)
        return this;
    }
})

HTML模板

<script type="text/template" id="table-tpl">
<table>
    <thead>
        <tr>
        <th>Country</th>
            <% _.each(_.range(1970,2017),year=>{%>
                <th><%= year %></th>
            <% }) %>
        </tr>
    </thead>
    <tbody>
        <% _.each(countries, country =>{%>
            <tr>
                <td><%= country.name %></td>
                <% _.each(_.range(1970,2017),year=>{%>
                    <th><%= _.indexOf(country.years, year, true) != -1 ? 'Yes':'No'  %></th>
                <% }) %>
            </tr>
        <% }) %>
    </tbody>
</table>
</script>

国家
{%>
{%>
{%>

注意：

\uxof（country.years，year，true）

中的

true

表示对输入数组

country.years

进行排序。这允许更快的搜索

小提琴示例：

---

视图是否也会更新/修改集合，还是只显示这些数据？谢谢！你太棒了。