javascript - 动态定价表列表

Question

我正在编写一个代码来从显示台中选择/删除产品，然后选择产品时，将其价格us的产品显示在其他表格中，在其他表格总和总数也需要根据选定的产品进行更新价格

<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);
});

这避免了在 JavaScript 代码中创建新 HTML 元素的需要，并将.maps()和.each()循环的数量减少到1 个。

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/

这就是我所做的改变。

• 格式稍微好一点。
• 我删除了该onclick属性。由于性能问题，使用它是不好的做法。使用委托
• 我还更改了您的 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>");
   });
  });