jQuery怎么添加属性

  1. 怎么能够保存标题栏各th ???? 不要把标题栏清空

    公司 销售订单号
  2. 怎么把 参数嵌入到 href 里面
    attr('href', "{% url 'Hm:close_so' aid=aid org=fie.CO cust=cust so=fie.SO %}"))

  3. 表格刷新后,点提交没有反应

  4. 表格刷新后点击checkbox没有求和计算

    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"
        type="application/javascript"></script>

    <script>
    $(function () {
        $('#prov').click(function () {
            // 发起一个ajax请求
            pid = $('#mm').val()
            $.get('omvds/' + pid, renderData)
        })
    })

    function renderData(data) {
        var artTable = $('#myTable');//与表格的id对应
        var artBody = $('tbody', artTable);
        artBody.empty()
        // 怎么能够保存标题栏各th ???? 不要把标题栏清空
        var all_list = [
                        {
                fields: data
            },
            {fields: {
                    'CO': '赢胜',
                    'SO': '322060750',
                    'PD': '2022-06-29',
                    'SQ': 1.3,
                    'CU': '东莞艺辉针织',
                    'SM': 273.0,
                    'PS': '蒋冬杰',
                    'QT': 1.3,
                    'DM': '艺辉针织',
                    'KD': 100,
                    'LT': 150
                }}]

        for (let i = 0; i < all_list.length; i++) {
            var fie = all_list[i].fields;
            let tr = $('<tr>');
            $('<td style="font-size: 10px;">').text(fie.CO).appendTo(tr)
            $('<td>').append($('<input>').attr('type', 'text',).attr('name','notpo').attr('class', 'cpo').width('90px').hidden).val(fie.SO).text(fie.SO).appendTo(tr)
            $('<td style="font-size: 10px;" >').text(fie.PD).appendTo(tr)
            $('<td style="font-size: 10px; text-align: right">').text(fie.SQ).appendTo(tr)
            $('<td style="font-size: 10px;">').text(fie.CU).appendTo(tr)
            $('<td style="font-size: 10px; text-align: right">').text(fie.SM).appendTo(tr)
            $('<td style="font-size: 10px;">').text(fie.PS).appendTo(tr)
            $('<td style="text-align: right; font-size: 10px;">').text(fie.QT).appendTo(tr)
            $('<td style="font-size: 10px;" >').text(fie.DM).appendTo(tr)
            $('<td style="text-align: right">').text(fie.KD).appendTo(tr)
            $('<td>').append($('<input>').attr('type', 'text',).attr('name','notme').attr('class', 'killme').width('90px')).val(fie.LT).appendTo(tr)
            $('<td style="font-size: 10px;" >').append($('<input>').attr('type', 'checkbox').attr('name','ckbox').attr('class', 'box_ck').click(function () {
                calculate()})).appendTo(tr)
            $('<td style="font-size: 10px;" >').append($('<a>').attr('href', "{% url 'Hm:close_so' aid=aid org=fie.CO cust=cust so=fie.SO %}")).text('关闭').appendTo(tr)
            // 怎么把 fie.CO和fie.SO嵌入到href进去

            tr.appendTo($(artBody))
        }
    }

    function test() {
        renderData()
    }
</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 %}
        <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 }}"
                       onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')">
            </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>
        {% endfor %}
        <input type="submit" value="提&nbsp交">
        // 表刷新后,提交没有反应
    </form>
</table>


    <script>
        function calculate() {
          const po = document.getElementsByClassName("cpo");
          const mee = document.getElementsByClassName("killme");
          const ele = document.getElementsByClassName("box_ck");
          let table = document.getElementById("myTable");
          let tr = table.getElementsByClassName('to_sum');
          let subTotal = 0;
          for (var i = 0; i < ele.length; i++) {
            let td = tr[i].getElementsByTagName("td")[10] ;
            console.log(td.children[0].value)
            let price = parseFloat(td.children[0].value);
            if (ele[i].type == 'checkbox' && ele[i].checked == true){
                po[i].name = 'poid';
                mee[i].name = 'tokill';
                subTotal += price;}
            else {
                mee[i].name = 'notme';
                po[i].name = 'notpo';
            }
          }
          document.getElementById("val").innerHTML = "总计收款: " + subTotal;
        }
    </script>



{% endblock %}



<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"
        type="application/javascript"></script>

<script>
    $(function () {
        $('#prov').click(function () {
            // 发起一个ajax请求
            pid = $('#mm').val()
            $.get('omvds/' + pid, renderData)
        })
    })

    function renderData(data) {
        var artTable = $('#myTable');//与表格的id对应
        var artBody = $('tbody', artTable);
        artBody.empty()
        // 怎么能够保存标题栏各th ???? 不要把标题栏清空
        var all_list = [
            // {
            //     fields: data
            // },
            {
                fields: {
                    'CO': '赢胜',
                    'SO': '322060750',
                    'PD': '2022-06-29',
                    'SQ': 1.3,
                    'CU': '东莞艺辉针织',
                    'SM': 273.0,
                    'PS': '蒋冬杰',
                    'QT': 1.3,
                    'DM': '艺辉针织',
                    'KD': 100,
                    'LT': 150
                }
            }]

        for (let i = 0; i < all_list.length; i++) {
            var fie = all_list[i].fields;
            let tr = $('<tr class="to_sum" style="height: 30px; font-size: smaller">');
            $('<td style="font-size: 10px;">').text(fie.CO).appendTo(tr)
            $('<td>').append($('<input hidden type="text" name="notpo" class="cpo">').val(fie.SO)).append(fie.SO).appendTo(tr)
            $('<td style="font-size: 10px;" >').text(fie.PD).appendTo(tr)
            $('<td style="font-size: 10px; text-align: right">').text(fie.SQ).appendTo(tr)
            $('<td style="font-size: 10px;">').text(fie.CU).appendTo(tr)
            $('<td style="font-size: 10px; text-align: right">').text(fie.SM).appendTo(tr)
            $('<td style="font-size: 10px;">').text(fie.PS).appendTo(tr)
            $('<td style="text-align: right; font-size: 10px;">').text(fie.QT).appendTo(tr)
            $('<td style="font-size: 10px;" >').text(fie.DM).appendTo(tr)
            $('<td style="text-align: right">').text(fie.KD).appendTo(tr)
            $('<td>').append($('<input>').attr('type', 'text',).attr('name', 'notme').attr('class', 'killme').width('90px')).val(fie.LT).appendTo(tr)
            $('<td style="font-size: 10px;" >').append($('<input>').attr('type', 'checkbox').attr('name', 'ckbox').attr('class', 'box_ck').click(function () {
                calculate()
            })).appendTo(tr)
            var hrefTemp = 'http://xxxx/xxx?aid=aid&org?' + fie.CO //这个按这个拼凑出URL
            $('<td style="font-size: 10px;" >').append($('<a>').attr('href', hrefTemp)).text('关闭').appendTo(tr)
            // 怎么把 fie.CO和fie.SO嵌入到href进去

            tr.appendTo($(artBody))
        }
    }

    function test() {
        renderData()
    }
</script>

{% endblock %}

{% block main %}
<input type="text" name="find" id="mm">
<button id="prov">筛选订单号</button>
<form action="{% url 'Hm:getmnys' aid org cust %}" method="post">
    <table border="1" cellspacing="0" id="myTable">
        {% if pmt %}
        <thead>
        <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>
        </thead>
        {% endif %}
        {% csrf_token %}
        {% for user in pmt %}
        <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 }}"
                       onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')">
            </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>
        {% endfor %}
        <input type="submit" value="提&nbsp交">
        // 表刷新后,提交没有反应
    </table>
</form>
<div id="val"></div>


<script>
    function calculate() {
        const po = document.getElementsByClassName("cpo");
        const mee = document.getElementsByClassName("killme");
        const ele = document.getElementsByClassName("box_ck");
        let table = document.getElementById("myTable");
        let tr = table.getElementsByClassName('to_sum');
        let subTotal = 0;
        for (var i = 0; i < ele.length; i++) {
            let td = tr[i].getElementsByTagName("td")[10];
            console.log(td.children[0].value)
            let price = parseFloat(td.children[0].value);
            if (ele[i].type == 'checkbox' && ele[i].checked == true) {
                po[i].name = 'poid';
                mee[i].name = 'tokill';
                subTotal += price;
            } else {
                mee[i].name = 'notme';
                po[i].name = 'notpo';
            }
        }
        document.getElementById("val").innerHTML = "总计收款: " + subTotal;
    }
</script>


{% endblock %}




如果不是为了学习,个人建议你还是用一个框架吧,这些都有成熟的解决方案,这样开发效率比较低啊。原生的html+javascript可以选用layui,新框架可以选择vue或者react等等,能加快不少开发效率,供参考。

表格刷新后,点checkbox没法汇总(附图是刷新前的,可以汇总在表头)

img