顯示/隱藏按鈕javascript

我正在使用PHP，我試圖從數據庫中檢索一些數據。這些數據是帶有一對字符串的數字列表。我只是得到所有的數據，並用一個元素內部的一個<tr>元素回聲。它工作正常。顯示/隱藏按鈕javascript

現在我試圖創建一個過濾器來顯示和隱藏一些元素。例如，我首先只想顯示奇數，然後按下我的按鈕我將顯示所有數字。

是否有可能做這樣的事情？

2012-11-12 michoprogrammer

後的一些代碼你已經試過 – polin

你在哪裏到底有沒有問題？ 1.從數據庫中檢索數據？ 2.顯示它們？ 3.驗證它們4.觸發按鈕屬性？ – bonCodigo

問題是我不知道如何創建一個js腳本來顯示和隱藏我的表格的一些元素。因爲我認爲要保存每個ID爲的元素，但我發現標籤沒有任何ID！如果有一個id，則解決方案只是getelementbyid並使用style.display = none設置這些元素。但是沒有任何id ... =/ – michoprogrammer

我還不明白你在找什麼，但這可能有幫助。

的JavaScript

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#gdRows td").each(function() { 
     var cellText = $(this).text(); 
     if ($.trim(cellText) == '') { 
      $(this).css('background-color', 'cyan'); 
     } 
    }); 

    $('#btnHide').click(function() { 
     $("#gdRows tr td").each(function() { 
      var cell = $.trim($(this).text()); 
      if (cell.length == 0) { 
       $(this).parent().hide(); 
      } 
     }); 
    }); 
    $('#btnReset').click(function() { 
     $("#gdRows tr").each(function() { 
      $(this).show(); 
     }); 
    }); 
}); 
</script>

CSS

body 
{ 
    font-family: Calibri; 
    font-size : 11pt; 
    padding : 10px; 
} 

th 
{ 
    font-weight:bold; 
    padding:5px; 
    background-color: Lightgrey; 
} 

table 
{ 
    width: 450px; 
} 
td 
{ 
    width:30px; 
    padding:5px; 
} 

input 
{ 
    font-family: Calibri; 
    font-size : 12pt; 
}

HTML

<table border="1" id="gdRows"> 
     <tr align="left"> 
      <th scope="col">ID</th><th scope="col">ProductName</th><th scope="col">Quantity</th><th scope="col">Price</th><th scope="col">Description</th> 
     </tr><tr> 
      <td>1</td> 
    <td>Mouse</td> 
    <td>10</td> 
    <td>100</td> 
    <td>Great Quality</td> 
     </tr><tr> 
      <td>2</td><td>Speaker</td><td>15</td><td>990</td><td>&nbsp;</td> 
     </tr><tr> 
      <td>3</td><td>Hard Drive</td><td>35</td><td>3580</td><td>500 GB available</td> 
     </tr><tr> 
      <td>4</td><td>RAM</td><td>22</td><td>399</td><td>&nbsp;</td> 
     </tr><tr> 
      <td>5</td><td>Keyboard</td><td>10</td><td>3500</td><td>Wireless</td> 
     </tr><tr> 
      <td>6</td><td>Wi-Fi Router</td><td>&nbsp;</td><td>3990</td><td>&nbsp;</td> 
     </tr><tr> 
      <td>7</td><td>LCD</td><td>62</td><td>3000</td><td>17 inch</td> 
     </tr><tr> 
      <td>8</td><td>Intel Processor</td><td>5</td><td>7000</td><td>&nbsp;</td> 
     </tr><tr> 
      <td>9</td><td>HeadPhones</td><td>&nbsp;</td><td>350</td><td>Great Quality</td> 
     </tr><tr> 
      <td>10</td><td>Monitor</td><td>25</td><td>1990</td><td>&nbsp;</td> 
     </tr> 
</table> 
<br/> 
<input type="button" id="btnHide" Value=" Hide Empty Rows " /> 
<input type="button" id="btnReset" Value=" Reset " />

現場版本在這裏：http://jsfiddle.net/jquerybyexample/4RpVv/

來源

2012-11-12 10:28:34 Wilf

好吧，我需要儘快學習jquery！感謝這個例子，非常有幫助！ – michoprogrammer

，你可以用jQuery輕鬆地做到這一點：

$('table tr:even').hide(); 
$('#button-id').click(function() 
{ 
    $('table tr:even').show(); 
});

來源

2012-11-12 10:33:41

我不知道jquery ...我很抱歉，但我是一個新手在這些技術..是jQuery的一種JavaScript庫？ – michoprogrammer

@MachoProgrammer是的jQuery是免費使用的JavaScript庫，目前在很多網站上使用非常廣泛。不要覺得有必要使用它，因爲你的需求純粹的JavaScript應該足夠了。 –

顯示/隱藏按鈕javascript

回答

相關問題