Question

我试图在线提供解决方案但无法找到解决方案。

我会尝试解释我的问题，因为我无法在小提琴中解决这个问题，因为这些数据来自数据库。

我有两个表，一个显示来自数据库的数据。我有一个按钮，当我点击添加它时，复制第一个表的内容并将它们附加到第二个表。

我能够做到。

现在我遇到的问题是，我希望能够检查我之前是否在第二个表中添加了数据并更新了添加的数据。

我的jquery代码在这里：

 $('#centerElem tr').each(function(index, items){
     $(this)find('input:checked')each(function(){
     $this= $(this);
      var chkItemcol = $this.parent().siblings('td');
     var chklen = chkItemcol,length;
     var chkItemValue = chkItemcol.eq(0).text();                                              var chkItemPrice = chkItemcol.eq(chklen-1).text();
       var sumprice=0;
         createrow ="<tr class='data'><td class='itemQty'>"+count+"</td>";
    // iterate through the columns.
             var mlen = chklen-1;
             for(var i = 0; i<chklen; i++){                                                                               // add class to the item name
               if(i == 0){
                 createrow += "<td class='name'>";
                  }else{
                     createrow += "<td>";
                   }
        createrow += $this.parent().siblings('td').eq(i).text();
    }
        createrow += "</td>";
        //alert(createrow);
                createrow += "<td class='subtotal'></td></tr>";
               if(i == (mlen)){
                 sumprice = ($this.parent().siblings('td').eq(0).text()) * ($this.parent().siblings('td').eq().text(mlen));
        }
                createTotal = "<tr><td>Total</td><td class='totalsum'>"+sumprice+"</td></tr>";

    $('.ordertable .name').each(function (index, item) {
       // get the checked <td>
       var chkItemcol = $this.parent().siblings('td');
       // get the checked row numbers of columns
       var $item = $(item);
       $data = $item.text();
       var olen = $($item.siblings()).length;
       var itemprice;
       var subTotal
       if ($data == chkItemValue) {
           count++;
           flag = true;
           //get the  item price
           itemprice = $($item.siblings()[olen - 2]).text();
           //multiple the qty with the item price
           subTotal = count * itemprice;
           // set the qty
           $($item.siblings()[0]).text(count);
           // set the subtotal.
           $($item.siblings()[olen - 1]).text(subTotal);
           return count;
       } else {
           count = 1;
           itemprice = $($item.siblings()[olen - 2]).text();
           alert("first add price " + itemprice);
           subTotal = count * itemprice;
           $($item.siblings()[olen - 1]).text(subTotal);

           flag = false;
           return count;

       }
   });

   // check if the item was added to the ordered list table        
   if (flag) {
       count++;
   } else {
       count = 1;
       $(createrow).appendTo($('.ordertable > tbody'));
   }
 });
});

这是我的html部分，即显示数据库值的表。

<table><thead><tr><td><input type="checkbox" name="checkall"></td><td>Dish Name</td><td>Discription</td><td>ingredients</td><td>type</td><td>price</td></tr></thead>
<tbody>
<tr><td><input type="checkbox" name="chk" id="chk"/></td><td class='name'>Rice </td><td>white parboiled rice</td><td>rice</td><td>none</td><td>300</td></tr>
<tr><td><input type="checkbox" name="chk" id="chk"/></td><td class='name'>Beans </td><td>parboiled beans</td><td>beans an d salt/td><td>none</td><td>400</td></tr>
</tbody>
</table>

以下是我将复制的值附加到：

的那个

<TABLE class="ordertable" style="width:100%; border-collapse:collapse; border: solid 1px #000000">
        <TBODY>


</TBODY><TFOOT></TFOOT></TABLE>

我该怎么做？

Answer 1

我不确定这是否会解决您遇到的大部分问题。但是你的html和jquery代码中有一些明显的拼写错误。我已经创建了一个jsFiddle来让您更容易更新。

注意您使用,代替.或在您的js中完全忘记.的地方。另外，请务必警惕使用;关闭行。使用您的HTML，您可以做得很好只是在其中一个结束</td>

中的拼写错误

我在您猜测的代码中未声明的JS变量的JS部分顶部添加了一个列表。

继承人：http://jsfiddle.net/6ryBL/3/

对于js的模板，你可能想看一下使用像EJS（http://embeddedjs.com/）这样的模板语言来创建javascript html模板。而不是建造＆＃39; html一块一块。

还添加了“全部检查”。脚本归功于https://stackoverflow.com/a/18537624/648350

编辑：改变了JS以执行OP要求的操作（强烈建议使用模板系统和本地存储/ cookie解决方案来管理购物车数据）。无论如何，应在支付步骤之前在服务器级别检查所有购物车数据，以确认库存和价格是否正确。 http://jsfiddle.net/6ryBL/6/

Answer 2

我可以建议采用不同的方法吗？将您的数据模型放在纯Javascript变量中并使用它们进行计算等。仅在完成呈现HTML时。 E.g：

var products = {
    rice: {name: 'Rice', description: 'White parboiled rice', price: 300},
    beans: {name: 'Beans', description: 'Parboiled beans', price: 400}
};

var cart = {
    rice: {quantity: 0, subtotal: 0},
    beans: {quantity: 0, subtotal: 0}
};

这让您的生活变得更加轻松！看看这个jsFiddle

使用jquery获取和更新正确的表html值

2 个答案: