динамический список таблиц цен

Question

Я пишу код для выбора/удаления продукта из таблицы отображения, а когда продукт выбран, тогда продукт с его ценой будет отображаться в какой-либо другой таблице, где в конце общая сумма также необходима который обновляется в соответствии с выбранным ценам продукции

<table id="table-example" class="table"> 
    <thead> 
     <tr> 
      <th>Cause</th> 
      <th>Monthly Charge</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <div id="selectedServices"></div> 
      <td id="myDiv"></td> 
     </tr> 
    </tbody> 
</table> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</p> 
<table id="table-example" class="table"> 
    <thead> 
     <tr> 
      <th>Cause</th> 
      <th>Monthly Charge</th> 
     </tr> 
    </thead> 
    <div> 
     <tbody> 
      <p> 
       <tr> 
        <td> 
         <input type="checkbox" onclick="ToggleBGColour(this);" /> 
         <label>table</label> 
        </td> 
        <td>80</td> 
       </tr> 
       <tr> 
        <td> 
         <input type="checkbox" onclick="ToggleBGColour(this);" /> 
         <label>chair</label> 
        </td> 
        <td>45</td> 
       </tr> 
       <tr> 
        <td> 
         <input type="checkbox" onclick="ToggleBGColour(this);" /> 
         <label>set</label> 
        </td> 
        <td>10</td> 
       </tr> 
     </tbody> 
    </div> 
</table> 

сценария

$(function() { 
    $(":checkbox").change(function() { 
    var arr = $(":checkbox:checked").map(function() { return $(this).next().text(); }).get(); 
    $("#myDiv").text(arr.join(',')); 
    }); 
}); 

function ToggleBGColour(item) { 

    var td = $(item).parent();  

    if (td.is('.rowSelected'))  
     td.removeClass("rowSelected");  
    else   
     td.addClass("rowSelected");  

} 

Вот соответствующий fiddle.

Answer 1

Основываясь на ваш комментарий на мой другой ответ, это должно работать для вас, то :

$(":checkbox").change(function() { 
    // Toggle class of selected row 
    $(this).parent().toggleClass("rowSelected"); 

    // Get all items name, sum total amount 
    var sum = 0; 
    var arr = $(":checkbox:checked").map(function() { 
     sum += Number($(this).parents('tr').find('td:last').text()); 
     return $(this).parents('tr').clone(); 
    }).get(); 

    // Display selected items and their sum 
    $("#selectedServices").html(arr).find('input').remove(); 
    $("#total").text(sum); 
}); 

Это исключает необходимость создания новых элементов HTML в коде JavaScript, и уменьшает количество .maps() в d .each() петель до один.

http://jsfiddle.net/samliew/uF2Ba/

Answer 2

Вот Javascript для, но и нужно, чтобы удалить OnClick AttrS:

$(function() { 
    $(":checkbox").change(function() { 
     ToggleBGColour(this); 
     var arr = $(":checkbox:checked").map(function() { 
      return $(this).next().text(); 
     }).get(); 

     var nums = $(":checkbox:checked").map(function() { 
      return parseInt($(this).parent().next().html()); 
     }).get(); 

     var total = 0; 
     for (var i = 0; i < nums.length; i++) { 
      total += nums[i] << 0; 
     } 


     $("#myDiv").text(arr.join(',') + 'total : '+total); 

    }); 
}); 


function ToggleBGColour(item) { 

    var td = $(item).parent();  

    if (td.is('.rowSelected'))  
     td.removeClass("rowSelected");  
    else   
     td.addClass("rowSelected");  

} 

Answer 3

Я обновил свою скрипку с моим ответом: http://jsfiddle.net/A2SKr/9/

Вот что я изменился.

• Немного лучше отформатирован.
• i удален атрибут onclick. Его плохая практика использовать это из-за проблем с производительностью. Использовать делегаты
• Ive также изменил маленький бит вашего HTML. выход теперь таблица
• добавлен общий элемент к выходу, а

• Javascript код:

  $(":checkbox").change(function() { 
      var total = 0; 
      var check = $(":checkbox:checked"); 
      var causes = check.map(function() { 
       return $(this).next().text(); 
      }).get(); 
      var costs = check.map(function() { 
       return $(this).parent().next().text() 
      }).get(); 
      var tbody = $("#table-example tbody").empty(); 
      $.each(causes, function (i, cause) { 
       tbody.append("<tr><td>" + cause + "</td><td id='" + i + "'><td/></tr>"); 
      }); 
      $.each(costs, function (i, cost) { 
       $('#' + i + '').html(cost); 
       total += parseInt(cost, 10); 
      }); 
      tbody.append("<tr><td>Total</td><td>" + total + "<td/></tr>"); 
  }); 
  });