On tarve tehdä nettisivulle taulukko 5 x 5, jossa lasketaan ainemenekki määrätyillä esimerkkitapauksilla.
Vasen pystysarake sisältää tuotteet (AINE, aine1, aine2, aine3, aine4).
Ylin vaakasarake sisältää otsikkoina neliömäärät eli jokaisella tuotteella on samat vaihtoehdot (esim. AINE, 1m2, 3m2, 12m2, 25m2).
Taulukon käyttäjä täyttää taulukkoon haluamansä määrän kuhunkin soluun, esim solussa aine2/12m2 voi olla arvo 7 ja jossakin muussa solussa jokin toinen arvo. Suurimmassa osassa soluja ei ole mitään.
Ei välttämättä tarvi olla myöskään aito taulukko vaan voi olla erilliset kentät taulukon näköisessä muodossa.
Jokaisella solulla on erilainen kerroin, joka voi olla kovakoodattu (asteikko ei ole lineaarinen).
Koko taulukosta lasketaan erilliseen kenttään kokonaistarve, joka on summa kussakin solussa oleva lukumäärä kertaa solun kerroin. Laskenta joko automaattisesti tai painikkeella. Käytännössä kokonaistarpeeseen lisätään 300 ja summasta otetaan neliöjuuri (saadaan alaa vastaavan neliön sivun pituus).
Ei tarvitse olla erityisen kaunista jälkeä.
Löytämäni esimerkit koskevat laskentaa yhdessä sarakkeessa, mutta tällaista ei ole löytynyt. Mielellään esim js tai php-toteutus, vaikka html saattaa myös toimia?
Jos ei ihan valmista toteutusta saa, niin ainakin vinkkejä otetaan mielihyvin vastaan.
<!DOCTYPE html>
<meta charset="UTF-8">
<table>
<tr><th>Aine</th><th>1 m²</th><th>3 m²</th><th>12 m²</th><th>25 m²</th></tr>
<tr>
<td>Aine 1</td>
<td data-laskusolu-kerroin="1"></td>
<td data-laskusolu-kerroin="3"></td>
<td data-laskusolu-kerroin="12"></td>
<td data-laskusolu-kerroin="25"></td>
</tr>
<tr>
<td>Aine 2</td>
<td data-laskusolu-kerroin="1.2"></td>
<td data-laskusolu-kerroin="3.7"></td>
<td data-laskusolu-kerroin="12.5"></td>
<td data-laskusolu-kerroin="25.1"></td>
</tr>
</table>
<p>Summat kertoimilla: <span id="tulos1">(jos näet tämän, JavaScript ei toimi!)</span></p>
<p>+ 300 ja neliöjuuri: <span id="tulos2">(jos näet tämän, JavaScript ei toimi!)</span></p>
<script>
(function() {
var solut = document.querySelectorAll("td[data-laskusolu-kerroin]")
function laske() {
var tulos = 0
for (var i = 0; i < solut.length; ++i) {
var a = parseFloat(solut[i].firstChild.value.replace(/,/g, "."))
var b = parseFloat(solut[i].dataset.laskusoluKerroin)
if (a && b) {
tulos += a * b
}
}
var tulos2 = Math.sqrt(tulos + 300)
document.getElementById("tulos1").textContent = Math.round(tulos * 100) / 100
document.getElementById("tulos2").textContent = Math.round(tulos2 * 100) / 100
}
function valitse() {
this.select()
}
var newInput = "<input type='text' pattern='[0-9]*[.,]?[0-9]*' size='4' value='0'>"
for (var i = 0; i < solut.length; ++i) {
solut[i].innerHTML = newInput
solut[i].title = "kerroin: " + solut[i].dataset.laskusoluKerroin
solut[i].firstChild.addEventListener("focus", valitse)
solut[i].firstChild.addEventListener("input", laske)
}
laske()
}())
</script>No jopas, tämä oli kuin apteekin hyllyltä, juuri sitä mitä hain! Tästä eteenpäin homma hoituukin, joten kiitoksia. Valmis tuote menee extranettiin, joten ei ole nähtävissä. Ainoa huono puoli on, että kertoimet ovat aivan avoimesti nähtävissä. Tietty ne saa joka tapauksessa kokeilemallakin selville, jos vain viitsii kokeilla ja kirjailla.
Etsin noin vuosi sitten ratkaisua sivustolle upotetusta excel-taulukosta, mutta se ei noin vain onnistukaan.
Kertoimet näkyvät title-ominaisuuden kautta, joten voit poistaa kyseisen rivin, jos haluat. Kuten itse totesit, täydellinen piilotus ei ole mahdollinen, koska viimeistään kokeilemalla ne saa selville kuitenkin.
Aihe on jo aika vanha, joten et voi enää vastata siihen.