Forum PHP.pl > Zmiana rozmiaru komórek w tabeli

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Zmiana rozmiaru komórek w tabeli

Forum PHP.pl > Forum > Po stronie przeglądarki

bok

25.05.2008, 11:18:27

Witam,
Mam taki problem:
Mam taką tabelę:

[HTML] pobierz, plaintext 
<table border="0" width="100%" cellspacing="0" cellpadding="0">
	<tr>
		<td width="30%"> </td>
		<td width="40%"> </td>
		<td width="30%"> </td>
	</tr>
</table>
[HTML] pobierz, plaintext

która jest podzielona na 3 kolumny:
1 ma szerokość 30%
2 ma szerokość 40%
3 ma szerokość 30%

Problem polega na tym że jak można zrobić coś takiego że:
Klikam na jakiś klawisz a komórki w tej tabeli zmienią rozmiar na:
1 będzie miał szerokość 50%
2 będzie miał szerokość 10%
3 będzie miał szerokość 40%

Jak można coś takiego zrobić bez odświeżania strony.

Za jakiekolwiek pomoc/podpowiedź wielkie dzięki z góry.

l0ud

25.05.2008, 11:25:51

Użyj javascriptu na ten wzór:

[HTML] pobierz, plaintext 
<html>
<head>
<script type="text/javascript">
<!--
 
function zmienSzerokosc() {
	document.getElementById('col1').style.width = '50%';
	document.getElementById('col2').style.width = '10%';
	document.getElementById('col3').style.width = '40%';
 
}
 
-->
</script>
</head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="30%" id="col1">Kolumna 1</td>
<td width="40%" id="col2">Kolumna 2</td>
<td width="30%" id="col3">Kolumna 3</td>
</tr>
</table>
<input type="button" onClick="zmienSzerokosc()" value="Zmien szerokosc kolumn">
 
</body>
</html>
[HTML] pobierz, plaintext

koderrr

25.05.2008, 11:39:54

zmieniaj style za pomoca javascriptu

ostatnio robilem komus odnosnie ramek

http://uberalles.lua.pl/

zasada dzialania ta sama

bok

25.05.2008, 11:54:47

Wielki dzięki l0ud dokładnie o to mi chodziło.
Mam jeszcze jedno pytanie jak zrobić coś takiego że mam jeden klawisz kliknięcie w niego za pierwszym razem wykona np. funkcje o nazwie: „zmień”, a jak kliknę w niego za drugim razem to wykona funkcję o nazwie: „przywroc”, a jak za trzecim to znowu „zmień” i tak w kółko.

l0ud

25.05.2008, 12:10:04

do przycisku możesz przypisać tylko jedną funkcję. Najłatwiej jest po prostu dorobić zwykły warunek:

[HTML] pobierz, plaintext 
<html>
<head>
<script type="text/javascript">
<!--
 
function zmienSzerokosc() {
	if (document.getElementById('col1').style.width == '30%') { //zmieniamy
		document.getElementById('col1').style.width = '50%';
		document.getElementById('col2').style.width = '10%';
		document.getElementById('col3').style.width = '40%';
		document.getElementById('przyciskZmiany').value = 'Przywroc szerokosc kolumn'; //można też zmienić napis w 
 
przycisku
	}
	else { //przywracamy
		document.getElementById('col1').style.width = '30%';
		document.getElementById('col2').style.width = '40%';
		document.getElementById('col3').style.width = '30%';
		document.getElementById('przyciskZmiany').value = 'Zmien szerokosc kolumn';
	}
}
 
-->
</script>
</head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="30%" id="col1">Kolumna 1</td>
<td width="40%" id="col2">Kolumna 2</td>
<td width="30%" id="col3">Kolumna 3</td>
</tr>
</table>
<input type="button" id="przyciskZmiany" onClick="zmienSzerokosc()" value="Zmien szerokosc kolumn">
 
</body>
</html>
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.