Question

基本上我有一个PHP方法从服务器（phone_table）上的数据库下载表。一切正常。当它打印表时，最后一列只是一个复选框，并使用此代码通过php打印：

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

这是来自JavaScript的方法getSubtotal（a），包含调试警报：

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: &#163;" + 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: &#163;" + localstorage.ttl;
            }
}

任何帮助都会很精彩，因为这会让我分心。干杯伙伴，

Answer 1

您缺少输入框上的结束尖括号，并且缺少属性值周围的一些单引号。你有：

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: &#163;" + 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: &#163;" + localstorage.ttl;
    }
}

更新＃2：这是一个有效的JSFIDDLE，它不会100％匹配您的代码，但应该向您显示它的工作原理：

http://jsfiddle.net/GvkN2/

Answer 2

首先，您可以更改

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

_{（注意：由于Array.prototype.forEach和document.querySelectorAll的使用，我的小提琴仅适用于IE9 +。但是，这些可以填充，或者你当然也可以使用替代品 - 但是因为我只是想猜测我不关心浏览器兼容性。）}

（JavaScript）试图通过CheckBox调用方法

2 个答案: