Question

我目前正在做什么，

我想要什么，

HTML

<div class="main-section">
    <div class="main-section_head">
         <h2> Cricket Match Events</h2>

        <img src="http://lode.nl/images/icon_collapse.png" />
    </div>
    <div class="main-section_body">
        <table id="cricketTable" class="cricket-table">
            <thead>
                <tr>
                    <th>Venu Title</th>
                    <th>Date</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

JS

loadEvents: function (data) {
    var crickekBody = $("#cricketTable tbody").empty();

    if (data && data.length > 0) {
        crickekBody.siblings("thead").show();
        $(data).each(function (i) {
            var row = $("<tr class='cricket-row' data-eid='" + i + "'>" +
                "   <td class='cricket-cell'>" +
                "       <div class='hover' title='Go to Event Site'>" + this.EventTitle + "</div>" +
                "   </td>" +
                "   <td class='cricket-cell'>" +
                "       <span>" + Crick.Utls.getDate(this.EventDate) + "</span>" +
                "   </td>" +
                "   <td class='cricket-cell'>" +
                "       " + Crick.Others.parseStatus(this.Status) +
                "   </td>" +
                "</tr>")
                .appendTo(crickekBody);

            var rowObj = this;

            row.children("td:first").on("click", function () {
                Crick.Utls.openNewTab(rowObj.EventUrl);
            });
        });
    } else {
        crickekBody.siblings("thead").hide();
        Crick.Utls.addAnnotation(crickekBody, "No events details found");
    }
},

CSS

在jsFiddle中找到它 - http://jsfiddle.net/jer0nLxs/2/

我不确定如何继续推进以下任务，

    var listOfYears = [];
    $(data).each(function (i) {
        var year = new Date(this.EventDate).getFullYear();
        if ($.inArray(year, listOfYears) === -1)
            listOfYears.push(year);
    });

我需要根据数据中提供的事件日期（来自服务响应）动态生成YEARS SECTIONS（可折叠），所以，如果我有两个事件日期，01/01/2014 ＆安培; 2011年1月1日，然后我想生成两个部分，一个用于2014年，一个用于2011年。如果我只有一个日期为01/01/2015的事件，那么我只想基于此生成一个部分。

请注意，这是一个更大的解决方案的一部分，因此我无法提供所有内容，因为隐私政策，以上代码因隐私原因而被修改。和IE-8是必须要求的。感谢

按年动态生成部分

0 个答案: