如何将模板中的动态表传递给视图,以将其迭代保存到数据库中 - javascript

我想传递模板中表中存储的所有数据。该表根据用户的选择而增长。我的项目是关于食品订购系统的,我要做的是,当用户将菜单添加到购物篮并下订单时,如何将值传递到视图中以将其保存到数据库中。我知道表单,但是我的表不是静态的。我无法想象它将有多大。

我的添加行函数:

    $(document).ready(function(){
      var sum = 0;
      $(document).on('click', '.myaddButton', function() {

        var $foodname = $(this).closest("tr")   // Finds the closest row <tr>
        .find(".nr")     // Gets a descendent with class="nr"
        .text();
        var $foodprice = $(this).closest("tr")   // Finds the closest row <tr>
        .find(".rn")     // Gets a descendent with class="nr"
        .text();
        $('#carttable').prepend("<tr class='danger' id ='myTableRow'><td>"+$foodname+"</td><td class='price'>"+$foodprice+"</td> <td> <button class='deletebutton btn btn-danger' type='button'>   <span class='glyphicon glyphicon-trash'></span> </button> </td></tr>");

      });
      $(document).on('click', '.deletebutton', function() {
        $('#myTableRow').remove();
        //$('.price').each(function() {
        //  var $price = $(this);
        //console.log($price);
        //sum += parseInt($price.context.innerHTML);

        //});

        //$('#total').html(sum);
        //sum = 0;
      });
    });
    </script>

我的桌子

<table  border="1" class="table" id="menutable" name="menutable">
      <tr class="danger">
        <tbody>
          {%for a in list%}
           <tr class= {% DoRandom %}>
            <td><b> {{a.name}}</b> </td>
            <td class="nr">{{a.description}}</td>
            <td class="rn"><p>{{a.price}}</p></td>
            <td id="addbutton" > <button class="myaddButton btn btn-success" type="button">
           <span class="glyphicon glyphicon-plus"></span> </button> </td>
          </tr>
          {%endfor%}
        </tbody>
      </table>

参考方案

如果您想使用一些高级的表单处理技术,则应查看问题Making a Django form class with a dynamic number of fields ...

第二个“简单”解决方案是将隐藏的输入值(将包含food_id和数量)与nameprice(在添加期间)一起添加,然后将表格包装成表格。例如

var $food_id = ... // some how get food id
var $quantity = 1; //1 for now, but you can add increase and decrease functionality
...
// in prepend text
... + "<input type='hidden' name='food-" + $food_id + "' value='" + $quantity + "' >" + ... 

并且在模板中,应在<form>之前添加<table>(在</form>标记之后添加</table>),如果使用的是Ajax,请使用serialize。

第三种解决方案是将JS对象用作购物车,并在提交表单之前将其编码为Json。例如。

   //in your javascript global scope
   var js_food_cart = {};
   ....
   // then on click
   $food_id = ... ;// yes, again you need food id
   $quantity = 1; // or something elese
   js_food_cart[$food_id] = $quantity;
   ....
   // then somwhere in before submit, code assumes that you have form with my_cart hidden input
   $('input[name=my_cart]') = JSON.stringify(js_food_cart);

然后在视图中,您应该解析my_cart输入的json值。在模板中,您应该添加带有隐藏字段的表单以传递购物车值。

如果您要实现增加/减少食物数量的功能,此方法将更加方便。

使用php重新加载内容 - javascript

在对网站进行编程时,我以前使用过此代码,它可以完美工作,但是现在当我想使用一些Flash部件时,每次单击链接时,它都会重新加载所有网站。源代码: <!DOCTYPE html> <html> <head> <title>Hot King Staff</title> <meta charset=…

用jQuery填充模式形式 - javascript

我正在将订单表从数据库绘制到datatables(jquery插件)中。我要在每笔最后一笔交易或每笔交易中增加付款。问题是,如何获取单击添加付款按钮以添加付款的行的订单ID。其次,当点击addpayment时,它会弹出一个带有字段或订单号的模态表单。我想用在td中找到的订单ID填充该字段,并使其不可编辑或隐藏,但在提交模态表单时将其发布到服务器。表格和模式表…

保留文本区域的数据或值,然后选择输入 - javascript

通过$ _POST提交表单时,输入文件值仍然保留。像这样: if($_POST){ $error = false; if(!$post['price']){ $error = true; $error_note['price'] = "*Should not be empty"; } if($err…

带有AJAX和DOM处理API的下拉菜单 - javascript

我从API获取数据,但未在我的下拉菜单中显示。如果我用?act=showprovince回显,结果就在那里。example.html<head> <link rel="stylesheet" type="text/css" href="css/normalize.css"> …

尽管刷新,jQuery格式仍未应用于Ajax数据 - javascript

我正在通过GET响应消息从服务器(php文件)的可折叠内部加载列表视图。但是,尽管刷新了jQuery元素,但jQuery格式并未应用于添加的HTML。我的页面在这里:http://i.cs.hku.hk/~hsbashir/Project_Work/events/events.htmlHTML代码(仅相关代码)<script> lastRecor…