为什么单击“新产品”按钮后，我的“保存”按钮和“取消”按钮没有显示？

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();
        });
});