Teen nettisivua, jonka ulkoasu on yksinkertaistettuna seuraava:
<table>
<tr>
<td>Otsikko</td>
<td rowspan="2">Navigaatio</td>
</tr>
<tr>
<td>Main</td>
</tr>
</table>
Jos navigaatiosta tulee pidempi kuin mainista, selain (Firefox) venyttää otsikkosolua. Sitä en missään nimessä haluaisi, vaan selaimen pitäisi venyttää navigaation mukana main-solua. Voiko rowspan-komentoa muokata niin, että se ottaisikin mukaansa alimman solun ensimmäisen solun sijaan?
Anna otsikko-solulle kiinteä korkeus?
<td style="height: 2em;">Otsikko</td>
Otsikko-solulle on annettu kiinteä korkeus css-tyylitiedostossa, mutta se leviää silti. Yön miettimisen jälkeen tulin siihen tulokseen, että ehkä tätä kannattaisi kokeilla diveillä, ei se ainakaan pahenna tilannetta. Mutta jos joku tietää miten rowspania saa muokkailtua, niin otan neuvot hyvilläni vastaan.
Moikka Danae!
testaa tää purkkaviritys, josko löytyis se mitä haet...
<html><head>
<title>JavaScriptPurkkaViritys</title>
<script language="JavaScript" type="text/javascript">
function rakenna(objekti){
document.getElementById(objekti).innerHTML="<form id='formi1' runat='server'></form>"
document.getElementById('formi1').innerHTML="<table id='taulu1' runat='server' align='center' laskuri='1' border='1' ><tr><th id='th1' rowspan='1'>alue:</th><td>solu</td></tr><td>solu2</td></tr></table><p align='center'><input type='button' align='center' value='Muokkaa' runat='server' onclick='muokkaus()'></p>"
}
function muokkaus(){
elementti = document.getElementById('taulu1');
rspan = parseInt(elementti.getAttribute('laskuri'));
//alert(rspan)
rspan+=1
xstr = " rowspan='" + rspan + "' >alue:"
elementti.setAttribute('laskuri', rspan);
str = document.getElementById('th1').outerHTML.replace(">alue:", xstr)
//alert(str)
document.getElementById('formi1').innerHTML="<table id='taulu1' runat='server' align='center' laskuri='" + rspan + "' border='1' >" + str + "<td>solu</td></tr><td>solu2</td></tr></table><p align='center'><input type='button' align='center' value='Muokkaa' runat='server' onclick='muokkaus()'></p>"
}
</script>
</head>
<body id="runko" onload="rakenna('runko')" runat="server">
</body>
</html>... tai jätä tuo purkka testaamatta ja tee fiksusti ja ota ne divit käyttöön :)
Heippa taas!
testipurkkaa mutta toimii...div tagit teknisesti jotain enemmän..?
<html><head>
<title>JavaSciptPurkkaViritys</title>
<script language="JavaScript" src="purkka.js">
</script></head>
<body id="runko" onload="rakenna('runko')" runat="server">
</body></html>//purkka.js
function rakenna(objekti){
document.getElementById(objekti).innerHTML="<form id='formi1' runat='server'></form>";
document.getElementById('formi1').innerHTML="<table id='taulu1' runat='server' align='center' laskuri='1' border='1' ><th id='otsikko1' rowSpan='1'>Otsikko:</th><td>Navigaatio</td></tr><td>Main</td></tr></table><p align='center'><input type='button' align='center' value='Muokkaa' runat='server' onclick='muokkaus()'></p>";
}
function muokkaus(){
elementti = document.getElementById('taulu1');
rspan = parseInt(elementti.getAttribute('laskuri'));
rspan+=1;
if( document.getElementById('otsikko1').outerHTML.indexOf("rowSpan") == -1 ) {
xstr = " rowSpan=" + rspan + ">Otsikko:"
str = document.getElementById('otsikko1').outerHTML.replace(">Otsikko:", xstr);
}
if( document.getElementById('otsikko1').outerHTML.indexOf("rowSpan") > -1 ) {
xstr = " rowSpan=" + rspan;
xspan = (rspan - 1);
ystr = " rowSpan=" + xspan
str = document.getElementById('otsikko1').outerHTML.replace(ystr, xstr);
}
//alert(str)
var x = 1;
var zstr="";
while (x < rspan){
zstr=zstr + "<tr><td>Extra" + x + "</td></tr>";
x++;
}
elementti.setAttribute('laskuri', rspan);
document.getElementById('formi1').innerHTML="<table id='taulu1' runat='server' align='center' laskuri='" + rspan + "' border='1' >" + str + "<td>Navigaatio</td></tr><td>Main</td></tr>" + zstr + "</table><p align='center'><input type='button' align='center' value='Muokkaa' runat='server' onclick='muokkaus()'></p>"
}Kiitoksia koodista, mutta en halua javascriptiä, sillä käyttäjät voivat estää sen toiminnan. Saatan silti vilkaista tuota, josko sieltä löytyisi muuhun käyttöön jotain hyödyllistä (:
Tein ulkoasun diveillä, ja se toimii nätisti.
Tähän väliin, suosittelen myös sisällön kannalta olennaisempia tageja, esim.
<h1 id="paaotsikko">Otsikko</h1>
<div id="navigaatio">
<h2>Navigaatio</h2>
<ul id="valikko">
<li><a href="">Linkki</a></li>
</ul>
</div>
<div id="sisalto">
<h2>Sisältöä</h2>
<p>Palstoja ja tekstiä.</p>
</div>Eli käyttää divejä vain silloin kun muuta ei ole käytettävissä ja muutoin käyttää sisältöä paremmin kuvaavia rakennuspalikoita :) Ehkä hieman enemmän tyyliteltävää nollauksien muodossa, mutta paljon siistimpää ja luettavampaa koodia.
Aihe on jo aika vanha, joten et voi enää vastata siihen.