MOOC資料結構PTA-03-樹1 樹的同構
阿新 • • 發佈：2021-08-02
引入了jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./jq.js"></script> <style> table, th, td { border: 1px solid black; } table { border-collapse: collapse; margin-top: 30px; margin-bottom: 30px; width: 600px; text-align: center; } td,th{ width: 120px; } button { border: 0; } </style> </head> <body> <table> <tr> <th><button class="all">全選</button></th> <th>商品名稱</th> <th>單價</th> <th>數量</th> <th>小計</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" name="" class="getGoods"> </td> <td>電腦</td> <td class="price">200</td> <td> <button class="jian">-</button> <span>1</span> <button class="add">+</button> </td> <td class="total">200</td> <td>刪除</td> </tr> <tr> <td><input type="checkbox" name="" class="getGoods"> </td> <td>手機</td> <td class="price">100</td> <td> <button class="jian">-</button> <span>1</span> <button class="add">+</button> </td> <td class="total">100</td> <td>刪除</td> </tr> </table> <div> <span>總計：</span> <span class="sum">0</span> </div> <script> // 邏輯： // 載入頁面時，呼叫getSum 總價 getSum(); // 1.加減（小計） // 加法 $(".add").click(function(){ // 1.1 算出數量變化 let num = parseInt($(this).prev().text()); num++; $(this).prev().text(num); // 1.2 算出 小計價格 let price = parseInt($(this).parent().prev().text()); $(this).parent().next().text(price*num); // 呼叫 總價 getSum(); }) // 減法 $(".jian").click(function(){ // 1.1 算出數量變化 let num = parseInt($(this).next().text()); num--; if(num<1) num=1; $(this).next().text(num); // 1.2 算出 小計價格 let price = parseInt($(this).parent().prev().text()); $(this).parent().next().text(price*num); // 呼叫 總價 getSum(); }) // 2. 總價 = 小計之和（選中條件下） function getSum(){ let sum = 0; for(let i=0;i<$('.total').length;i++){ // 新增 選中判斷的條件 if($('.total').eq(i).parent().find('input').prop('checked')){ sum += parseInt($('.total').eq(i).text()) } } $('.sum').text(sum); } // 3. 選中 // 選中：有三種表現形式 // 1> 使用者點選 出現 √ // 2> 新增屬性 checked // 3> js操作 attr() / prop('checked',true) // 3.1 全選 $('.all').click(function(){ $('.getGoods').prop('checked',true); // 呼叫 總價 getSum(); }); // 3.2 使用者選中 $('.getGoods').click(function(){ // 其實已經選中了 // 呼叫 總價 getSum(); }); </script> </body> </html>