In my current html code, I have a table that contains in the following order:
Stock ID | Product | Regular Price | Sale Price
The issue I am facing is that when I click on the values in the rows and append them to another table, or shopping cart, my for loop appends the whole line. What I am looking for is to append only the Product, Sale Price, and then my calculated "amount saved" price. How do I append the index eq(1) [Product] and eq(3) [Sale Price] instead? From what I understand I should use another .find method but not sure how to do this exactly. (still getting the whole .find and child nodes down)
Code snippet: https://jsfiddle.net/ko828bcs/
Ps: I have jquery not javascript so it doesn't run in jsfiddle(I just wanted you to be able to see the formatting)
my code that does all the work is:
//add the selected item in table
var variable = "<tr class='s-list' id='s-"+id +"'>";
for (var i=0; i<child_nodes.length; i++){
// add a table cell for each node using its content
variable += "<td>" +child_nodes.eq(i).text() + "</td>";
} // end for
variable += "</tr>";
// add msg to the selected courses list
$('#selected-list').append(variable);
However as you can see I use eq(i) which gives the whole line.
File:
<script>
//makes gray in table
$(document).ready(function() {
$(".list:odd").css('background-color', '#eee');
});
$(function() {
$('#selected-list').on('click', 's-list',function(){
alert($(this).children().eq(0).text());
//delete this element
$(this).remove();
});
$('.list').on('click', function(){
//rest background color
$('.list').css('background-color', '#fff');
//change background color
$(this).css('background-color', '#eee');
//read its id attribute
var id = $(this).attr('id');
//alert(id);
//Check if it has already been added
if ($('#selected-list').find('#s-'+id).length > 0){
alert("The product is already selected. Please choose a different one!");
}
else {
// find child nodes
var child_nodes = $(this).children();
// read current total
var current_total = parseInt($('#total').val());
//read selected sale price
var selected_sale= parseInt(child_nodes.eq(3).text());
//read initial price
var selected_price = parseInt(child_nodes.eq(2).text());
//saving amount for each selected
var savings = selected_price - selected_sale;
//add the selected item in table and update total
var variable = "<tr class='s-list' id='s-"+id +"'>";
for (var i=0; i<child_nodes.length; i++){
// add a table cell for each node using its content
variable += "<td>" +child_nodes.eq(i).text() + "</td>";
} // end for
variable += "</tr>";
// add msg to the selected courses list
$('#selected-list').append(variable);
//update total cost
// read the current total
var total = parseInt($('#total').val());
// add the selected item cost to the total
total += parseInt(child_nodes.eq(3).text());
// update the total cost
$('#total').val(total);
// Reset background color of all the rows
$('.courselist').css('background-color', '#fff');
// Change background color of the selected row
$(this).css('background-color', '#eee');
}
});
});
</script>
</head>
<body>
<h2>Sam's Store</h2>
<div class="content">
<div class='title'>Deals of the Week</div>
<div class='labels'>
<div class='cell1' id='sid1'>Stock ID</div>
<div class='cell2' id='pid1'>Product</div>
<div class='cell3' id='rpid1'>Regular Price</div>
<div class='cell4' id='spid1'>Sale Price</div>
</div>
<div class='list' id='c1'>
<div class='cell1' id='sid2'>SH32AQ60</div>
<div class='cell2' id='pid2'>Sharp AQUAS-60in HDTV</div>
<div class='cell3' id='rpid2'>799.99</div>
<div class='cell4' id='spid2'>759.99</div>
</div>
<div class='list' id='c28'>
<div class='cell1' id='sid3'>PN455</div>
<div class='cell2' id='pid13'>Panasonic 55in LED HDTV</div>
<div class='cell3' id='rpid3'>999.99</div>
<div class='cell4' id='spid3'>679.99</div>
</div>
<div class='list' id='c60'>
<div class='cell1' id='sid4'>VZ49M</div>
<div class='cell2' id='pid4'>VIZIO M series 49in LED HDTV</div>
<div class='cell3' id='rpid4'>719.99</div>
<div class='cell4' id='spid4'>579.99</div>
</div>
<div class='list' id='c62'>
<div class='cell1' id='sid5'>IN200SR</div>
<div class='cell2' id='pid5'>Insignia 200W Stereo Receiver</div>
<div class='cell3' id='rpid5'>24.99</div>
<div class='cell4' id='spid5'>19.99</div>
</div>
<div class='list' id='c6'>
<div class='cell1' id='sid6'>PN1000HTS</div>
<div class='cell2' id='pid6'>Panasonic 1000W Smart Blu-ray Home Theater System</div>
<div class='cell3' id='rpid6'>349.99</div>
<div class='cell4' id='spid6'>299.99</div>
</div>
<div class='list' id='c7'>
<div class='cell1' id='sid7'>HP305DJ</div>
<div class='cell2' id='pid7'>HP Deskjet 3056A</div>
<div class='cell3' id='rpid7'>49.90</div>
<div class='cell4' id='spid7'>34.90</div>
</div>
<div class='list' id='c8'>
<div class='cell1' id='sid8'>RF386BMR</div>
<div class='cell2' id='pid8'>Rocketfish Bluetooth Music Receiver</div>
<div class='cell3' id='rpid8'>49.90</div>
<div class='cell4' id='spid8'>34.90</div>
</div>
<div class='list' id='c9'>
<div class='cell1' id='sid9'>SM350SB</div>
<div class='cell2' id='pid9'>Sling Media Slingbox 350</div>
<div class='cell3' id='rpid9'>179.90</div>
<div class='cell4' id='spid9'>115.90</div>
</div>
</div>
<div id="shop">
<div class="shoppinglist">
<div class='list-title'>You have <span id="items">0</span> items in your Shopping Cart</div>
<div >
<div class='cell2'>Product</div>
<div class='cell3'>Sale Price</div>
<div class='cell4'>You Save</div>
<div class='table selected-list' id='selected-list'></div>
</div>
</div>
</div>
<div class="total">Total Amount: $<span id="total"></span></div>
</body>
</html>
