एक HTML तालिका में जावास्क्रिप्ट गणना

Question

मैं जावास्क्रिप्ट के लिए बहुत नया हूं, इसलिए मुझे यह भी पता नहीं है कि यह कोशिश करने के लिए सही भाषा है, लेकिन मुझे लगा कि मैं कोशिश करूंगा। मैंने कई अन्य पोस्ट पढ़ी हैं और मुझे कुछ ऐसा नहीं मिल रहा है जो वास्तव में मुझे यह कैसे करना है इस बारे में एक विचार दे रहा है, इसलिए मैं यहां पूछ रहा हूं। उपयोगकर्ता द्वारा इनपुट किए गए नंबरों और/या चयनों के साथ सभी सौदे के माध्यम से मैंने जो उदाहरण पढ़े हैं। लेकिन, मैं गणना के एक स्थिर तरीके के लिए जा रहा हूँ। मैं HTML में तालिका में जानकारी में इनपुट करता हूं और जावास्क्रिप्ट जानकारी की गणना करता है और तालिका में किसी सेल को जानकारी आउटपुट करता है। यहाँ कोड मैं तालिका अब तक के लिए है कि (मैं जानता हूँ कि यह वास्तव में यह कोड करने के लिए सबसे अच्छा तरीका नहीं है, मैं उस पर काम कर रहा हूँ, मैं सिर्फ इस बाधा के पार आया था):

<table> 
<tr><td><font size="2"><strong>Retail Price:</strong></font></td> 
<td name = "retailPrice" id="retailPrice"><font size="2"><del>$97.97</del></font></td></tr> 

<tr><td><font size="2"><strong>Sale Price:</strong></font></td> 
<td><font size="2"><del>$89.97</del></font></td></tr> 

<tr><td><font size="3"><strong>Our Price:</strong></font></td> 
<td name = "ourPrice" id="ourPrice"><font size="3" color="Red">$79.97</font></td></tr> 
<tr><td><font size="2"><strong>You Save:</strong></font></td> 
<td name = "yourSavings"><font font size="2" color="Red"></font></td></tr></table> 

और यहाँ है केवल जावास्क्रिप्ट है कि मैं एक साथ रखा करने के लिए लगता है कि कर सकते हैं:

<script type="text/javascript" > 
$(function(){ 
var add = parseInt($("#retailPrice").val()) + parseInt($("#ourPrice").val()); 
$("yourSavings").html(add); 
}).keyup(); 
</script> 

मुझे पता है कि मैं शायद वास्तव में गलत हूं, लेकिन मैंने सोचा कि मैं मदद के लिए पूछ से पहले काम करने के लिए कुछ प्राप्त करने की कोशिश होगी। असल में मुझे "हमाराप्रिस" सेल में मूल्यों को लेने के लिए स्क्रिप्ट की आवश्यकता है और सेल "रिटेलप्रिस" में मूल्य से विभाजित करें, फिर प्रतिशत को सहेजने के लिए "1" से कुल घटाएं और उसके बाद "yourSavings" नामक सेल पर आउटपुट करें "। मुझे उम्मीद है कि इसका कोई अर्थ है। तो मूल रूप से यह इस तरह काम करता है:

(1-(ourPrice/retailPrice)) 

किसी भी मदद की बहुत सराहना की जाती है।

Answer 1

val विधि प्रपत्र तत्वों के लिए है, तो आप text उपयोग करने के लिए अपनी मेज कोशिकाओं से कच्चे पाठ निकालना चाहते हैं तो फिर आप यह कुछ है कि नंबर पारसर्स गैर-संख्यात्मक उपसर्ग सामान निकाल कर समझ जाएगा में बदलने के लिए है:।

function money_to_number(raw) { 
    return parseFloat(raw.replace(/.*\$/, '')); 
} 

इसके अलावा

ध्यान दें कि आप ०१२३२१२०९५४२ चाहते parseInt के बजायक्योंकि आप गैर-पूर्णांक मानों से निपट रहे हैं। और आप बचत प्राप्त करने के लिए, घटा नहीं सकते हैं, जोड़ना चाहते हैं।

तुम भी सेल आपके द्वारा लक्षित, चयनकर्ता का उपयोग कर रहे पर एक id की आवश्यकता होगी एक <yourSavings> तत्व की तलाश में है और ऐसी कोई बात है:

<td name = "yourSavings" id="yourSavings"> 
    <font font size="2" color="Red"> 
    </font> 
</td> 

और तुम हूँ

function money_to_number(raw) { 
    return parseFloat(raw.replace(/.*\$/, '')); 
} 

var retail = money_to_number($('#retailPrice').text()); 
var ours = money_to_number($('#ourPrice').text()); 
var savings = retail - ours; 
$("#yourSavings font").html(savings); 

: तो, अपने अंतिम जावास्क्रिप्ट कुछ इस तरह देखना चाहिए

$("#yourSavings font").html(savings); 

: <font> कि अंदर का चयन करना चाहते

savings स्वरूपण और इसे प्रतिशत में परिवर्तित करने के लिए पाठक के लिए एक अभ्यास के रूप में छोड़ा गया है।

और एक जीवित उदाहरण: http://jsfiddle.net/ambiguous/bn7Wg/

Answer 2

लगता है जैसे आप एक्सेल को HTML और जावास्क्रिप्ट के रूप में लिखने की कोशिश कर रहे हैं जो ब्राउज़र में चलता है।

मुझे लगता है कि jQuery सीखने लायक होगा। यह जॉन रेसिग द्वारा डोम में हेरफेर करने के लिए एक जावास्क्रिप्ट ढांचा है। यह किसी व्यक्ति द्वारा लिखे गए सॉफ़्टवेयर के सर्वोत्तम टुकड़ों में से एक है, और इसका उपयोग आज सभी वेब डेवलपर्स द्वारा किया जाता है।

Answer 3

मैं अपने मूल कोड को कुछ संशोधनों है, लेकिन यह कोशिश करना पड़ा (मैं स्वरूपण और $ संकेत बाहर ले काम करने के लिए गणित पाने के लिए:

<table> 
<tr><td><font size="2"><strong>Retail Price:</strong></font></td> 
<td name="retailPrice" id="retailPrice">97.97</td></tr> 

<tr><td><font size="2"><strong>Sale Price:</strong></font></td> 
<td><font size="2"><del>$89.97</del></font></td></tr> 

<tr><td><font size="3"><strong>Our Price:</strong></font></td> 
<td name = "ourPrice" id="ourPrice"><font size="3" color="Red">79.97</font></td></tr> 
<tr><td><font size="2"><strong>You Save:</strong></font></td> 
<td name ="yourSavings" id="yourSavings"></td></tr> 
</table> 


var rp = $("#retailPrice").text(); 
var op = $("#ourPrice").text(); 
var add = parseFloat(rp) - parseFloat(op);  

$("#yourSavings").html(add); 

Answer 4

तो यह लगता है कि आप एक अच्छी शुरुआत की है। जिस चीज की आपको सबसे अधिक आवश्यकता है वह कोशिकाओं से संख्यात्मक मूल्य प्राप्त करने के लिए एक सतत और विश्वसनीय तरीका है। विचार की इस ट्रेन में मैं निश्चित रूप से प्रोत्साहित करता हूं कि लीगेसी एचटीएमएल स्टाइल की मात्रा को कम करना है जो आप इनलाइन कर रहे हैं। <font> टैग और जैसे प्रस्तुति को दस्तावेज़ संरचना में बहुत करीब से बांधना है, जिससे डेटा/दृश्य संबंध बनाने और बनाए रखने में मुश्किल हो रही है।

तो चलो कोड एक छोटे से साफ करते हैं और अगर हम एक स्पष्ट तस्वीर देखें:

<style> 
    .title { 
    font-size : 100%; 
    font-weight : bold; 
    } 
    .big { 
    font-size : 120%; 
    } 
    .sale { 
    text-decoration : line-through; 
    } 
    .our { 
    color : red; 
    } 
    .savings { 
    color : red; 
    } 
</style> 
<table> 
    <tr> 
    <td class="title">Retail Price:</td> 
    <td class="price retail" id="retailPrice">$97.97</td> 
    </tr> 
    <tr> 
    <td class="title">Sale Price:</td> 
    <td class="price sale" id="salePrice">$89.97</td> 
    </tr> 
    <tr> 
    <td class="big title">Our Price:</td> 
    <td class="price our big" id="ourPrice">$79.97</td> 
    </tr> 
    <tr> 
    <td class="title">You Save:</td> 
    <td class="savings" id="yourSavings"></td> 
    </tr> 
</table> 

अहा, अब हम एक स्पष्ट दस्तावेज़ संरचना और एक अच्छा साफ रास्ता हमारे HTML से हमारे शैलियों को अलग करने के लिए है। जिस तरह के इस बाहर के साथ हम डेटा और व्यवहार पर ध्यान केंद्रित कर सकते हैं:

(function(){ 
// put all your JavaScript in a closure so you don't pollute the global namespace 
    function extract_float_from_price (price) { 
    return parseFloat(price.replace(/\$/,'')); 
    } 

    function evaluate_savings () { 
    var retail = extract_float_from_price($('#retailPrice').text()), 
     ours = extract_float_from_price($('#ourPrice').text()); 
    $('#yourSavings').text(parseInt((1 - (ours/retail)) * 100) + '%'); 
    } 

    $(evaluate_savings); // binds to Dom Ready 
})() 

http://jsfiddle.net/wd66b/ ऊपर कोड की एक काम उदाहरण में शामिल है।