為什么單擊“新產品”按鈕后，我的“保存”按鈕和“取消”按鈕沒有顯示？

Question

我是javascript的初學者。

當我單擊“新產品”按鈕時，新行將添加到表中（計算出來）。 但是，應該會顯示“保存”按鈕和“取消”按鈕（它不起作用），而“新產品”按鈕將被隱藏（仍然不起作用）。

這是我的HTML的一部分，在其中聲明了按鈕和表格。

<table id="dataTable" class="poductTable" border="1" cellspacing="2" width="75%" align="center">
        <tr>
            <td>No</td>
            <td>Name</td>
            <td>Description</td>
            <td>Unit</td>
            <td>Qty</td>
        </tr>
        <tr>
            <td>1</td>
            <td><input type="text"></td>
            <td><input type="text"></td>
            <td><input type="text"></td>
            <td><input type="text"></td>
        </tr>
    </table>


    <table align="center" id="productActions">
        <tr>
            <td><button type="button" onclick="saveProd()" id="saveProd" style="display:none;">Save</button></td>
            <td><button type="button" onclick="cancelProd()" id="cancelProd" style="display:none;">Cancel</button></td>
            <td><button type="button" onclick="addRow('dataTable')" id="newProd">New Product</button></td>
            <td><button type="button" onclick="editProduct()" id="editProd">Edit Product</button></td>
            <td><button type="button" onclick="delProduct()" id="delProd">Delete Product</button></td>

        </tr>
    </table>

這是我腳本的一部分。

function addRow(tableID) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    cell1.innerHTML = rowCount + 0;

    var cell2 = row.insertCell(1);
    var element1 = document.createElement("input");
    element1.type = "text";
    element1.name = "newProdName[]";
    cell2.appendChild(element1);

    var cell3 = row.insertCell(2);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.name = "newProdDesc[]";
    cell3.appendChild(element2);

    var cell4 = row.insertCell(3);
    var element3 = document.createElement("input");
    element3.type = "text";
    element3.name = "newProdUnit[]";
    cell4.appendChild(element3);

    var cell5 = row.insertCell(4);
    var element4 = document.createElement("input");
    element4.type = "text";
    element4.name = "newProdQty[]";
    cell5.appendChild(element4);
}

$(document).ready(function () {
        $('#newProd').click(function () {
            $(this).hide();
            $('#saveProd').show();
            $('#cancelProd').show();
        });
});

感謝您的幫助。

Answer 1

我以前有過同樣的問題

不知道它是否正確修復，但我使用JavaScript隱藏了元素

HTML：

<td><button type="button" onclick="saveProd()" id="saveProd">Save</button></td>
<td><button type="button" onclick="cancelProd()" id="cancelProd">Cancel</button></td>

的JavaScript

$(document).ready(function () {
        $('#saveProd').hide();
        $('#cancelProd').hide();

        $('#newProd').click(function () {
            $(this).hide();
            $('#saveProd').show();
            $('#cancelProd').show();
        });
});