隱藏/取消隱藏表格行點擊按鈕？

我正在使用下面的代碼。隱藏/取消隱藏表格行點擊按鈕？

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

預先感謝。

來源

2016-12-14 robert

請注意，這個問題沒有關於Java或jQuery。我重申它包含Javascript代替 –

這真的不清楚你在問什麼，請詳細說明！ –

嘗試這可能是幫助你，

<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

來源

2016-12-14 12:52:52 kc1994

他要求使用Javascript，而不是用於jQuery –

另外你的jsfiddle不工作？ –

@ Finiox我認爲你是失明的 – kc1994

使用名爲hide的變量。它默認設置爲false。每當你點擊按鈕的功能toggleTable()將運行，這將檢查hide變量，並設置display表來醚block或none

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/

來源

2016-12-14 12:49:57

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

來源

2016-12-14 12:50:53 Sona

如果您需要在JavaScript中試試這個：

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>

來源

2016-12-14 13:19:01

隱藏/取消隱藏表格行點擊按鈕？

回答

相關問題