（JavaScript）嘗試通過複選框調用方法

Question

基本上我有一個PHP方法從服務器（phone_table）上的數據庫下載表。這一切都很好。當它打印表格中的最後一列是隻是一個複選框，其使用此代碼throught PHP的印刷：

echo "<td><input type='checkbox' id=$i onlick=getSubtotal($i)" . $a[$j+1] . "</td>"; 

這是該方法getSubtotal（a）從所述的JavaScript，完成與調試警報：

function getSubtotal(a) { 
alert("called"); 
var table_ph = document.getElementById("phone_table"); 
var cellNo = table_ph.rows.item(a).cells; 
var cellVal = document.getElementById(a); 
alert("localStorage = " + localstorage.ttl); 
alert("Called"); 

if(cellVal.checked == 1){ 
    cellVal = cellNo.item('5').textContent; 
    var sub = parseFloat(localstorage.ttl); 
    var num = parseFloat(cellVal); 
    alert("Checked"); 
    sub = sub + num; 
    localstorage.ttl = sub; 
    document.getElementById("subtotal").innerHTML= "Your Subtotal is: £" + localstorage.ttl; 
    alert(localstorage.ttl); 
} if(cellVal.checked == 0){ 
    cellVal = cellNo.item('5').textContent; 
    var sub = parseFloat(localstorage.ttl); 
    var num = parseFloat(cellVal); 
    sub = sub - num; 
    localstorage.ttl = sub; 
    document.getElementById('subtotal').innerHTML= "Your Subtotal is: £" + localstorage.ttl; 
      } 
} 

任何幫助都會很棒，因爲這會讓我分心。 乾杯夥計，

Answer 1

首先，你可以改變

if(cellVal.checked == 1) { 
    // ... 
} 
if(cellVal.checked == 0) { 
    // ... 
} 

到

if(cellVal.checked) { 
    // ... 
} else { 
    // ... 
} 

兩個塊也分享了很多行（他們重複），所以你可以把它們前/ if語句之後。此外，此行不正確：

cellVal = cellNo.item('1').textContent; 

cellVal是對DOM元素的引用。因此，改變其值由

cellVal.value = cellNo.item('1').textContent; 

做的下一件事是，你id屬性是無效的（他們不能僅僅是一個數字）。

但是 - 有太多的邏輯看起來不合適或明顯錯誤，如果不知道代碼應該做什麼，我無法真正改進。

• 什麼是localstorage那裏？該名稱表明與HTML5 localStorage的相似性，但它在這裏沒有做任何事情。
• 你爲什麼在很多方面處理a？爲什麼它既是一個索引又是一個id？一旦你使用了有效的ID，這將不再有效。
• 猜測你想加上被檢查的值，我沒有看到sub - num永遠是有用的。

最後，如前所述，您應該瞭解有關Separation of Concerns。不要將HTML與JavaScript混合使用。

---

編輯：你想達到什麼瞎猜，這就是我想：Fiddle

_{（注：我的小提琴將只IE9 +工作，由於Array.prototype.forEach和document.querySelectorAll的用法，但那些可以被刪除，或者你當然也可以使用替代方法 - 但是因爲我只是在猜測我不關心瀏覽器的兼容性）。}

Answer 2

您在輸入框中缺少關閉角括號，並且缺少圍繞您的屬性值的單引號。您有：

echo "<td><input type='checkbox' id=$i onlick=getSubtotal($i)" . $a[$j+1] . "</td>"; 

讓它這個，看看它是否解決了這個問題：

echo "<td><input type='checkbox' id='$i' onclick='getSubtotal($i)' />" . $a[$j+1] . "</td>"; 

更新：至於你的JavaScript，請確保您通過(a-1)到rows.item集合，因爲JavaScript的使用基於0的計數！你也有硬編碼cellNo.item('5') - 如果你想第5單元，請確保您更改到cellNo.item('4')：

function getSubtotal(a) { 

    var table_ph = document.getElementById("phone_table"); 
    var cellNo = table_ph.rows.item(a-1).cells; 
    var cellVal = document.getElementById(a); 

    if(cellVal.checked == 1){ 
     cellVal = cellNo.item('5').textContent; 
     var sub = parseFloat(localstorage.ttl); 
     var num = parseFloat(cellVal); 
     sub = sub + num; 
     localstorage.ttl = sub; 
     document.getElementById("subtotal").innerHTML= "Your Subtotal is: £" + localstorage.ttl; 
    } 

    if(cellVal.checked == 0){ 
     cellVal = cellNo.item('5').textContent; 
     var sub = parseFloat(localstorage.ttl); 
     var num = parseFloat(cellVal); 
     sub = sub - num; 
     localstorage.ttl = sub; 
     document.getElementById('subtotal').innerHTML= "Your Subtotal is: £" + localstorage.ttl; 
    } 
} 

更新＃2：這裏是一個工作的jsfiddle是不100％匹配你的代碼，但應該告訴你它的工作原理：

http://jsfiddle.net/GvkN2/