Должен ли я использовать массив или объект для построения сводки?

#javascript #jquery #arrays #object

#javascript #jquery #массивы #объект

Вопрос:

Я создаю интерфейс, который будет вычислять итоговое значение (на основе соседних входных данных) при проверке входных данных. Когда входные данные проверены, я получаю значения других входных данных в том же самом <td> , а затем строю общий итог.

Пример: http://jsfiddle.net/vdunm/1 /

Мне нужно создать сводку итогов (сгруппированных по имени) для всех установленных флажков, и я просто не могу найти правильный путь к тому, как это сделать.

Итак, если бы вы проверили первые 3 строки (2 foo и 1 bar) Я бы хотел, чтобы результат выглядел примерно так:

 FOO: 100  
BAR: 30
  

Вот мой HTML:

 <table id="test">
    <tr>
        <td>
            <input type="checkbox" name="id" size="20" value="100" />
            <input type="text" name="name" size="20" value="FOO" />
            <input type="text" name="cost" size="20" value="10.00">
            <input type="text" name="quantity" size="20" value="1">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="id" size="20" value="200" />
            <input type="text" name="name" size="20" value="BAR" />
            <input type="text" name="cost" size="20" value="10.00">
            <input type="text" name="quantity" size="20" value="3">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="id" size="20" value="300" />
            <input type="text" name="name" size="20" value="FOO" />
            <input type="text" name="cost" size="20" value="10.00">
            <input type="text" name="quantity" size="20" value="9">
        </td>
    </tr>
</table>    
  

jQuery:

 // when the id checkbox is clicked
$('table').delegate('input[name=id]', 'click', function(){

    // set the total at 0
    var totalCost = 0;

    // loop through each checked line
    $('input[name=id]:checked').each(function(){

       // get the input values for this checked row
       var thisRow = $(this).parent(), 
           person = thisRow.find('input[name=name]').val(),
           qty = thisRow.find('input[name=quantity]').val(),
           cost = thisRow.find('input[name=cost]').val();

       // get total
       var lineCost = cost * qty;

       // add to the grand total 
       totalCost =parseFloat(lineCost);

    });

    // output the total cost
    $('#output').empty().append(totalCost);

});
  

Должен ли я создавать массив или объект? По сути, мне просто нужно получить все имена, которые были проверены, и показать общую сумму для каждого. Мне просто нужна точка в правильном направлении.

Комментарии:

1. К чему вы стремитесь? Производительность? Наименьший объем кода? Вы могли бы сделать это множеством разных способов, но к чему вы стремитесь?

2. Хороший вопрос, там не будет тонны флажков, поэтому он не должен быть слишком тяжелым. Я думаю, что удобочитаемость кода была бы чем-то, на что стоило бы обратить внимание.

Ответ №1:

Как насчет чего-то подобного?

http://jsfiddle.net/vdunm/2/

По сути, он просто создает объект с индивидуально сгруппированными итогами.

Ответ №2:

Вы должны создавать объект, пока не требуется реальная сортировка.

Сразу после ваших итогов у вас могут быть эти строки:

 totalCost  = parseFloat(lineCost);

if(totals[person] == null) {
    totals[person] = 0;
}

totals[person]  = totalCost;
  

Вам также потребуется определить:

 var totals = {};
  

Это было бы выше вашего цикла.