bayman bayman - 6 months ago 13
jQuery Question

How to switch decimal and rounded whole number using javascript

I have a table that renders data from my Django app which uses PostgreSQL database. How would I add a button to switch the Score column so it'll display the numbers between its original decimal value and rounded whole numbers?

Here is an example of what it would look like: https://jsfiddle.net/8a66gtww/

<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th class="track_id"><input id="checkAll" type="checkbox" /></th>
<th>First Name</th>
<th>Last Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="track_id"><input type="checkbox" name="track_id" value="2" /></td>
<td>John</td>
<td>Do</td>
<td>65.85</td>
</tr>
<tr class="even">
<td class="track_id"><input type="checkbox" name="track_id" value="1" /></td>
<td>Michael</td>
<td>Smith</td>
<td>88.25</td>
</tr>
<tr class="odd">
<td class="track_id"><input type="checkbox" name="track_id" value="4" /></td>
<td>Donald</td>
<td>James</td>
<td>120.11</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<br />
<button onclick="myFunction()">Switch</button> // Switches score between decimal and rounded whole number

Answer

See if it helps. I just modified your html a little for storing your score values so it can undo the round.

<table class="table table-bordered table-condensed table-striped">
    <thead>
        <tr>
            <th class="track_id"><input id="checkAll" type="checkbox" /></th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Score</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td class="track_id"><input type="checkbox" name="track_id" value="2" /></td>
            <td>John</td>
            <td>Do</td>
            <td>65.85</td>
            <input type="hidden" value="65.85">
        </tr>
        <tr class="even">
            <td class="track_id"><input type="checkbox" name="track_id" value="1" /></td>
            <td>Michael</td>
            <td>Smith</td>
            <td>88.25</td>
            <input type="hidden" value="88.25">
        </tr>
        <tr class="odd">
            <td class="track_id"><input type="checkbox" name="track_id" value="4" /></td>
            <td>Donald</td>
            <td>James</td>
            <td>120.11</td>
            <input type="hidden" value="120.11">
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>
<br />
<button class="switch">Switch</button> 

and jquery is:

$('.switch').click(function () {
  $('.table tbody tr td:nth-child(4)').each(function() {

    if ($(this).html().indexOf('.') >= 0) {
        $(this).html(Math.round($(this).html()));
    } else {
        $(this).html($(this).parent().find('input[type=hidden]').val());
    }
  });
});

It verifies if your score has the decimal dot. If the score is decimal, then it rounds it. If the score isn't decimal, it restores the original value.

https://jsfiddle.net/jdm3eovz/

Comments