Size Chart that can convert IN to CM
Question
I'm a beginner and I'd like to create a size chart table that can convert it's metric. Ie. The table data has values in "inches" I would like it to convert to "centimetres" when a button is pressed. Some of the table data's inner html is written like " 1 - 2" ". I'd like both the numbers to be converted cm values, while keeping the "-" in between. The table data should also be able to convert back to it's original metric.
This is how far I got. I wasn't able to figure out how to convert the numbers.
https://jsfiddle.net/zajwgp5r/
$(document).on('click', ' #change', function(e) { if ($('#converted').is(':checked')) { $('#data td').html($('#data td').html().replaceAll('"', 'cm')); $('#change').html('Display in inches'); $('#converted').prop('checked', false); alert("converting to cm"); } else { $('#data td').html($('#data td').html().replaceAll('cm', '"')); $('#converted').prop('checked', true); $('#change').html('Display in centimeters'); alert("converting to in"); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" id="change">Display in centimeters</button> <input type="radio" id="converted" checked=""> <table> <thead> <tr> <th> Size</th> <th>XS</th> <th>S</th> <th>M</th> <th>L</th> <th>XL</th> </tr> </thead> <tbody id="data"> <tr> <th>CHEST</th> <td>32 - 34"</td> <td>35 - 37"</td> <td>38 - 40"</td> <td>41 - 43" </td> <td>44 - 46"</td> </tr> <tr> <th>WAIST</th> <td>26 - 28"</td> <td>29 - 31"</td> <td>32 - 34"</td> <td>35 - 37"</td> <td>38 - 40"</td> </tr> <tr> <th>SEAT / HIP</th> <td>32 - 34"</td> <td>35 - 37"</td> <td>38 - 40"</td> <td>41 - 43"</td> <td>44 - 46"</td> </tr> <tr> <th>SLEEVE</th> <td>24.8"</td> <td>25.1"</td> <td>25.6"</td> <td>26"</td> <td>26.4"</td> </tr> </tbody> </table>
1 answers
solution1
2 ACCPTED 2021-01-01 23:36:24
Rather than having to parse the individual strings, why not just wrap each number you want to convert in something that's easy to select? In this case, I put each number in a span. Then it's as easy as
$("#data span").each( //Convert the numbers here );
Parse the HTML inside each span into a float, then multiply or divide by 2.54 to convert between in and cm.
$("#data span").each(function(){
$(this).html(parseFloat($(this).html()) * 2.54);
});
Finally, your unit conversion is a bit broken. You're applying the conversion of the first element to all elements. Use .each() to parse each one individually.
$("#data td").each(function(){
$(this).html($(this).html().replaceAll('"', "cm"));
});
You may also want to put rules on how the numbers are put back into the HTML. Math.round or .toFixed(length) would be helpful for that. Since this is floating point math, it's slightly inaccurate and you'll get things like 26.0000000004 when you convert.
$(document).on('click', ' #change', function(e) { if($('#converted').is(':checked')) { $("#data span").each(function(){ $(this).html(parseFloat($(this).html()) * 2.54); }); $("#data td").each(function(){ $(this).html($(this).html().replaceAll('"', "cm")); }); $('#change').html('Display in inches'); $('#converted').prop('checked', false); } else { $("#data span").each(function(){ $(this).html(parseFloat($(this).html()) / 2.54); }); $("#data td").each(function(){ $(this).html($(this).html().replaceAll('cm', '"')); }); $('#converted').prop('checked', true); $('#change').html('Display in centimeters'); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <button type="button" id="change"> Display in centimeters </button> <input type="radio" id="converted" checked=""> <table> <thead> <tr> <th> Size</th> <th>XS</th> <th>S</th> <th>M</th> <th>L</th> <th>XL</th> </tr> </thead> <tbody id="data"> <tr> <th>CHEST</th> <td><span>32</span> - <span>34</span>"</td> <td><span>35</span> - <span>37</span>"</td> <td><span>38</span> - <span>40</span>"</td> <td><span>41</span> - <span>43</span>" </td> <td><span>44</span> - <span>46</span>"</td> </tr> <tr> <th>WAIST</th> <td><span>26</span> - <span>28</span>"</td> <td><span>29</span> - <span>31</span>"</td> <td><span>32</span> - <span>34</span>"</td> <td><span>35</span> - <span>37</span>"</td> <td><span>38</span> - <span>40</span>"</td> </tr> <tr> <th>SEAT / HIP</th> <td><span>32</span> - <span>34</span>"</td> <td><span>35</span> - <span>37</span>"</td> <td><span>38</span> - <span>40</span>"</td> <td><span>41</span> - <span>43</span>"</td> <td><span>44</span> - <span>46</span>"</td> </tr> <tr> <th>SLEEVE</th> <td><span>24.8</span>"</td> <td><span>25.1</span>"</td> <td><span>25.6</span>"</td> <td><span>26</span>"</td> <td><span>26.4</span>"</td> </tr> </tbody> </table> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.