לשנות רקע של td בJavaScript

[trupix]

שלום,

יש לי טבלה כזו

PHP קוד:

<table>
    <tbody>
        <td>פריט 1</td>
        <td>פריט 2</td>
        <td>פריט 3</td>
        <td>פריט 4</td>
    </tbody>
</table> 


אני רוצה להגיע למצב בו כאשר לוחצים על אחד הפריטים, הרקע שלו משתנה לאדום, והשאר מתאפסים.
העניין הוא כזה, עקב מגבלות מסוימות אני לא יכול להשתמש כאן בJQuery (תוך שניה אני כותב משהו כזה ), אלא רק בJS נטו.

בכל אחד מהtd שלי, הוספתי לאירוע onClick את הפונקציה doAction(); אבל אני מתקשה לכתוב פונקציה שתעשה זאת ביעילות ..

אודה מאוד לעוזרים!

[DoLet]

document.ID.style.background = "red";

או אפשרות יותר דינמית:

function changecolor(string) {
	document.string.style.background = 'red';
}

<tb onclick="changecolor(this)">

:S

[trupix]

אם היה איידי הייתי עובר בלולאה על כולם =! האיידי, אולם זה לא המצב

[DoLet]

נכתב במקור על ידי trupix

אם היה איידי הייתי עובר בלולאה על כולם =! האיידי, אולם זה לא המצב

כתבתי לך קוד חדש.. עם שימוש ב this

בטעות רשמתי tb ולא td ואין צורך בdocument שם טעות שלי.

[trupix]

הגעתי לתוצאה זהה אבל בצורה מסורבלת יותר, כך שיש התקדמות.

שאלה - כשאני לוחץ על td, הרקע מהשתנה. כיצד הוא יודע למי לשנות? הרי אין שם ID..
כי נניח אני לוחץ על אחד מהם, אני צריך לעבור על כל השאר ולהחזיר להם את ערך הbackground למשהו אחר.

[DoLet]

נכתב במקור על ידי trupix

הגעתי לתוצאה זהה אבל בצורה מסורבלת יותר, כך שיש התקדמות.

שאלה - כשאני לוחץ על td, הרקע מהשתנה. כיצד הוא יודע למי לשנות? הרי אין שם ID..
כי נניח אני לוחץ על אחד מהם, אני צריך לעבור על כל השאר ולהחזיר להם את ערך הbackground למשהו אחר.

במקרה הזה במקרה הזה this = לtd שהוא נמצא עליו.
תנסה להסתכל על getElementsByTagName ולנסות אולי להשתמש בו.

[meshuga]

	function doIt(el){
		for(var i=0;i<el.parentNode.parentNode.getElementsByTagName("td").length;i++)
			el.parentNode.parentNode.getElementsByTagName("td")[i].style.background='';
		el.style.background='red';
	}

זה יעבוד על כל השורות בטבלה..כלומר, אם יהיה לך טבלה כזאת:

<table>
	<tr>
	<td onclick="doIt(this);">Col. 1</td>
	<td onclick="doIt(this);">Col. 2</td>
	</tr>
	<tr>
	<td onclick="doIt(this);">Col. 1</td>
	<td onclick="doIt(this);">Col. 2</td>
	</tr>
</table>

אם תרצה להגביל את זה שזה יעבוד בכל שורה בנפרד אז תוריד parentNode אחד.

מעבר לקוד "קומפלט" שהבאתי לך...אני מצפה שתבדוק את הרכיבים כמו parentNode וgetElementsByTagName ולצאת קצת מה"בועה" של JQUERY/MOOTOOLS וכד'..

[IgalSt]

נכתב במקור על ידי meshuga

מעבר לקוד "קומפלט" שהבאתי לך...אני מצפה שתבדוק את הרכיבים כמו parentNode וgetElementsByTagName ולצאת קצת מה"בועה" של JQUERY/MOOTOOLS וכד'..

בנוסף querySelectorAll שאפשר להשתמש בו בסלקטורים, בדומה לאיך שעובדים עם jQuery.
החיסרון הוא שהוא לא נתמך בדפדפנים ישנים (IE7 ומטה)

[AlmogBaku]

PHP קוד:

var tds=document.getElementsByTagName("td");
for (i=0;i<tds.length;i++) {
    tds[i].onclick=function() {
        console.log("event called!");
        this.style.background="red";
    };
} 


[איציק ברבי]

תקשר JQUERY -

PHP קוד:

$("table tbody td").click(function(){
    $(this).css("background-color","red");
});