使用EventListener和jQuery添加和刪除<tr>

Question

對於非常混亂的代碼抱歉。我很困惑我的$().ready(function()和個人功能應放置在哪裏。

什麼工作： 1）$(".calc").change(function() - 這將更新一個跨度的div從數據庫 2）當頁面加載填入表中選擇數據時，$(".calc").change(function()調用的函數addRow(e)之前設法寫「哎「到控制檯日誌，但以ReferenceError: Can't find variable: tbody addRow (furniture-product.php, line 396)失敗。一旦$(".calc").change(function()運行時，控制檯日誌不再工作

什麼不工作： 1）功能addRow(e) 2）功能removeRow(e)

我敢肯定這是有錯了地方小東西的情況下， ，但我已經嘗試了腳本的移動部分，但沒有成功。

$().ready(function() { 

    "use strict"; 
    var tbody = document.getElementById("the-tbody"); 

    document.getElementById("btn-add").addEventListener("click", addRow, false); 

    tbody.addEventListener("click", removeRow, false); 


    var radios = $('input[type=radio]'); 
    radios.on('change', function() { 
     radios.each(function() { 
      var radio = $(this); 
      radio.closest('.article-option')[radio.is(':checked') ? 'addClass' : 'removeClass']('highlight'); 
     }); 
    }); 


    $(".calc").change(function() { 
     calctotal() 

    }); 

}); 



function addRow(e) { 
    console.log("hey"); 
    var product_id = $('input[name="product_name"]').val(); 
    var product_price = $('input[name="product_price"]').val(); 
    var row = document.createElement('tr'); 
    row.innerHTML = '<td><input type="hidden" name="item_id[]" value="' + product_id + '"><p>' + name + '</p><input type="hidden" name="price[]" value="' + product_price + '" class="price">&pound;<span id="amount" class="amount">0</span> <span class="remove">[x]</span></td>'; 
    tbody.appendChild(row); 
    update_amounts(); 
} 



function removeRow(e) { 
    var elm; 
    for (elm = e.target; elm !== this; elm = elm.parentNode) { 
     if (/\bremove\b/.test(elm.className)) { 
      removeElement(elm.parentNode); 
      e.stopPropagation(); 
      return; 
      update_amounts(); 
     } 
    } 
} 

function calctotal() { 
    var total = 0; 

    var radios = $('input[type=radio]'); 

    radios.each(function() { 
     var radio = $(this); 
     radio.closest('.article-option')[radio.is(':checked') ? 'addClass' : 'removeClass']('highlight'); 

    }); 



    $(".calc:checked").each(function() { 
     var a = this.value.split(","); 
     total += parseFloat(a[0]); 
     name = (a[1]); 
     image = (a[2]); 
     curtainid = (a[3]); 
     curtaindesc = (a[4]); 


     $("span.img").html('<div class="row curtain-img"><img src="images/furniture/' + image + '" class="img-responsive img-rounded" style="border: 5px solid #5f4865"></div>'); 


     $("div#product_name").html('<input type="hidden" name="product_name" value="' + curtainid + '">' + name + ''); 
     $("div#product_desc").html('' + curtaindesc + ''); 
     $("div#product_add").html('<input type="button" id="btn-add" value="Add">'); 
     $("div#product_price").html('<input type="hidden" name="product_price" value="' + total.toFixed(2) + '"><strong>&pound;' + total.toFixed(2) + '</strong>'); 

    }); 


} 

很簡單的HTML是

<table id="myTable"> 

<tbody id="the-tbody"></tbody> 

</table> 

<input type="button" id="btn-add" value="Add"> 

JS小提琴：http://jsfiddle.net/pw25p3qt/

Answer 1

該代碼有許多問題 - 列表太多。

這是一個工作版本，剝離了一些原始代碼，只留下原始的添加/刪除功能。

HTML

<table id="myTable" border> 
    <thead> 
     <tr><th>Product</th><th>Unit Price</th><th>Quantity</th><th>Total Price</th><th>Remove</th></tr> 
    </thead> 
    <tbody id="the-tbody"></tbody> 
    <tr><td id="totalCell" colspan="5">Total: &pound;<span id="total"></span></td></tr> 
</table> 
<input type="button" id="btn-add" value="Add" /> 

的Javascript

$(function() { 
    "use strict"; 
    $("#btn-add").on('click', addRow); 
    var tbody = $("#the-tbody").on('click', '.remove', removeRow);//delegate click handling to the tbody element. 
    calc(); 

    function calc() { 
     var sum = 0; 
     $('tr.product').each(function() { 
      var qty = Number($(this).find('.qty').text()), 
       price = Number($(this).find('.price').text()), 
       amount = (qty * price).toFixed(2); 
      $(this).find('.amount').text(amount); 
      sum += Number(amount); 
     }); 
     $('#total').text(sum.toFixed(2)); 
    } 
    function addRow(e) { 
     $('<tr class="product"><td>Sample Product</td><td>&pound;<span class="price">1.00</span></td><td><span class="qty">1</span></td><td>&pound;<span class="amount"></span></td><td><span class="remove">[x]</span></td></tr>').appendTo(tbody); 
     calc(); 
    } 
    function removeRow(e) { 
     $(this).closest("tr").remove(); 
     calc(); 
    } 
}); 

DEMO

注意刪除按鈕如何單擊操作委託給tbody元素。這對確保稍後添加的每個刪除按鈕（作爲產品行的一部分）都具有所需的操作而無需單獨附加點擊處理程序是必需的。

另請注意，現在在$(function() {})結構中定義了所有工作函數addRow(),removeRow()和calc()。這確保了諸如tbody之類的變量保持在範圍之內（無需訴諸全球範圍）。

Answer 2

唉唉......你都在做正確的。只需在頂部定義你的變量，即。在document.ready（）之前。

var tbody=null; 
    $().ready(function() { 

"use strict"; 
tbody = document.getElementById("the-tbody"); 
document.getElementById("btn-add").addEventListener("click", addRow, false); 

tbody.addEventListener("click", removeRow, false); 


var radios = $('input[type=radio]'); 
radios.on('change', function() { 
    radios.each(function() { 
     var radio = $(this); 
     radio.closest('.article-option')[radio.is(':checked') ? 'addClass' : 'removeClass']('highlight'); 
    }); 
    }); 


    $(".calc").change(function() { 
    calctotal() 

    }); 

    });