Ajax ответ добавляется в таблицу

Question

Я делаю проект django, где в ajax я вызываю свою функцию и получаю ответ в массиве, а затем добавляю этот ответ в свою HTML-таблицу.

<script>
        $(document).ready(function(){
            $.ajax({
                method : 'POST',
                url : '/home',
                data: {
                csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function(data){
                var res = $.parseJSON(data);
                var trHTML = '';
                if (res.code == '200'){
                    for(i in res.data){
                    console.log(res.data)
                    console.log(res.data[i].id);
                    trHTML +=
                            '<tr><td><div><img src='
                            + res.data[i].poster_url + '>'
                            + '</td><td><div>'
                            + res.data[i].name
                            + '</div><div></div></td><td>'
                            + res.data[i].content_types_id
                            + '</td><td>'
                            + 'Africa'
                            + '</td><td><ul>'
                            + '</ul><td>';

                    }
                } else {
                    alert('Cart is empty');
                }
                $('#table-list').append(trHTML);


                },
                error: function(data){
                    console.log(data);

                },


            })
        })

    </script>

html коды

<table id="table-list" class="col-md-12 table-bordered table-striped table-condensed cf">
                        <thead class="cf">
                            <tr>
                                <th width="10%">&nbsp;</th>
                                <th width="30%" class="numeric">File Name</th>
                                <th width="15%" class="numeric">Content Type</th>
                                <th width="16%" class="numeric">Geo Rights</th>
                                <th width="16%" class="numeric">License</th>
                                <th width="13%" class="numeric">Action</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td data-title=""><div class="product"><img src="{% static 'images/p1.jpg' %}"></div></td>
                                <td data-title="File Name">
                                <div class="fl">The Lost World: Jurassic Park</div>
                                <div><button type="button" class="btn btn-white"><i class="fas fa-upload"></i> Upload Video</button></div>
                                </td>
                                <td data-title="Content Type">Video</td>
                                <td data-title="Geo Rights">Asia Pacific, Africa</td>
                                <td data-title="License">Active Licenses:16</td>
                                <td align="left" valign="middle" data-title="Action">
                                <ul class="action_icon">
                                    <li><i class="fas fa-pencil-alt"></i></li>
                                    <li><i class="fas fa-trash-alt"></i></li>
                                    <li><i class="fas fa-ban"></i></li>
                                </ul>
                                </td>

                            </tr>

Но проблема в том, что, когда я добавляю интерфейс, он показывает только эти столбцы, а я хочу, чтобы раздел кнопки и раздел действий были целыми. Но я не могу этого добиться, как я могу это сделать?

Answer 1

JS

<script>
    $(document).ready(function(){
        $.ajax({
            method : 'POST',
            url : '/home',
            data: {
            csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success: function(data){
                var res = $.parseJSON(data);
                var trHTML = '';
                if (res.code == '200'){
                    for(i in res.data){
                        console.log(res.data)
                        console.log(res.data[i].id);
                        trHTML = $(`<tr>
                            <td><div><img src= ${res.data[i].poster_url}></td> 
                            <td><div>${res.data[i].name}</div><div></div></td> 
                            <td>${res.data[i].content_types_id}</td>
                            <td>Africa</td>
                            <td><ul>
                                  <li><i class="fas fa-pencil-alt"></i></li>
                                  <li><i class="fas fa-trash-alt"></i></li>
                                  <li><i class="fas fa-ban"></i></li>
                                 </ul>
                            <td></tr>`);
                         $('#table-list').append(trHTML);
                    }
                } else {
                    alert('Cart is empty');
                }
            },
            error: function(data){
                console.log(data);
            },
        })
    })
</script>

HTML

<table class="col-md-12 table-bordered table-striped table-condensed cf">
    <thead class="cf">
         <tr>
            <th width="30%" class="numeric">File Name</th>
            <th width="15%" class="numeric">Content Type</th>
            <th width="16%" class="numeric">Geo Rights</th>
            <th width="16%" class="numeric">License</th>
            <th width="13%" class="numeric">Action</th>
          </tr>
     </thead>
     <tbody id="table-list"></tbody>
</table>