为什么我单击新建产品按钮后，保存按钮和取消按钮不显示？

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