Question

我正在尝试使用来自webAPI控制器的数据生成表。我已经使该部分正常工作，但是使用jQuery动态添加表标题和行时遇到了麻烦。

我尝试了各种方法，但是它们都不返回我需要的结果。

这是我的HTML代码：

<div class="row">
    <div class="col-4" id="table" >

    </div>
    <div class="col-8">
        <div class="row">


            <div class="col-12" id="graph">
                <p class="text-center">Select an expiation description to continue...</p>

            </div>
        </div>
    </div>
</div>

我正在尝试将动态表添加到div id =“ table”。

这是到目前为止我尝试过的最新代码：

<script>



        $('<h2>').addClass('text-center').text('Speeding Category by Year').appendTo('#table');
        var $mainTable = $('<table>').addClass('table table-striped table-hover');
        $('<thead>').appendTo($mainTable);
        $($mainTable.find('thead')).append('<tr></tr>');
        $($mainTable.find('thead tr')).append('<th class="text-left">Speeding Category</th> <th class="text-right">Tickets Issued</th>')


        var array = $.ajax({
            url: "/api/ExpiationsWebAPI",
            type: "GET",
            dataType: "json",                       
            success: function () { alert("Sucess"); },            
            timeout: 10000

        });

        var year = 0;
        i = 1;
        array.done(function (data) {
            $.each(data, function (i, obj) {
                if (obj.year != year) {

                    year = obj.year
                    $('<thead>').appendTo($mainTable);
                    $('<tr>').appendTo($mainTable.find('thead').eq(i));
                    $('<th>').text(obj.year).addClass('table-info text-center').attr('colspan', '3').appendTo($mainTable.find('.year' + obj.year));    
                    i++;

                }
            })

        })

        $mainTable.appendTo('#table');


    </script>

这就是这段代码呈现的内容

Current code

这是我要实现的目标：

The result i am looking for

如何使用jQuery动态将thead，tr，th和td添加到表中？

0 个答案: