הוסטס - פורום אחסון האתרים הגדול בישראל

עמוד 1 מתוך 2

הצג 40 הודעות באשכול על דף אחד

הוסטס - פורום אחסון האתרים הגדול בישראל (https://hosts.co.il/forums/index.php)

- פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)

- - לשנות רקע של td בJavaScript (https://hosts.co.il/forums/showthread.php?t=98717)

trupix

19-07-12 17:13

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

שלום,

יש לי טבלה כזו

PHP קוד:


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

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

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

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

DoLet

19-07-12 17:18

HTML קוד:

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

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

HTML קוד:



function changecolor(string) {

        document.string.style.background = 'red';

}



<tb onclick="changecolor(this)">

trupix

19-07-12 17:23

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

DoLet

19-07-12 17:26

ציטוט:

נכתב במקור על ידי trupix (פרסם 851551)

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

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

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

trupix

19-07-12 17:32

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

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

DoLet

19-07-12 17:38

ציטוט:

נכתב במקור על ידי trupix (פרסם 851554)

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

meshuga

21-07-12 01:27

קוד:

        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

21-07-12 11:12

ציטוט:

נכתב במקור על ידי meshuga (פרסם 851724)

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

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

AlmogBaku

27-07-12 15:28

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";
    };
}

איציק ברבי

27-07-12 15:59

תקשר JQUERY -

PHP קוד:


		
			
$("table tbody td").click(function(){

    $(this).css("background-color","red");

});

כל הזמנים הם GMT +2. הזמן כעת הוא 16:01.

עמוד 1 מתוך 2

הצג 40 הודעות באשכול על דף אחד