動態定價表清單

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()的數量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/

這裏就是我已經改變了。

• 格式稍好。
• 我刪除了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>"); 
  }); 
  });