Question

我正在使用以下代码。

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>

点击按钮时，如何隐藏/取消隐藏table(id="testing").rows(class="test")。如何使用相同的id值调用两个按钮。

示例链接：Test

提前致谢。

Answer 1

试试这可能对你有帮助，

<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>

这里是jsfiddle： Jsffidle

Answer 2

如果你需要JAVASCRIPT试试这个：

＆＃13;

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';}
        }
    }
}

＆＃13;

<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>

＆＃13;

Answer 3

使用名为hide的变量。默认设置为false。每当您点击按钮时，系统toggleTable()都会运行，这会检查hide变量，并将表的display设置为以太block或none < / p>

<强> 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小提琴： https://jsfiddle.net/x0wfzdg5/4/

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

单击按钮隐藏/取消隐藏表格行？

4 个答案: