0
我到處搜索過，我似乎無法得到任何工作。我想在通過按鈕刪除所有行後沒有顯示任何錶行時隱藏「刪除所選項目」按鈕。我嘗試了幾個JQuery函數無濟於事。如何根據表是否有行來動態地隱藏按鈕
我目前有onclick事件調用javascript函數來設置按鈕的可見性隱藏或可見，但似乎並沒有工作。我已經能夠通過添加按鈕使按鈕可見，但我似乎無法在表格爲空後再次隱藏它。提前致謝。
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../stylesheet.css">
<script type="text/javascript">
function checkFN(){ //function to check if there are rows in the table
var x = document.getElementById("tasksFN").rows.length; //gives a variable to row length
if(x == 0){ //checks if there is any data in table
//if no data in table hides delete button
document.getElementById("delFN").style.visibility = "hidden";
}else{
//if data exists in table makes delete button visible
document.getElementById("delFN").style.visibility = "visible";
}
}
</script>
<script type="text/javascript">
function checkWM(){ //function to check if there are rows in the table
var x = document.getElementById("tasksWM").rows.length; //gives a variable to row length
if(x == 0){ //checks if there is any data in table
//if no data in table hides delete button
document.getElementById("delWM").style.visibility = "hidden";
}else{
//if data exists in table makes delete button visible
document.getElementById("delWM").style.visibility = "visible";
}
}
</script>
<script type="text/javascript">
function checkBOH(){ //function to check if there are rows in the table
var x = document.getElementById("tasksBOH").rows.length; //gives a variable to row length
if(x == 0){ //checks if there is any data in table
//if no data in table hides delete button
document.getElementById("delBOH").style.visibility = "hidden";
}else{
//if data exists in table makes delete button visible
document.getElementById("delBOH").style.visibility = "visible";
}
}
</script>
<script type="text/javascript">
function checkRAM(){ //function to check if there are rows in the table
var x = document.getElementById("tasksRAM").rows.length; //gives a variable to row length
if(x == 0){ //checks if there is any data in table
//if no data in table hides delete button
document.getElementById("delRAM").style.visibility = "hidden";
}else{
//if data exists in table makes delete button visible
document.getElementById("delRAM").style.visibility = "visible";
}
}
</script>
</head>
<body>
<H2 align="center"><u>Enter New Tasks Below</u></H2>
<H3 align="center">
Type your new task into the text box below and click "Add".<br><br>
Once a task or multiple tasks have been completed, check the box next to the task/tasks you would like to remove and click the "Delete Selected Items" button.</H3>
<div id="main" align"center">
<div class="unconFN">
<table id="tasksFN" cellpadding="3" cellspacing="3" border="0">
<h4>FieldNation UnConfirmed WO Numbers</h4> <!-- textbox heading -->
<input type="text" id="newFN" /> <!-- textbox for new data to be added -->
<br />
<input type="submit" id="addFN" value="Add" /> <!--button to add data from textbox to table -->
<br /><br />
</table/>
<br />
<input type="button" id="delFN" value="Delete Selected Items" hidden="true" onclick="checkFN()" />
<script>
//function to add text from textbox to table on button click
$("#addFN").click(function() {
//data to be added to table
var val = $("#newFN").val();
//prepends checkbox to data added to table
var newTxt = $('<tr><td><input type="checkbox" class="checkbox"></td><td>' + val + '</td></tr>');
//creates new tr and td from the values entered in textbox
$('#myTable').append('<tr><td>' + val + '</td></tr>');
//adds the data to the table
$("#tasksFN").append(newTxt);
//creates new empty row for next data set to be added
$("#newFN").val("");
//changes hidden attribute of delete button to make it visible
$("#delFN").attr("hidden",false);
});
$(document).ready(function() {
//function to delete checked rows from table on button click
$("#delFN").click(function() {
//checks to see whether checkbox is checked or not
console.log($(".checkbox[checked='checked']"))
//function to do an action on all rows with checked checkboxes
$(".checkbox:checked").each(function() {
//sets variable for the rows with checked checkboxes
var curFN = $(this).parents('tr');
//deletes rows with checked checkboxes
curFN.remove();
});
});
});
</script>
</div> <!-- end .unconFN div -->
<div class="unconWM">
<table id="tasksWM" cellpadding="3" cellspacing="3" border="0">
<h4>WorkMarket UnConfirmed WO Numbers</h4> <!-- textbox heading -->
<input type="text" id="newWM" /> <!-- textbox for new data to be added -->
<br />
<input type="submit" id="addWM" value="Add" /> <!--button to add data from textbox to table -->
<br /><br />
</table/>
<br />
<input type="button" id="delWM" value="Delete Selected Items" hidden="true" onclick="checkWM()" />
<script>
//function to add text from textbox to table on button click
$("#addWM").click(function() {
//data to be added to table
var val = $("#newWM").val();
//prepends checkbox to data added to table
var newWM = $('<tr><td><input type="checkbox" class="checkbox"></td><td>' + val + '</td></tr>');
//creates new tr and td from the values entered in textbox
$('#myTable').append('<tr><td>' + val + '</td></tr>');
//adds the data to the table
$("#tasksWM").append(newWM);
//creates new empty row for next data set to be added
$("#newWM").val("");
//changes hidden attribute of delete button to make it visible
$("#delWM").attr("hidden",false);
});
$(document).ready(function() {
//function to delete checked rows from table on button click
$("#delWM").click(function() {
//checks to see whether checkbox is checked or not
console.log($(".checkbox[checked='checked']"))
//function to do an action on all rows with checked checkboxes
$(".checkbox:checked").each(function() {
//sets variable for the rows with checked checkboxes
var curWM = $(this).parents('tr');
//deletes rows with checked checkboxes
curWM.remove();
});
});
});
</script>
</div> <!-- end .unconWM div -->
<div class="BOHswap">
<table id="tasksBOH" cellpadding="3" cellspacing="3" border="0">
<h4>FieldNation UnConfirmed WO Numbers</h4> <!-- textbox heading -->
<input type="text" id="newBOH" /> <!-- textbox for new data to be added -->
<br />
<input type="submit" id="addBOH" value="Add" /> <!--button to add data from textbox to table -->
<br /><br />
</table/>
<br />
<input type="button" id="delBOH" value="Delete Selected Items" hidden="true" onclick="checkBOH()" />
<script>
//function to add text from textbox to table on button click
$("#addBOH").click(function() {
//data to be added to table
var val = $("#newBOH").val();
//prepends checkbox to data added to table
var newTxt = $('<tr><td><input type="checkbox" class="checkbox"></td><td>' + val + '</td></tr>');
//creates new tr and td from the values entered in textbox
$('#myTable').append('<tr><td>' + val + '</td></tr>');
//adds the data to the table
$("#tasksBOH").append(newTxt);
//creates new empty row for next data set to be added
$("#newBOH").val("");
//changes hidden attribute of delete button to make it visible
$("#delBOH").attr("hidden",false);
});
$(document).ready(function() {
//function to delete checked rows from table on button click
$("#delBOH").click(function() {
//checks to see whether checkbox is checked or not
console.log($(".checkbox[checked='checked']"))
//function to do an action on all rows with checked checkboxes
$(".checkbox:checked").each(function() {
//sets variable for the rows with checked checkboxes
var curBOH = $(this).parents('tr');
//deletes rows with checked checkboxes
curBOH.remove();
});
});
});
</script>
</div> <!-- end .BOHswap div -->
<div class="unRAM">
<table id="tasksRAM" cellpadding="3" cellspacing="3" border="0">
<h4>FieldNation UnConfirmed WO Numbers</h4> <!-- textbox heading -->
<input type="text" id="newRAM" /> <!-- textbox for new data to be added -->
<br />
<input type="submit" id="addRAM" value="Add" /> <!--button to add data from textbox to table -->
<br /><br />
</table/>
<br />
<input type="button" id="delRAM" value="Delete Selected Items" hidden="true" onclick="checkRAM()" />
<script>
//function to add text from textbox to table on button click
$("#addRAM").click(function() {
//data to be added to table
var val = $("#newRAM").val();
//prepends checkbox to data added to table
var newTxt = $('<tr><td><input type="checkbox" class="checkbox"></td><td>' + val + '</td></tr>');
//creates new tr and td from the values entered in textbox
$('#myTable').append('<tr><td>' + val + '</td></tr>');
//adds the data to the table
$("#tasksRAM").append(newTxt);
//creates new empty row for next data set to be added
$("#newRAM").val("");
//changes hidden attribute of delete button to make it visible
$("#delRAM").attr("hidden",false);
});
$(document).ready(function() {
//function to delete checked rows from table on button click
$("#delRAM").click(function() {
//checks to see whether checkbox is checked or not
console.log($(".checkbox[checked='checked']"))
//function to do an action on all rows with checked checkboxes
$(".checkbox:checked").each(function() {
//sets variable for the rows with checked checkboxes
var curRAM = $(this).parents('tr');
//deletes rows with checked checkboxes
curRAM.remove();
});
});
});
</script>
</div> <!-- end .unRAM div -->
</div> <!-- end #main div -->
</body>
</html>
使用'document.getElementById'不是'Document.getElementById' –
好抓，菜鳥錯誤，還是不行。 :-(但是我已經更新了代碼以反映這個變化 – user3321457
在你提供的代碼中，所有函數都沒有關閉'}' – RRK