Getting and updating the right table html values with jquery

Question

I have tried to get the solution on line but can't find one.

I will try and explain my problem because i can't make this in fiddle because the values are from the database.

I have two tables one displays data from the database.I have a button which when I click add it copy the contents of the first table and append them to the second table.

I am able to do it.

Now the issue am stuck is that i want to be able to check if i have added a data before in the second table and update the one that was added.

My jquery code here :

 $('#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'));
   }
 });
});

here is my html part, the table that display the database values.

<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>

Here is the one i am appending the copied values to :

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


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

How can i do this ?

You haven't given people enough to work with. Your script is full of magic variables - ie., vars that you have omitted the creation of - and you are leaving it for us to guess what your HTML looks like. Even if your data come from a database, they are still HTML in your browser. — 76484, Mar 27 '14 at 16:28
Try making a [jsFiddle](http://jsfiddle.net/) that demonstrates your problem. It allows us to see the problem in action and we can even change it and post the resulting solution. — Stijn de Witt, Mar 28 '14 at 08:34
Mmm I see you already thought about jsFiddle. You do realize that the database is on the server and the jQuery and HTML live on the browser right? In other words, unless you are doing Ajax calls or accessing a localStorage database in the browser (which looking at your code you aren't), the fact that the data originally came from the database is irrelevant. Just capture a snapshot of the data in your HTML and put that in the fiddle. — Stijn de Witt, Mar 28 '14 at 08:37
@Stijn de Witt. http://jsfiddle.net/6ryBL/3/ , please check it out — user1496307, Mar 28 '14 at 11:02

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

im not sure if this will solve much of what you're encountering. but there are some glaring typos in your html and jquery code. I have created a jsFiddle to make this easier for you to update.

watch for places where you're using , instead of . or forgetting . entirely in your js. Also make sure you're vigilant about closing your lines with ;. With your HTML you're doing well just looks like a typo in one of the closing </td>

I have added a list at the top of the JS section of the undeclared JS variables from your code that i guessed at.

heres the link: http://jsfiddle.net/6ryBL/3/

for templating of js you might want to have a look at creating javascript html templates using a templating language like EJS (http://embeddedjs.com/). Rather than 'building' the html piece by piece.

also added a 'check all' script thanks to https://stackoverflow.com/a/18537624/648350

EDIT: changed the JS to do what OP was asking for (would highly recommend a templating system and a localstorage/cookie solution to manage the cart data). Regardless, all cart data should be checked at server level before payment steps to confirm both stock and prices are correct. http://jsfiddle.net/6ryBL/6/

edited May 23 '17 at 10:26

Community

1
1

answered Mar 28 '14 at 08:41

haxxxton

6,422
3
27
57

thanks for the jsfiddle update, the issue in the code is that when a new food is added 1) it doesn't display the subtotal. 2) it will affect the qty of the first added food that is reduce the qty to 2, 3) it can't add more than 2 qty. what can be the cause of the abnormality? thanks i have been on this for days – user1496307 Mar 28 '14 at 11:00
@user1496307 there doesnt appear to be qty being displayed in the table that's there.. im not sure where that information is coming from.. is this supposed to work like a cart? when a new item is added it increases its qty? what is the purpose of the check buttons? to remove items? – haxxxton Mar 28 '14 at 11:06
yes it is suppose to work like a cart the qty will increase when new item is added and the price multiple by the qty – user1496307 Mar 28 '14 at 11:34
wow.. i really wouldnt be doing a cart system like this.. there are multiple out-of-the-box solutions online that can manage this for you.. i would strongly advise against trying to read and write out of a html element when managing carts.. for 1 i would be using an input field to manage the addition of items to the cart, rather than a checkbox system.. items should ideally rely upon a unique 'product_id' or something rather than a 'dish name'.. – haxxxton Mar 28 '14 at 13:16
ok,thanks. can i get an example, i need to do it myself not using out of box solutions – user1496307 Mar 28 '14 at 13:21
ok.. i have updated the fiddle again here: but almost all of your code needs to be changed.. http://jsfiddle.net/6ryBL/6/ please keep in mind that this data you're storing isnt persistent. if someone changes page or refreshes you will loose all their data. you're far better storing it in localstorage or a cookie using something like http://www.jstorage.info/ similarly i REALLY cant stress the need to be using a templating system for the output of this code.. if this is for a project you need to look at best practises not just getting something that looks like it does the job.. – haxxxton Mar 28 '14 at 14:21

score 0 · Answer 2 · answered Mar 28 '14 at 13:59

0

May I suggest a different approach? Put your data model in pure Javascript variables and use those for calculations etc. Only when done render the 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}
};

This makes your life so much easier! Have a look at this jsFiddle

answered Mar 28 '14 at 13:59

Stijn de Witt

40,192
13
79
80

great suggestion for an alternative to OP's requests, i would still recommend both a templating system and a localstorage/cookie solution to make sure cart data isnt lost – haxxxton Mar 28 '14 at 14:23

Getting and updating the right table html values with jquery

2 Answers2