اذهب إلى المحتوى
  • 0

كيفية تنسيق المظهر بالاعتماد على البيانات في جافاسكربت

عبدالله غازي

السؤال

عندي مشكله ما لقيت لها حل صراحه وهو انه عندي JSON وحاب اغير لون ال background color للكلمه نفس ماهو موضح في الصوره قدرت اوصل لمطلوب بالكود الموجود وسوف احط له تعليق ولكن ما عرفت اغير لونه ال background color 

هذا هو المطلوب اريد نفس الجدول الي في الصوره هذي :

6288091564432_ScreenShot2022-05-21at1_31_20AM.thumb.png.172a419d2d2c8cf976a4ec4bd0a1ceca.png

اريد ال background نفس هذا الشكل وانا كودي هذا :

var coffees=[
    {"name":"Cappuccino","caffeine":173,"decafe":false},
    {"name":"Turkish Coffee","caffeine":300,"decafe":false},
    {"name":"Instant Sting","caffeine":101,"decafe":true},
    {"name":"Karak Coffee","caffeine":380,"decafe":false},
    {"name":"Defanged Nescafe","caffeine":10,"decafe":true},
    {"name":"Coffee Al Arabic","caffeine":257,"decafe":false},    
]


function    printData()
{
    let body = "";
    for(let index in coffees)
    {
        let item = coffees[index];
        let num = 1;
        if (item["decafe"] == true)
        {
            item["decafe"] = "&#128077";
        }
        else
            item["decafe"] = ""
        if (item["caffeine"] >= 250) // هذا هو الكود المقصود 
            item["name"] = backgroundColor = 'red'
        body +=
        `
        <tr>
            <th scope="row">${++index}</th>
            <td>${item["decafe"]}</td>
            <td>${item["name"]}</td>
            <td>${item["caffeine"]}</td>
        <tr>
        `;
    }
    $("#coffees").html(body);
}

وال output لكودي هو هذا : 

انا اريد مكان كلمه red ان. تظهر الكلمه التي موجوده في ال object ولكن ال backgroud color يمون اسود او احمر 

هذا ملف المشروع وشكرا اتمنى الرد في اسرع وقت ممكن

Code_C.zip

Screen Shot 2022-05-21 at 1.29.39 AM.png

Screen Shot 2022-05-21 at 1.31.39 AM.png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

يرجى استخراج وإرفاق الشيفرة الموضحة في الصورة بشكل نصي ضمن نص السؤال حتى نستطيع المساعدة

يمكنك بهذه الحالة إضافة التنسيق مباشرةً ضمن نص HTML في أثناء بناءه اعتمادًا على الشرط، وبالاستفادة من الخاصية style كالتالي:

// 1 - نحذف الشيفرة السابقة

//if (item["caffeine"] >= 250)
//  item["name"] = backgroundColor = 'red'


// 2 - نضع شرط التنسيق والتنسيق ضمن العنصر
body +=
  `
<tr>
<th scope="row">${++index}</th>
<td>${item["decafe"]}</td>
<td ${item["caffeine"] >= 250 ? 'style="background-color: red"' : ''} >${item["name"]}</td>
<td>${item["caffeine"]}</td>
<tr>
`;

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...