如何根据表是否有行动态隐藏按钮

时间：2015-09-04 04:36:36

标签： javascript jquery html button

我到处搜寻，似乎无法得到任何工作。我想在通过按钮删除所有行后没有显示表行时隐藏“删除所选项”按钮。我尝试了一些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>

3 个答案:

答案 0 :(得分：1)

首先提出一些建议。您有几个语法问题，而且代码的可读性不高。始终不要将脚本与html混淆。阅读真的很痛苦。以下是更新后的html和js以及正常工作的 Fiddle here 。

$(document).ready(function() {
//keep only one document.ready if possible and wrap all the js code in that
function checkFN(){
   var x = document.getElementById("tasksFN").rows.length;
   if(x == 0){
       $("#delFN").hide(); 
       //since you are anyways using jquery make use of it completely. Use .hide() and
       //.show() jquery methods to hide/show elements
   }else{
        $("#delFN").show();
   }
}

function checkWM(){
   var x = document.getElementById("tasksWM").rows.length;
   if(x == 0){
        $("#delWM").hide();
   }else{
        $("#delWM").show();
   }
}

function checkBOH(){
   var x = document.getElementById("tasksBOH").rows.length;
   if(x == 0){
        $("#delBOH").hide();
   }else{
        $("#delBOH").show();
   }
}

function checkRAM(){
    var x = document.getElementById("tasksRAM").rows.length;
    if(x == 0){
        document.getElementById("delRAM").style.visibility = "hidden";
    }else{
        document.getElementById("delRAM").style.visibility = "visible";
    }
}

$("#delWM").click(function() {
    $(".checkbox:checked").each(function() {
        $(this).closest('tr').remove();
    });
    checkWM();
});

$("#addWM").click(function() {
     var val = $("#newWM").val();
     var newWM = $('<tr><td><input type="checkbox" class="checkbox"></td><td>' + val + '</td></tr>');
	 $('#myTable').append('<tr><td>' + val + '</td></tr>');
     $("#tasksWM").append(newWM);
     $("#newWM").val("");
     $("#delWM").show();
});
        
$("#addFN").click(function() {
     var val = $("#newFN").val();
     var newTxt = $('<tr><td><input type="checkbox" class="checkbox"></td><td>' + val + '</td></tr>');
     $('#myTable').append('<tr><td>' + val + '</td></tr>');
     $("#tasksFN").append(newTxt);
     $("#newFN").val("");
     $("#delFN").show();
});

$("#delFN").click(function() {
     $(".checkbox:checked").each(function() {
        $(this).closest('tr').remove();
     });
     checkFN();//call the required function to check for data to work with delete button hide/show
});
    
$("#addBOH").click(function() {
     var val = $("#newBOH").val();
     var newTxt = $('<tr><td><input type="checkbox" class="checkbox"></td><td>' + val + '</td></tr>');
     $('#myTable').append('<tr><td>' + val + '</td></tr>');
     $("#tasksBOH").append(newTxt);
     $("#newBOH").val("");
     $("#delBOH").show();
 });
    
 $("#delBOH").click(function() {
     $(".checkbox:checked").each(function() {
        $(this).closest('tr').remove();
     });
     checkBOH();
 });

 $("#addRAM").click(function() {
     var val = $("#newRAM").val();
     var newTxt = $('<tr><td><input type="checkbox" class="checkbox"></td><td>' + val + '</td></tr>');
     $('#myTable').append('<tr><td>' + val + '</td></tr>');
     $("#tasksRAM").append(newTxt);
     $("#newRAM").val("");
     $("#delRAM").show();
 });
 
 $("#delRAM").click(function() {
	 $(".checkbox:checked").each(function() {
          $(this).closest('tr').remove();
     });
     checkRAM();
 });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 class="unconFN">
    <table id="tasksFN" cellpadding="3" cellspacing="3" border="0">
        <h4>FieldNation UnConfirmed WO Numbers</h4>
        <input type="text" id="newFN" />
        <br />
        <input type="submit" id="addFN" value="Add"  />
        <br /><br />
    </table>
    <br />
    <input type="button" id="delFN" value="Delete Selected Items" hidden="true" />
</div>
<div class="unconWM">
    <table id="tasksWM" cellpadding="3" cellspacing="3" border="0">
        <h4>WorkMarket UnConfirmed WO Numbers</h4>
        <input type="text" id="newWM" />
        <br />
        <input type="submit" id="addWM" value="Add"  />
        <br /><br />
    </table>
    <br />
    <input type="button" id="delWM" value="Delete Selected Items" hidden="true"  />
</div>

<div class="BOHswap">
    <table id="tasksBOH" cellpadding="3" cellspacing="3" border="0">
        <h4>FieldNation UnConfirmed WO Numbers</h4>
        <input type="text" id="newBOH" />
        <br />
        <input type="submit" id="addBOH" value="Add"  />
        <br /><br />
    </table>
    <br />
    <input type="button" id="delBOH" value="Delete Selected Items" hidden="true" />
</div>

<div class="unRAM">
    <table id="tasksRAM" cellpadding="3" cellspacing="3" border="0">
        <h4>FieldNation UnConfirmed WO Numbers</h4>
        <input type="text" id="newRAM" />
        <br />
        <input type="submit" id="addRAM" value="Add"  />
        <br /><br />
    </table>
    <br />
    <input type="button" id="delRAM" value="Delete Selected Items" hidden="true"  />
</div>

需要注意的几个要点

  •   

    您的<table>未能正常结束。这就像</table/>
      而它应该是</table>

  •   

    不要使用onclick这样的元素内联<input type="button" id="delRAM" onclick="somefunc()"/>，因为您已经在处理   按钮click event。这个功能会发生什么   首先调用，它将检查记录的存在然后它会去   并删除每个checkbox。所以你需要在之后调用function   $.each检查记录。

  •   

    始终尝试保留一个$(document).ready()并将所有js包裹起来   代码在那，如果你只保留这个$(document).ready()是好的   在</body>之前，js部分应始终位于html的末尾   不要忘记将此$(document).ready()保留在<script> type="text/javascipt"></script>

    中

答案 1 :(得分：0)

  1. 在脚本标记的src中添加http：//

  2. 为前4个函数添加结束括号

    3. 经过这些更改后，代码似乎工作正常。

答案 2 :(得分：0)

出于兴趣，这是我的尝试：

var myTable = $('#myTable');
var prefixAddID = 'add';
var prefixDelID = 'del';
var prefixTasksID = 'tasks';
var prefixNewID = 'new';

$('#delFN, #delWM, #delBOH, #delRAM').on('click', deleteRow);
$('#addFN, #addWM, #addBOH, #addRAM').on('click', addRow);

function addRow() {
  var suffixID = $(this).attr('id').substr(prefixAddID.length);
  var value = $('#' + prefixNewID + suffixID).val();
  myTable.append('<tr><td>' + value + '</td></tr>');
  $('#' + prefixTasksID + suffixID).append($('<tr><td><input type="checkbox" class="checkbox"></td><td>' + value + '</td></tr>'));
  $('#' + prefixNewID + suffixID).val('');
  $('#' + prefixDelID + suffixID).show();
}

function deleteRow() {
  var suffixID = $(this).attr('id').substr(prefixDelID.length);
  $('.checkbox:checked').each(function() {
    $(this).parents('tr').remove();
  });
  var length = $('#' + prefixTasksID + suffixID)[0].rows.length;
  $('#' + prefixDelID + suffixID).toggle(length !== 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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 class="unconFN">
  <table id="tasksFN" cellpadding="3" cellspacing="3" border="0">
    <h4>FieldNation UnConfirmed WO Numbers</h4>
    <input type="text" id="newFN" />
    <br />
    <input type="submit" id="addFN" value="Add" />
    <br />
    <br />
  </table>
  <br />
  <input type="button" id="delFN" value="Delete Selected Items" hidden="true" />
</div>
<div class="unconWM">
  <table id="tasksWM" cellpadding="3" cellspacing="3" border="0">
    <h4>WorkMarket UnConfirmed WO Numbers</h4>
    <input type="text" id="newWM" />
    <br />
    <input type="submit" id="addWM" value="Add" />
    <br />
    <br />
  </table>
  <br />
  <input type="button" id="delWM" value="Delete Selected Items" hidden="true" />
</div>
<div class="BOHswap">
  <table id="tasksBOH" cellpadding="3" cellspacing="3" border="0">
    <h4>FieldNation UnConfirmed WO Numbers</h4>
    <input type="text" id="newBOH" />
    <br />
    <input type="submit" id="addBOH" value="Add" />
    <br />
    <br />
  </table>
  <br />
  <input type="button" id="delBOH" value="Delete Selected Items" hidden="true" />
</div>
<div class="unRAM">
  <table id="tasksRAM" cellpadding="3" cellspacing="3" border="0">
    <h4>FieldNation UnConfirmed WO Numbers</h4>
    <input type="text" id="newRAM" />
    <br />
    <input type="submit" id="addRAM" value="Add" />
    <br />
    <br />
  </table>
  <br />
  <input type="button" id="delRAM" value="Delete Selected Items" hidden="true" />
</div>

可以找到其中的 here 。希望这在某种程度上有所帮助。我稍后会添加详细信息。

<强> 详细

  • 这个想法是你应该只有一个addRow函数和一个deleteRow函数来避免重复。
  • 这要归功于您已经在HTML元素中id使用的命名约定。他们都有类似的模式。
  • 我不会说最好在您的标记中使用这么多id，因为它们可以替换为class属性但是现在，我只修复了一些问题标记（如其他人所述），并使用相同的标记。
  • 因此，在addRow中，点击的Add按钮的唯一性由其suffix的{​​{1}}获取，例如id和FN等。
  • 其余的操作只是使用这个独特的后缀来做任何需要做的事情。
  • 例如，单击WM按钮时，addFN需要在其中附加某个标记。因此，我们从tasksFN中取出FN，并将其与addFN合并，以使tasks选择器。
  • 其余的都是不言自明的。
  • tasksFN函数中发生了类似的事情。
相关问题
最新问题