ajax刷新表格-django

Question

想用ajax刷新列表，筛选出某个订单号

def citys(request, aid, org, cust, tk):
    lst = PaidClear(aid, org, cust, tk).got_solist         #后端传过来的列表
    return JsonResponse({'data': lst})

    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $('#prov').click(function () {
                // 发起一个ajax请求
                pid = $('#mm').val()
                $.get('omvds/'+pid, function (data) {
                    var artTable = document.getElementById("myTable");//与表格的id对应
                    var artBody=artTable.tBodies[0];
                    artBody.parentNode.outerHTML = artBody.parentNode.outerHTML.replace(artBody.innerHTML, "");//每次递归先把上次递归的表格清除
                    var all_li = eval(data);
                    var all_list = eval(all_li.all_data);
                    var tb = document.getElementById('myTable');//与表格的id对应
                    var body = tb.querySelector('tbody');//找到对应表格的标签
                    for (let i = 0; i < all_list.length; i++) {
                    //设置表格每个单元的值
                        var fie = all_list[i].fields;
                        var tr = document.createElement('tr');
                        var td1 = document.createElement('th', scope = "col");
                        var td2 = document.createElement('td');
                        var td3 = document.createElement('td');
                        var td4 = document.createElement('td');
                        var td5 = document.createElement('td');
                        var td6 = document.createElement('td');
                        var td7 = document.createElement('td');
                        var td8 = document.createElement('td');

                        td1.innerHTML = fie.CO;
                        td2.innerHTML = fie.SO;       // 这里怎么加一个input？
                        td3.innerHTML = fie.PD;
                        td4.innerHTML = fie.SQ;
                        td5.innerHTML = fie.CU;
                        td6.innerHTML = fie.SM;
                        td7.innerHTML = fie.PS;
                        td8.innerHTML = fie.QT;

                        //设置完成后，将每一项插入到表格中
                        tr.append(td1);       
                        tr.append(td2);
                        tr.append(td3);
                        tr.append(td4);
                        tr.append(td5);
                        tr.append(td6);
                        tr.append(td7);
                        tr.append(td8);
                                       // 这里怎么插一列checkbox？
                        body.append(tr);}
                })
            })
        })
    </script>

{% endblock %}

{% block main %}
    <input type="text" name="find" id="mm">
    <button id="prov">筛选订单号</button>
            <table border="1" cellspacing="0" id="myTable">
            {% if pmt %}
                <tr>
                    <th style="width: 80px; font-size: 10px;">公司</th>
                    <th style="width: 100px; font-size: 10px;">销售订单号</th>
                    <th style="width: 100px; font-size: 10px;">订单日期</th>
                    <th style="width: 100px; font-size: 10px;">已发货数量</th>
                    <th style="width: 230px; font-size: 10px;">客户</th>
                    <th style="width: 90px; font-size: 10px;">订单金额</th>
                    <th style="width: 90px; font-size: 10px;">业务员</th>
                    <th style="width: 90px; font-size: 10px;">订单数量</th>
                    <th style="width: 230px; font-size: 10px;">最终客户</th>
                    <th style="width: 90px; font-size: 10px;">已核销</th>
                    <th style="width: 90px; font-size: 10px;">剩余可核销</th>
                    <th style="width: 60px; font-size: 10px;">选择</th>
                    <th style="width: 60px; font-size: 10px;">是否关闭</th>
                </tr>
            {% endif %}
        <form action="{% url 'Hm:getmnys' aid org cust %}" method="post">
        {% csrf_token %}

        {% for user in pmt %}
            <tbody>
                <tr class="to_sum" style="height: 30px; font-size: smaller">
                    <td>{{ user.0 }}</td>
                    <td><input hidden type="text" name="notpo" class="cpo" value="{{ user.1 }}" >{{ user.1 }}</td>   
                    <td style="text-align: right">{{ user.2 }}</td>
                    <td style="text-align: right">{{ user.3|floatformat:2 }}</td>
                    <td>{{ user.4 }}</td>
                    <td style="text-align: right">{{ user.5|floatformat:2 }}</td>
                    <td style="text-align: center">{{ user.6 }}</td>
                    <td style="text-align: right">{{ user.7 }}</td>
                    <td>{{ user.8 }}</td>
                    <td style="text-align: right">{{ user.9|floatformat:2 }}</td>
                    <td>
                        <input style="color: yellow; background-color: darkslateblue; text-align: right; width: 90px; " type="text" name="notme" class="killme" value="{{ user.10|floatformat:2 }}" >
                    </td>
                    <td><input type="checkbox" name="ckbox" class="box_ck" onclick="calculate()"></td>
                    <td style="text-align: center"><a href="{% url 'Hm:close_so' aid=aid org=user.0 cust=cust so=user.1 %}"><h7 style="color:yellow;">关闭</h7></a></td>
                </tr>
            </tbody>
        {% endfor %}
        <input type="submit" value="提 交">
        </form>
        </table>

Answer 1

    function test(data) {
        var artTable = $('#myTable');//与表格的id对应
        var artBody = $('tbody', artTable);
        artBody.empty()
        var all_li = eval(data);
        var all_list = [{fields: {SO: '1', PD: '2'}}];
        for (let i = 0; i < all_list.length; i++) {
            var fie = all_list[i].fields;
            let tr = $('<tr>');
            $('<td>').text(fie.CO).appendTo(tr)
            $('<td>').append($('<input>')).appendTo(tr)
            $('<td>').text(fie.SO).appendTo(tr)
            $('<td>').text(fie.PD).appendTo(tr)
            $('<td>').text(fie.SQ).appendTo(tr)
            $('<td>').text(fie.CU).appendTo(tr)
            $('<td>').text(fie.SM).appendTo(tr)
            $('<td>').text(fie.PS).appendTo(tr)
            $('<td>').text(fie.QT).appendTo(tr)
            $('<td>').append($('<input>').attr('type', 'checkbox').click(function () {
                calculate()
            })).appendTo(tr)
            tr.appendTo($(artBody))
        }
    }