Я хочу добавить price всех items в виде общего кода, приведенного ниже.

document.getElementById('form-signin').addEventListener('submit', saveItem);
function saveItem(e){
   var items= document.getElementById('items').value;
   var date= document.getElementById('date').value;
   var price= document.getElementById('price').value;
   var expense= {
    items: items,
    date: date,
    price: price
}


if(localStorage.getItem('bill')==null){
var bill=[];
 bill.push(expense);
 localStorage.setItem('bill', JSON.stringify(bill));


} else{

    var bill = JSON.parse(localStorage.getItem('bill'));
    bill.push(expense);
    localStorage.setItem('bill', JSON.stringify(bill));
    console.log(bill);

    }
e.preventDefault();
} 

function fetchResult(){
  var bill = JSON.parse(localStorage.getItem('bill'));
  var result = document.getElementById('total');


   result.innerHTML='';
   for(var i=0;i < bill.length;i++){
   var items= bill[i].items;
   var date= bill[i].date;
   var price= bill[i].price;




  result.innerHTML+= '<table class="table table-bordered">' + '<tr>'+
  '<th>'+'Items'+'</th>'+
  '<th>'+'Date'+'</th>'+
  '<th>'+'Price'+'</th>'+
   '</tr>'+ '<tr>'+
   '<td>'+ items + '</td>'+
   '<td>'+ date+ '</td>'+
   '<td>'+ price + '</td>'+
   '</tr>'+ '</table>';

}

Это вывод выше. Теперь, как рассчитать сумму ??

0
Sandesh Kandel 3 Апр 2017 в 20:15

2 ответа

Лучший ответ

Образец Эдуардо будет работать, но я пошел немного дальше, если вы заинтересованы в другом способе выполнить то, что вы делаете. Я внес некоторые изменения, чтобы помочь вам избежать дублирования заголовков столбцов и немного очистить генерацию таблиц. Однако этот код требует jQuery, и таблица должна уже существовать.

Форма только там, потому что мне нужно было что-то проверить ... вы можете удалить эту часть.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<form>
  Items: <input type="text" id="items"><br>
  Date: <input type="text" id="date"><br>
  Price: <input type="text" id="price"><br>
  <input type="submit" value="Submit" onClick="saveItem()" >
</form> 

<table id="tbl-items" class="table table-bordered"><thead><tr><th>Items</th><th>Date</th><th>Price</th></tr></thead><tbody id="tbl-items-body"></tbody></table>
<script>
    document.getElementById('form-signin').addEventListener('submit', saveItem);

    function saveItem(){
        var bill=[];

        var expense= { // didn't need the variables.
            items: document.getElementById('items').value,
            date: document.getElementById('date').value,
            price: document.getElementById('price').value
        }

        if(localStorage.getItem('bill') != null){
            bill = JSON.parse(localStorage.getItem('bill'));
        }

        bill.push(expense);
        localStorage.setItem('bill', JSON.stringify(bill))
        console.log(bill);
    } 

    function fetchResult(){
        var bill = JSON.parse(localStorage.getItem('bill'));
        var totalItems = 0;
        var totalPrice = 0;

        for(var i=0;i < bill.length;i++){
        totalItems++;
        totalPrice += bill[i].price;

            $("#tbl-items-body").append(
                $('<tr>').append(
                    '<td>' + bill[i].items + '</td><td>' + bill[i].date + '</td><td>' + bill[i].price + '</td>'
                )
            );
        }

        $("#tbl-items-body").append(
            $('<tr>').append(
                '<td>Total Items: ' + totalItems + '</td><td>Total Price: ' + totalPrice + '</td>'
            )
        );
    }
</script>
0
Kade M. 3 Апр 2017 в 18:47

В вашей функции fetchResult при добавлении значений цены и отображении в таблице добавьте цену к общей переменной, а затем отобразите.

function fetchResult(){
...

   result.innerHTML='';

   var total = 0;

   for(var i=0;i < bill.length;i++){
   var items= bill[i].items;
   var date= bill[i].date;
   var price= bill[i].price;

   total += price;



  result.innerHTML+= '<table class="table table-bordered">' + '<tr>'+
  '<th>'+'Items'+'</th>'+
....

    <span> total </span>
}
0
Eduardo Dennis 3 Апр 2017 в 17:22