javascript - 单击 new Product按钮后,为什么我的保存按钮和取消按钮不显示?

  显示原文与译文双语对照的内容
0 0

我是JavaScript的初学者。

单击new新产品button新行将在 table ( 这 that ) 中添加。 但是,保存按钮和取消按钮应该显示( 而且没有成功),新产品按钮将隐藏( 还是不起作用) 。

下面是我的HTML部分,其中我声明了按钮和 table 。

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

感谢你提前帮助。

时间:原作者:6个回答

0 0

我以前也有过同样的问题

不确定它是否正确,但是我使用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();
 });
});
原作者:
...