我是一名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();
});
});
感謝您提前幫忙。
您的代碼按預期工作http://jsfiddle.net/zb6b2dcw/ – V31 2014-09-02 09:27:55
@ v31但是th e保存和取消按鈕不顯示。 – RMiram 2014-09-02 09:29:44
當您點擊新產品按鈕時,它們顯示在我共享的小提琴中。小提琴只有您的代碼 – V31 2014-09-02 09:30:16