Question

您好，我在这里相当新，所以如果我发出任何格式或问题错误，请纠正我！

我正在尝试创建一个简单的购物篮文件，并需要一些帮助来获取更改篮子中的项目数量。目前我可以创建一个按钮，向表中添加一个新行并填充它，我只是在获取函数以检查项目是否已经在表中并且只更新数量单元格时出现短缺。我对IF语句没用，所以任何帮助都会受到赞赏！

<!DOCTYPE html>
<html>
<head>
<script>
function additem1() {

    var table = document.getElementById("basket");
    var row1 = table.insertRow(1);
    var cell1 = row1.insertCell(0);
    var cell2 = row1.insertCell(1);
    var cell3 = row1.insertCell(2);
    var cell4 = row1.insertCell(3);
    var cell5 = row1.insertCell(4);
    var cell6 = row1.insertCell(5);
cell1.innerHTML = "Shorts (f)";
cell2.innerHTML = "Stone Wash";
cell3.innerHTML = "1";
cell4.innerHTML = "";
cell5.innerHTML = "";
cell6.innerHTML = "";
;

}
</script>
<style>
table, td {
    border: 1px solid black;
}
</style>
</head>
<body>
    <h2> List of Items </h2>
    <table border="1">
    <tr bgcolor="#9acd32">
        <th> Product </th>
        <th> Description </th>
        <th> Quantity </th>
        <th> Price </th>

            <tr>
    <td> Shorts (F) </td>
    <td> Stone wash Denim shorts </td>
    <td> 20 </td>
    <td> 25.90 </td>
    <td> <button onclick= "additem1()"> Add Item To Basket </button> </td>

     </table>

     <table id="basket" border = "1">
    <tr bgcolor="#9acd32">
        <th> Product </th>
        <th> Description </th>
        <th> Quantity </th>
        <th> Price </th>
        <th colspan="2"> Add / Remove items </th>
    </tr>
</table>

如您所见，第一个表格包含项目信息，第二个表格包含购物篮信息。

Answer 1

请考虑深入研究js编码;你可以考虑检查元素是否已经存在，然后如果这样增加数量。

我让你的代码更加通用，但是对于一个工作篮，还有更多工作要做，这是你的工作。

代码：

function additem1(e) {
    var oRow = e.parentNode.parentNode
    var prod = oRow.cells[0].innerHTML;
    var des = oRow.cells[1].innerHTML;
    var table = document.getElementById("basket");

    var row1 = GetCellValues(prod);
    if (typeof row1 === 'undefined') {
        row1 = table.insertRow(1);
        var cell1 = row1.insertCell(0);
        var cell2 = row1.insertCell(1);
        var cell3 = row1.insertCell(2);
        var cell4 = row1.insertCell(3);
        var cell5 = row1.insertCell(4);
        var cell6 = row1.insertCell(5);
        cell1.innerHTML = prod;
        cell2.innerHTML = des;
        cell3.innerHTML = "1";
        cell4.innerHTML = "";
        cell5.innerHTML = "";
        cell6.innerHTML = "";;
    } else {
        row1.cells[2].innerHTML = parseInt(row1.cells[2].innerHTML) + 1
    }

}

function GetCellValues(prod) {
    var table = document.getElementById('basket');
    for (var r = 0, n = table.rows.length; r < n; r++) {
        for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
            if (table.rows[r].cells[c].innerHTML == prod) return table.rows[r];
        }
    }
    return
}

演示：http://jsfiddle.net/85o9yz02/

如果声明更改新行添加到添加的数量

1 个答案: