如何在django中使用for循环从动态创建的表中获取javascript函数中的表行值？

因此，基本上，我是在将上下文从视图传递到模板

在我的模板中，我使用“for loop”以表格形式查看上下文，并为每个表行附加一个按钮

单击该按钮时，我想调用一个javascript函数（具有ajax调用）。 我需要获取特定行的行元素值，以便在函数中使用

我的视图功能：

def asset_delivery(request):
  deliverylist = Delivery.objects.filter(status='Added to Delivery List')
  context = {'deliverylist': deliverylist}
  return render(request, 'gecia_ass_del.html', context)

<script>
    function approve(barcode2, owner2, mobile2, address2, atype2){
        console.log('entered approved');
        var today = new Date().getFullYear()+'-'+("0"+(new Date().getMonth()+1)).slice(-2)+'-'+("0"+new Date().getDate()).slice(-2);
        $.ajax({
            type:'POST',
            url: 'deliveryupdate/'+barcode+'/',
            dataType: 'json',
            data:{
                barcode: barcode2,
                owner: owner2,
                mobile: mobile2,
                address: address2,
                atype: atype2,
                status:'Authority Approved',
                statusdate: today,
                csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
            },
            beforeSend: function() {
                    console.log('before send');
                  },
            success: function(){
              console.log("success log");
              swal("Success!","Asset request has been approved","success");
            },
            error: function(){
              console.log("error");
            }
        });
    }

</script>

到目前为止，我尝试通过以下方式将这些值作为参数传递。 我的html模板表：

<table class="table">
  <thead style="background-color:DodgerBlue;color:White;">
    <tr>
      <th scope="col">Barcode</th>
      <th scope="col">Owner</th>
      <th scope="col">Mobile</th>
      <th scope="col">Address</th>
      <th scope="col">Asset Type</th>
      <th scope="col">Approve Asset Request</th>
    </tr>
  </thead>
  <tbody>
  {% for i in deliverylist %}
    <tr>
      <td id="barcode">{{i.barcode}}</td>
      <td id="owner">{{i.owner}}</td>
      <td id="mobile">{{i.mobile}}</td>
      <td id="address">{{i.address}}</td>
      <td id="atype">{{i.atype}}</td>
      <td><button id="approvebutton" onclick="approve({{i.barcode}},{{i.owner}},{{i.mobile}},{{i.address}},{{i.atype}})" style="background-color:#288233; color:white;" class="btn btn-indigo btn-sm m-0">Approve Request</button></td>
    </tr>
  {% endfor %}
  </tbody>
</table>

条形码
所有者
可移动的
地址
资产类型
批准资产申请
{deliverylist%中的i的%s}
{{i.barcode}}
{{i.owner}}
{{i.mobile}}
{{i.address}
{{i.atype}
批准请求
{%endfor%}

表格显示完美，但按钮、onclick或函数调用似乎不起作用

我的javascript函数：

def asset_delivery(request):
  deliverylist = Delivery.objects.filter(status='Added to Delivery List')
  context = {'deliverylist': deliverylist}
  return render(request, 'gecia_ass_del.html', context)

<script>
    function approve(barcode2, owner2, mobile2, address2, atype2){
        console.log('entered approved');
        var today = new Date().getFullYear()+'-'+("0"+(new Date().getMonth()+1)).slice(-2)+'-'+("0"+new Date().getDate()).slice(-2);
        $.ajax({
            type:'POST',
            url: 'deliveryupdate/'+barcode+'/',
            dataType: 'json',
            data:{
                barcode: barcode2,
                owner: owner2,
                mobile: mobile2,
                address: address2,
                atype: atype2,
                status:'Authority Approved',
                statusdate: today,
                csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
            },
            beforeSend: function() {
                    console.log('before send');
                  },
            success: function(){
              console.log("success log");
              swal("Success!","Asset request has been approved","success");
            },
            error: function(){
              console.log("error");
            }
        });
    }

</script>

功能批准（条形码2、所有者2、手机2、地址2、atype2）{
console.log（“已输入并批准”）；
var today=new Date（）.getFullYear（）+'-'+（“0”+（new Date（）.getMonth（）+1））.slice（-2）+'-'+（“0”+new Date（）.getDate（））.slice（-2）；
$.ajax({
类型：'POST'，
url:“deliveryupdate/”+条形码+“/”，
数据类型：“json”，
数据：{
条形码：条形码2，
所有者：所有者2，
手机：mobile2，
地址：地址2，
atype:atype2，
状态：'Authority Approved'，
日期:今天,，
csrfmiddlewaretoken:$（'input[name=csrfmiddlewaretoken]'）。val（）
},
beforeSend:function（）{
console.log（'before send'）；
},
成功：函数（）{
控制台日志（“成功日志”）；
swal（“成功！”，“资产申请已批准”，“成功”）；
},
错误：函数（）{
控制台日志（“错误”）；
}
});
}

---

我检查了浏览器日志，发现函数似乎没有执行，这意味着问题在于函数调用或按钮。请帮忙。

代码在我这边起作用。我已将功能缩减为：

function approve(){console.log('entered approved');}

没有任何参数且“已输入已批准”记录到控制台。检查您是否设置了正确的参数，以及控制台是否抛出错误。为了解决此问题，请简化您的功能并逐个添加参数