Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: JS: Taulukon solujen merkkaus maalaamalla

Turso [03.11.2010 11:46:26]

#

Mulla oli visio; haluan merkitä taulukon soluja värillä, joutumatta klikkaamaan jokaista solua erikseen, eli ns. maalaamalla hiirellä. Tämä ei liene kuitenkaan mahdollista javascriptillä? Onmousedown eventin pitää alkaa jokaisessa solussa...

Grez [03.11.2010 13:08:58]

#

En ymmärrä miksi se ei olisi mahdollista Javascriptillä.

Itse asiassa nähdäkseni taulun solujen maalaaminen onnistuu ilman riviäkään koodia.

Smuliii [03.11.2010 13:34:32]

#

Jotain tämäntapaista: http://css-tricks.com/drawing-table/ ?

Turso [03.11.2010 13:35:43]

#

Tarkoitan nyt nimenomaan style.backgroundColor-attribuutin käyttöä.
Edit: Tarkennus käyttäjälle Grez

Merri [03.11.2010 17:05:15]

#

JavaScriptistä kannattaa muistaa kupliminen! Kun onMouseDown alkaa td-elementissä, niin ilman kuplimisen estämistä onMouseDown siirtyy tr-elementille, siitä tbody-elementille, siitä table-elementille jne. ja lakkaa vasta kun päästään pohjalla olevaan html-elementtiin.

Tämä tarkoittaa sitä, että saat kyllä tiedon halutessasi kulkeutumaan elementistä toiselle ja tiedät vetoa tehdessä, että se on se sama veto edelleen.

Metabolix [03.11.2010 17:21:36]

#

Tyypillinen ratkaisu toimii näin:

maalaus.js:

var maalatut = null;

function onmousedown(td) {
	maalatut = [];
	onmouseover(td);
}

function onmouseover(td) {
	if (maalatut !== null) {
		// Ei maalata samaa moneen kertaan.
		for (var i = 0; i < maalatut.length; ++i) {
			if (maalatut[i] == td) {
				return;
			}
		}
		merkitse(td);
		maalatut.push(td);
	}
}

function onmouseup() {
	if (maalatut !== null) {
		if (maalatut.length) {
			kasittele(maalatut);
		}
		maalatut = null;
	}
}

function merkitse(td) {
	td.style.backgroundColor = "#f90";
}

function kasittele(maalatut) {
	for (var i = 0; i < maalatut.length; ++i) {
		var td = maalatut[i];
		td.style.backgroundColor = "#090";
	}
}

testi.js:

function onmousedown_cb(e) {
	onmousedown(this);
	return false;
}
function onmouseover_cb(e) {
	onmouseover(this);
	return false;
}
function return_false() {
	return false;
}
window.onload = function() {
	var str = "<table><tbody>";
	for (var i = 0; i < 10; ++i) {
		str += "<tr>";
		for (var j = 0; j < 10; ++j) {
			str += "<td>(" + j + ", " + i + ")</td>";
		}
		str += "</tr>";
	}
	str += "</tbody></table>";
	document.body.innerHTML = str;

	document.body.onselectstart = document.body.onmousedown = function() {
		return false;
	};
	document.body.onmouseup = function() {
		onmouseup();
	};

	var arr = document.getElementsByTagName("td");
	for (var i = 0; i < arr.length; ++i) {
		arr[i].onmousedown = onmousedown_cb;
		arr[i].onmouseover = onmouseover_cb;
	}
};

testi.html:

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="maalaus.js"></script>
	<script type="text/javascript" src="testi.js"></script>
</head>
<body></body>
</html>

Turso [04.11.2010 09:31:34]

#

Sain toimimaan, kiitos avusta!

Smuliiin linkkaaman esimerkin anti oli hoksata tarkkailla kolmea hiirieventtiä, kuten Metabolix omassa ratkaisussaan. Oma ratkaisuni on erilainen, mutta idea jotakuinkin sama.

Tämän jälkeen ongelman muodosti ikävästi solujen sisällön (teksti) värjäytyminen, kuten aina hiirellä valittaessa. Tähän puolestaan auttoi Metabolixin viestistä löytynyt

document.body.onselectstart = document.body.onmousedown = function() {
        return false;
    };

joka toimi sellaisenaan ratkaisten tämän ogelman.

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta