Issue with increasing a number in td by JavaScript

Question

I have an input field that takes the name of the book, gets the price from database and puts the result in a table.

Now if a book has been chosen more than one time, then I want the quantity to increase and then show the price for that number of that book.

Here is the code:

<div>
     <input type="text" id="book_item" value="<?php echo $books['book_name']; ?>"/> 
     <input type="button" id="addbook" value="Apply" onclick="addBookToTable()" />          
</div>

<table id="booktable">
    <thead>
        <tr>
        <th>Book Name</th>
        <th id="quantity">Quantity</th>
        <th>Price</th>
        <th>Remove Book</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
        <td>Total</td>
        <td></td>
        <td id="price"></td>
        <td></td>
        </tr>
    </tfoot>
</table>  

<script>
     var quantity = $("#quantity").children('td').eq(1).text();

    // not sure how to check if the book is already in the table or not
    // if it is, then it should just show the name of the book
    // only one time and increase the quantity number.
<script>

I appreciate any code sample or comments that can solve the issue.

Answer 1

If you're doing this only by displaying databases results, there's no need to use javascript client side, you should do your checks on the original array and then produce the table that the client side will show.

If instead you're adding books on the fly (and your input on top seems to suggest as such) then the best way to accomplish this is by modifying the "addBookToTable" procedure so that it checks the entire table to see if there's already a book with that name on it and eventually it raises the quantity instead of adding a new line.

EDIT:

Well, unless the books are in a particular order, there's no going around a linear search of the whole list:

$('#booktable tr').each(function() {
  var children = $(this).children('td');
  if(children.length > 1) {
    if(children.first().text() == MyNewBookTitle) {
      var quantityChild = $(children[1]);
      quantityChild.text( parseInt(quantityChild.text()) + 1 );
    }
  }
});

Note that you shouldn't use the id "price" in the td since ids are supposed to be unique.

Also, to avoid the awkwardness of using first() or children[1] you should give your tds a class name so that in the code above you could use a filter:

children.filter('.title')

and

children.filter('.quantity')

Answer 2

you could use this selector

    var bookName="any bookName " ;
    var theBookTD = $("#booktable tr td:nth-child(1):contains('"+ bookName+"')");

if (theBookTD.length>0 ) {
//the book already exists in table
    var theBookQuantity = theBookTD.next().first().text();
}else {
// the book doesn't exist in table;
}

take a look here http://jsfiddle.net/buuk2zjf/3/