如何根据数据库结果切换折叠表行

Question

这里我有一个包含数据的表格，当我点击第一个表格行时，它会显示与其值相关联的图表。看起来很好。

但问题是，当我点击/切换第一行时，它会显示他们的数据，但其他行无法显示他们的图表需要第一行。

这是我的jquery代码

function change_acc(acc_id){

$('#accordion').attr('id','accordion'+acc_id);

$.ajax({
    url: "<?php base_url();?>/charts/getsome",
    method: "POST",
        data: {
            graphYear:acc_id
        },
    success: function(data) {
        // alert(data);
        var data = JSON.parse(data);
        var month = [];
        var customers = [];
        // var margin = [];

        for(var i in data) {
            month.push("" + data[i].dated);
            customers.push(data[i].profit);
            // margin.push(data[i].margin);
        }
        var chartdata = {
            labels: month,              
            datasets : [
                {
                    label: 'monthly customers for Year '+acc_id,
                    backgroundColor: 'rgba(200, 200, 200, 0.75)',
                    borderColor: 'rgba(200, 200, 200, 0.75)',
                    hoverBackgroundColor: 'rgba(200, 200, 200, .45)',
                    hoverBorderColor: 'rgba(200, 200, 200, 1)',
                    data: customers,
                    fill: true
                }

            ]

        };

        var frame = $("#mycanvas");

        var barGraph = new Chart(frame, {
            type: 'line',               
            data: chartdata         
        });
    },
    error: function(data) {
        console.log(data);
    }
});

这是我的HTML代码

    <div class="row">
        <div class="container">
        <table class="table table-hover">
    <thead>
        <th>year</th>
        <th>Performance</th>
        <th>profit</th>
    </thead>

    <tbody>
    <?php
foreach($data as $value)
{ ?>
        <tr data-toggle="collapse" onclick="change_acc(<?php
    echo $value['year']; ?>)" data-target="#accordion<?php
    echo $value['year']; ?>" class="clickable">
            <td><?php
    echo $value['year'] . "<input type='hidden' id='acc_id' value='" . $value['year'] . "'>"; ?></td>
            <td></td>
            <td><?php
    echo $value['totalsum']; ?></td>
        </tr>
        <?php
} ?>
        <tr>
            <td colspan="3">
                <div id="accordion" class="collapse">

                <select id="selFromYear">
            <option value="1">January</option>
            <option value="2">Fabuary</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
        </select>
         <select id="selToYear">
            <option value="1">January</option>
            <option value="2">Fabuary</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
        </select>
        <button onclick="getAnalytics()">Get Analytics</button>
        <button onclick="getLiteAnalytics(3)">Get 3 Months</button>

        <button onclick="getLiteAnalytics(3)">All data</button>
        <div id="chart-container">
            <canvas id="mycanvas"></canvas>
        </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>
</div>
</div>

此处是表格的屏幕截图，其图表为

请帮帮我，我哪里错了？感谢

Answer 1

在ajax成功后立即重置accordion id：

喜欢这样：

$('#accordion'+acc_id).attr('id','accordion');

有一个例子

 function change_acc(acc_id){



    $('#accordion').attr('id','accordion'+acc_id);

    $.ajax({
        url: "<?php base_url();?>/charts/getsome",
        method: "POST",
            data: {
                graphYear:acc_id
            },
        success: function(data) {   
            $('#accordion'+acc_id).attr('id','accordion');      
            var data = JSON.parse(data);
            var month = [];
            var customers = [];
            // var margin = [];

            for(var i in data) {
                month.push("" + data[i].dated);
                customers.push(data[i].profit);
                // margin.push(data[i].margin);
            }
            var chartdata = {
                labels: month,              
                datasets : [
                    {
                        label: 'monthly customers for Year '+acc_id,
                        backgroundColor: 'rgba(200, 200, 200, 0.75)',
                        borderColor: 'rgba(200, 200, 200, 0.75)',
                        hoverBackgroundColor: 'rgba(200, 200, 200, .45)',
                        hoverBorderColor: 'rgba(200, 200, 200, 1)',
                        data: customers,
                        fill: true,
                        lineTension:0
                    }

                ]

            };

            var frame = $("#mycanvas");

            var barGraph = new Chart(frame, {
                type: 'line',               
                data: chartdata,
                // options: {
                //        responsive: true,
                //        tooltips: {
                //         callbacks: {
                //            afterBody: function(t, d) {
                //               return 'Margin: ' + margin[t[0].index];
                //            }
                //         }
                //      }
                //     }
            });
        },
        error: function(data) {
            console.log(data);
        }
    });

  }