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

这样就无需在JavaScript代码中创建新的HTML元素，并将.maps()和.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/

这就是我改变了。

稍微好一点的格式化。
我删除了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>");
 });
});

动态定价表列表

3 个答案: