गतिशील रूप से HTML तालिका के सेल को संपादित करना

मेरे पास एक JSON फ़ाइल है और मैंने इसे डेटा निकाला है और इसे HTML टेबल में प्रदर्शित किया है।

60 टेबल हैं, प्रत्येक में 3 कोशिकाएं हैं और प्रत्येक सेल में कुछ मूल्य है।

अब मैं संख्याओं की बजाय कोशिकाओं में रंग प्रदर्शित करना चाहता हूं। तो मान लीजिए कि संख्या 2 9 673.4 है, तो उस सेल के उस 2 9% तक उस विशेष सेल को ग्रीन रंग से भरना चाहिए, और शेष 71% सेल सफेद रंग के साथ छोड़ा जाना चाहिए, यदि संख्या 90881.13333 है तो इसे विशेष रूप से भरना चाहिए उस सेल के 90% तक हरे रंग के रंग के साथ सेल।

यह मुझे स्क्रीनशॉट जोड़ने की इजाजत नहीं दे रहा है क्योंकि मैं स्टैक ओवरफ़्लो में नया हूं और इसमें 10 प्रतिष्ठा नहीं हैं।

मुझे उम्मीद है कि आप मेरे प्रश्न को समझ चुके हैं।

3
"यह मुझे स्क्रीनशॉट जोड़ने की इजाजत नहीं दे रहा है क्योंकि मैं स्टैक ओवरफ़्लो में नया हूं और इसमें 10 प्रतिष्ठा नहीं हैं।" एक लिंक पोस्ट करें।
जोड़ा लेखक j08691, स्रोत
यह मेरे स्थानीय कंप्यूटर पर है इसलिए मैं एक लिंक पोस्ट नहीं कर सकता, मेरे पास इस समय लाइव साइट तक पहुंच नहीं है।
जोड़ा लेखक user2798227, स्रोत
जेएसओएन फ़ाइल में 60 मेजबान हैं और प्रत्येक में 3 जीपीयू हैं, इसलिए प्रत्येक में 3 कोशिकाओं के साथ 60 टेबल हैं।
जोड़ा लेखक user2798227, स्रोत
60 टेबल और 3 कोशिकाएं प्रत्येक? मुझे लगता है कि आप पीछे कुछ कर रहे हैं।
जोड़ा लेखक Blazemonger, स्रोत

1 उत्तर

यदि आप एक ही तालिका कक्ष में दो अलग-अलग रंगों का उपयोग करना चाहते हैं, तो एक सीएसएस ग्रेडियेंट असाइन करने का प्रयास करें।

background: linear-gradient(to bottom, #ffffff 71%, #50aa50 72%); 
/* very little transition with 1% difference */

आप एक jQuery फ़ंक्शन लिख सकते हैं जो इन कक्षों को स्वचालित रूप से रंग देगा:

$('selector').each(function() {
    var v = 100 - ($(this).text()/1000);//since we're coloring top-to-bottom
    $(this).css('background','linear-gradient(to bottom ,#ffffff '+v+'%, #50aa50 '+(v+1)+'%)');
});

( jQuery के वर्तमान संस्करणों को इस विशेषता के लिए ब्राउज़र उपसर्ग को संभालना चाहिए , जब आवश्यक हो।)

http://jsfiddle.net/mblase75/NQCF8/

5
जोड़ा
नहीं मेरे पास एक JSON फ़ाइल है और यह हर बार अलग-अलग मान देता है। मैं चाहता हूं कि यदि मूल्य 2 9 000 है तो सेल लंबवत रूप से 29% भरना होगा।
जोड़ा लेखक user2798227, स्रोत
कोड के लिए धन्यवाद, मैं इसे अपने कोड में उपयोग करने की कोशिश कर रहा हूं और देख रहा हूं कि यह काम करता है या नहीं।
जोड़ा लेखक user2798227, स्रोत
यह वास्तव में वास्तव में सहायक था। यह साइट वास्तव में काम करती है, मैं इसे 1 सप्ताह के लिए समझने की कोशिश कर रहा था। मैं आपके जवाब को वोट देना चाहता हूं लेकिन वे नहीं कह सकते कि मुझे 15 प्रतिष्ठा की जरूरत है।
जोड़ा लेखक user2798227, स्रोत
अद्यतन उत्तर
जोड़ा लेखक Blazemonger, स्रोत