Ho un tavolo che elenca le merci in un negozio di chitarre - ogni riga contiene un pezzo di mercanzia. Ogni riga (e ogni pezzo di merce) è New, Used o su Consignment. Mi piacerebbe che un utente fosse in grado di fare clic su un collegamento in una barra laterale UL (facendo clic su Nuovo, Usato o Contro) e che restassero visibili solo le righe della tabella di quella condizione corrispondente. Quindi, se un utente fa clic su "Utilizzato", tutte le righe Nuovo e Contro diventano nascoste.Mostrare/nascondere le righe di tabella con Javascript - può fare con ID - come fare con Class?
Ho fatto questo lavoro con un semplice JavaScript, ma usa getElementByID che non funzionerà per me perché ho bisogno di identificare i TR con le classi. Ecco, questo è il punto in cui mi perdo. Non sono sicuro di come farlo funzionare con le lezioni.
Ecco la soluzione che ho lavorato finora:
<html>
<head>
<script>
function used() {
document.getElementById("new").style.display = 'none';
document.getElementById("cons").style.display = 'none';
document.getElementById("used").style.display = '';
}
function news() {
document.getElementByClass("new").style.display = '';
document.getElementById("cons").style.display = 'none';
document.getElementById("used").style.display = 'none';
}
function cons() {
document.getElementByClass("new").style.display = 'none';
document.getElementById("cons").style.display = '';
document.getElementById("used").style.display = 'none';
}
</script>
</head>
<body>
<span onClick="used();">Used</span><br />
<span onClick="news();">New</span><br />
<span onClick="cons();">Cons</span><br /><br />
<table border="1">
<tr id="used">
<td>Used</td>
</tr>
<tr id="new">
<td>New</td>
</tr>
<tr id="cons">
<td>Cons</td>
</tr>
</table>
</body>
</html>
Il codice sopra funziona bene, e se potessi farlo funzionare con le classi invece avrebbe risolto il mio bisogno immediato. Tuttavia, in ultima analisi, mi piacerebbe ridimensionarlo per utilizzarlo anche per i marchi, in modo che un utente possa fare clic su un marchio e visualizzare solo i post di quella marca. In quella situazione potrei avere 20 o 30 marche nella tabella, quindi quanto sopra non sarebbe l'ideale. Anche questo alla fine vivrà in un sito Wordpress, e idealmente sto creando le classi per ogni marchio da metadati in wordpress e creando similmente un UL dinamico contenente i marchi che attivano la tabella, oltre ad avere una soluzione js che può funzionare con un set di variabili in continua evoluzione! Quindi so che quello che ho sopra non è l'approccio migliore, ma è l'unico che conosco abbastanza per provare in questo momento.
L'aiuto di cui sopra sarebbe molto apprezzato, così come consigli su come potrei farlo in modo più efficace mentre mi avvicino all'aspetto Marchi più impegnativo.
EDIT:
Google mi ha aiutato, e ho una nuova direzione - questo potrebbe risolvere il mio problema:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
</style>
</head>
<body>
<ul class="side-nav">
<li><a class="cond" href="#">Show all</a></li>
<li><a class="used" href="#">Used</a></li>
<li><a class="new" href="#">New</a></li>
<li><a class="cons" href="#">Cons</a></li>
</ul>
<table>
<tr class="cond used">
<td>A Used Item</td>
<td>Used.</td>
</tr>
<tr class="cond new">
<td>A New Item</td>
<td>New</td>
</tr>
<tr class="cond cons">
<td>A Cons Item</td>
<td>Cons</td>
</tr>
</table>
<script>
$(function()
{
$('ul.side-nav a').click(function()
{
$('tr.cond').hide();
$('tr.' + $(this).attr('class')).show();
});
});
</script>
</body>
</html>
Mi consiglia di utilizzare jQuery invece del semplice Javascript, tuttavia controllare la mia risposta per la pianura javascript soluzione. – OneOfOne