Nie wiem jak działa wspomniana wtyczka, ale ja bym to zrobił tak:
Wyświetlasz rozwijane pole z nazwami tabel (rozwijana lista jest standardowym elementem formularza).
Potem wyświetlasz wszystkie tabele, każdą w osobnym divie i do każdego diva, poza jednym, przypisujesz klasę css która sprawia że div jest niewidoczny. Niech klasa nazywa się „nie_widac”.
Za użyciem jquery piszesz skrypt, który wykonuję kod, za każdym razem jak zmieni się wartość na liście (zdarzenie onchange).
Kod przypisuje wszystkim divom klasę „nie_widac”, sprawdza która opcja jest wybrana na liście i w zależności od opcji usuwa klasę z odpowiedniego diva.
Tym sposobem po wybraniu opcji, pokazuje się odpowiednia tabela.
Jak chcesz to mogę Ci napisać przykładowy kod.
Jeżeli możesz to bardzo proszę o podanie przykładu. z jquery nie miałem prawie wcale styczności więc nie wiem na jakiej zasadzie to ma działać i jak napisać taki skrypt.
z góry dzięki
Wyglądałoby to mniej więcej tak:
<select name="nazwa" id="nazwa">
<option value="t1" selected="selected">Tabela pierwsza</option>
<option value="t2">Tabela druga</option>
</select>
<div id="tabela1">
...tu tabela 1
</div>
<div id="tabela2" class="nie_widac">
...tu tabela 2
</div>
<script type="text/javascript">
$('#nazwa').change(function() {
var wartosc = $(this).val();
if(wartosc=="t1")
{
$('#tabela1').removeClass('nie_widac');
$('#tabela2').addClass('nie_widac');
}
else if(wartosc=="t2")
{
$('tabela1').addClass('nie_widac');
$('tabela2').removeClass('nie_widac');
}
});
</script>
Trzeba jeszcze zdefiniować klasę „nie_widac” w pliku css:
.nie_widac{
display: none;
}
Aha, trzeba jeszcze zaimportować jquery, przed skryptem. Najlepiej w nagłówku strony.
Oki próbuje jakoś wstawić to i zmodyfikować, ale po wybraniu innej tabeli niestety brak jakiejkolwiek reakcji skryptu…
„Aha, trzeba jeszcze zaimportować jquery, przed skryptem. Najlepiej w nagłówku strony. ” – w jaki sposób?
Oto aktualny kod na stronie:
<select name="nazwa" id="nazwa">
<option value="t1" selected="selected">Premier League</option>
<option value="t2">Ekstraklasa</option>
<option value="t3">Bundesliga</option>
<option value="t4">Primera Division</option>
<option value="t5">Ligue 1</option>
<option value="t6">Serie A</option>
</select>
<div id="tabela1">
[table id=2 /]
</div>
<div id="tabela2" class="nie_widac">
[table id=1 /]
</div>
<div id="tabela3" class="nie_widac">
[table id=3 /]
</div>
<div id="tabela4" class="nie_widac">
[table id=4 /]
</div>
<div id="tabela5" class="nie_widac">
[table id=5 /]
</div>
<div id="tabela6" class="nie_widac">
[table id=6 /]
</div>
<script type="text/javascript">
$('#nazwa').change(function() {
var wartosc = $(this).val();
if(wartosc=="t1")
{
$('#tabela1').removeClass('nie_widac');
$('#tabela2').addClass('nie_widac');
$('#tabela3').addClass('nie_widac');
$('#tabela4').addClass('nie_widac');
$('#tabela5').addClass('nie_widac');
$('#tabela6').addClass('nie_widac');
}
else if(wartosc=="t2")
{
$('tabela1').addClass('nie_widac');
$('tabela2').removeClass('nie_widac');
$('tabela3').addClass('nie_widac');
$('tabela4').addClass('nie_widac');
$('tabela5').addClass('nie_widac');
$('tabela6').addClass('nie_widac');
}
else if(wartosc=="t3")
{
$('tabela1').addClass('nie_widac');
$('tabela2').addClass('nie_widac');
$('tabela3').removeClass(nie_widac');
$('tabela4').addClass('nie_widac');
$('tabela5').addClass('nie_widac');
$('tabela6').addClass('nie_widac');
}
else if(wartosc=="t4")
{
$('tabela1').addClass('nie_widac');
$('tabela2').addClass('nie_widac');
$('tabela3').addClass(nie_widac');
$('tabela4').removeClass('nie_widac');
$('tabela5').addClass('nie_widac');
$('tabela6').addClass('nie_widac');
}
else if(wartosc=="t5")
{
$('tabela1').addClass('nie_widac');
$('tabela2').addClass('nie_widac');
$('tabela3').addClass(nie_widac');
$('tabela4').addClass('nie_widac');
$('tabela5').removeClass('nie_widac');
$('tabela6').addClass('nie_widac');
}
else if(wartosc=="t6")
{
$('tabela1').addClass('nie_widac');
$('tabela2').addClass('nie_widac');
$('tabela3').addClass(nie_widac');
$('tabela4').addClass('nie_widac');
$('tabela5').addClass('nie_widac');
$('tabela6').removeClass('nie_widac');
}
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=3.3.2"/>
Powyższa linijka musi być wstawiona przed skryptem obsługującym tabelki.
Rozumiem, że kod z tabelkami (divy, skrypt…) wstawiasz w pliku php, a nie w polu gdzie edytuje się treść wpisu. Jak wstawisz w polu edycji, to raczej nie będzie działać.
W pliku php, aby shortcode od tabelki zadziałał musisz użyć odpowiedniej funkcji:
do_shortcode('[table id=2 /]');
