时间戳

首页 > 解决方案 > 输入固定值

javascript - 输入固定值

问题描述

我想创建一个具有固定价格的表格、一个可以输入值的输入字段和一个总计的列（价格*数量）

我遇到的问题是我编写的代码有效，但仅适用于整数。逗号后不读。因此，如果我输入 4.39 的价格，它会以 4 计算。

此外，如果我将类型设置为“十进制”或“数字”，它也不起作用。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.price,.quantity').on('keyup', function () {
                var row = $(this).closest('tr');
                var price = $(row).find('.price').val() == '' ? 0 : $(row).find('.price').val();
                var quantity = $(row).find('.quantity').val() == '' ? 0 : $(row).find('.quantity').val();
                $(row).find('.total').val(parseInt(isNaN(price) ? 0 : price) * parseInt(isNaN(quantity) ? 0 : quantity));
            });
        });
    </script>
</head>
<body>
    <div>
        <table>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
            <tr>
                <td>Chai</td>
                <td><input type="text" class="price" value="1.39" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" /></td>
            </tr>
            <tr>
                <td>Chang</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" /></td>
            </tr>
            <tr>
                <td>Aniseed Syrup</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" /></td>
            </tr>
        </table>
    </div>
</body>
</html>

标签： javascripthtmljson

解决方案

您可以向您的添加readonly属性input fields来制作它non-editable。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.price,.quantity').on('keyup', function () {
                var row = $(this).closest('tr');
                var price = $(row).find('.price').val() == '' ? 0 : $(row).find('.price').val();
                var quantity = $(row).find('.quantity').val() == '' ? 0 : $(row).find('.quantity').val();
                $(row).find('.total').val(parseInt(isNaN(price) ? 0 : price) * parseInt(isNaN(quantity) ? 0 : quantity));
            });
        });
    </script>
</head>
<body>
    <div>
        <table>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
            <tr>
                <td>Chai</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" readonly/></td>
            </tr>
            <tr>
                <td>Chang</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" readonly/></td>
            </tr>
            <tr>
                <td>Aniseed Syrup</td>
                <td><input type="text" class="price" /></td>
                <td><input type="text" class="quantity" /></td>
                <td><input type="text" class="total" readonly/></td>
            </tr>
        </table>
    </div>
</body>
</html>

推荐阅读