javascript - 如何使用javascript切换小数和四舍五入的整数

Question

我有一个表，它使用 PostgreSQL 数据库呈现来 self 的 Django 应用程序的数据。如何添加一个按钮来切换“分数”列，以便它显示原始小数值和四舍五入整数之间的数字？

下面是一个示例: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 1

看看是否有帮助。我只是稍微修改了你的 html 来存储你的得分值，这样它就可以撤消回合。

<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> 

jquery 是:

$('.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());
    }
  });
});

它验证您的分数是否有小数点。如果分数是小数，则四舍五入。如果分数不是小数，则会恢复原始值。

https://jsfiddle.net/jdm3eovz/