javascript - HideUnhide table rows clicking on button? - Stack Overflow

admin管理员组

文章数量:1302568

I am using the below code.

function testDisplay(test) {
        if (document.getElementById("portests").value == "Hide " + test) {
            document.getElementById("portests").value = "Show " + test;
        }
        else{
            document.getElementById("portests").value = "Hide " + test;
        }
    }

<input type = "button" name = "Test1" id="portests" value = "test1" onclick = "testDisplay(name)">
    <input type = "button" name = "Test1" id="portests1" value = "test" onclick = "testDisplay(name)">

    <table style="width:100%" id="testing">
    <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    </tr>
     <tr>
       <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    </tr>
    <tr class="test">
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    </tr>
    <tr class="test">
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
    </tr>
    <tr class="test">
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
   </tr>
   </table>

I am using the below code.

function testDisplay(test) {
        if (document.getElementById("portests").value == "Hide " + test) {
            document.getElementById("portests").value = "Show " + test;
        }
        else{
            document.getElementById("portests").value = "Hide " + test;
        }
    }

<input type = "button" name = "Test1" id="portests" value = "test1" onclick = "testDisplay(name)">
    <input type = "button" name = "Test1" id="portests1" value = "test" onclick = "testDisplay(name)">

    <table style="width:100%" id="testing">
    <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    </tr>
     <tr>
       <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    </tr>
    <tr class="test">
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    </tr>
    <tr class="test">
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
    </tr>
    <tr class="test">
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
   </tr>
   </table>

When clicking on button,How to hide/unhide the table(id="testing").rows(class="test"). How to call two buttons using the same id value.

Example link: Test

Thanks in advance.

• javascript
• php

Share Follow edited Dec 14, 2016 at 13:10 Sibeesh Venu 21.8k1717 gold badges115115 silver badges152152 bronze badges asked Dec 14, 2016 at 12:40 robertrobert 1111 gold badge11 silver badge55 bronze badges 2

• 1 Note that nothing about this question is regarding Java or jQuery. I retagged it to include Javascript for you instead – Rory McCrossan Commented Dec 14, 2016 at 12:41
• 1 it's really unclear what you're asking, please elaborate! – Amin Jafari Commented Dec 14, 2016 at 12:47

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Try this may be help you,

<script>
    $(document).ready(function(){
        $('#portests').on('click',function(){   
        $('.test').toggle();
   });
});
</script>

<input type = "button" name = "Test1" id="portests" value = "test1" >
<input type = "button" name = "Test1" id="portests1" value = "test" >

<table style="width:100%" id="testing">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
    </tr>
    <tr class="test">
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
    </tr>
    <tr class="test">
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
    </tr>
    <tr class="test">
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
    </tr>
</table>

here is jsfiddle : Jsffidle

If you Need In JAVASCRIPT Try this:

function testDisplay(test) {
    if (document.getElementById("portests").value == "Hide " + test) {
        document.getElementById("portests").value = "Show " + test;
        var table= document.getElementById("testing");
        for (var i = 0, row; row = table.rows[i]; i++) {
        if(row.className == "test"){row.style.visibility="hidden";}
        }
    }
    else{
        document.getElementById("portests").value = "Hide " + test;
        var table= document.getElementById("testing");
        for (var i = 0, row; row = table.rows[i]; i++) {
        if(row.className == "test"){row.style.visibility='visible';}
        }
    }
}

<input type = "button" name = "Test1" id="portests" value = "test1" onclick = "testDisplay(name)">
<input type = "button" name = "Test1" id="portests1" value = "test" onclick = "testDisplay(name)">

<table width="400px" id="testing">
<thead><tr>
<th>Firstname</th>
<th>Lastname</th> 
<th>Age</th>
</tr></thead>
 <tbody>
 <tr>
 <td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="test">
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr class="test">
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr class="test">
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>

Use a variable called hide. It is set to false on default. Whenever you click the button the function toggleTable() will run, this will check the hidevariable and set the display of the table to ether block or none

JS

var hide = false;
function toggleTable()
{
  if (hide == false)
  {
    hide = true;
    document.getElementById('table').style.display = 'none';
  }
  else
  {
    hide = false;
    document.getElementById('table').style.display = 'block';
  }
}

HTML

<button type="button" onclick="toggleTable()"></button>

<table id="table">

</table>

JS Fiddle: https://jsfiddle/x0wfzdg5/4/

<input type = "button" name = "show" id="show" value = "test1" onclick = "show()">
<input type = "button" name = "hide" id="hide" value = "test" onclick = "hide()">

function show() {
    $('#testing').show();
}
function hide(){
   $('#settings').hide();
}

本文标签： javascriptHideUnhide table rows clicking on buttonStack Overflow