如何使用 jquery 将“.01”添加到文本框值

Posted

技术标签:

【中文标题】如何使用 jquery 将“.01”添加到文本框值【英文标题】:How to add ".01" to textbox value by using jquery 【发布时间】:2017-10-03 15:24:40 【问题描述】:

我是 jQuery 的新手。我有一个带有两个输入框的表单。

<form>
<div class="col-md-6">
    <div class="form-group ">
      <label for="minAmt" class="col-lg-4 control-label">Min.Amount</label>
      <div class="col-lg-6">
        <input type="text" class="form-control minAmt" id="minAmt" name="minAmt" placeholder="Enter Min Amount" />
      </div>
    </div>
      <div class="form-group ">
      <label for="maxAmt" class="col-lg-4 control-label">Max.Amount</label>
      <div class="col-lg-6">
        <input type="text" class="form-control maxAmt" id="maxAmt" name="maxAmt" placeholder="Enter Max Amount" />
      </div>
    </div>
</div>
<div class="col-md-12">
    <div class="form-actions btnzone">
       <button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;margin-left: 40%;" id="addbutton" ><i class="icon-check-sign" aria-hidden="false"></i>Add</button>
    </div>
</div>
</form>
<form  class="form-horizontal" role="form" id="limits" >
    <div class="col-md-12" style="height:150px;overflow:auto;margin-top:5px;">
      <table id="table" class="table table-hover table-fixed"  cellspacing="0" style="border: 1px; height:10px;" >
        <thead style="background-color:#CCE5FF">
           <tr>
             <th>Min.Amount</th>
             <th>Max.Amount</th>
           </tr>
         </thead>
      <tbody>     
      </tbody>
    </table>
  </div>
</form>

首先,用户输入最小值和最大值,然后单击“添加”按钮。然后这些值将以表格形式显示在最小和最大列中。

然后第一个输入框被禁用,并获取之前添加的最大值的值。用户现在只需要输入一个新的最大值并再次按“添加”。

这样,可以将多个连续范围添加到表格中。

代码如下:

$("button#addbutton").click(function()
    var minAmt=$("#minAmt").val();
    var maxAmt=$("#maxAmt").val();

    var new_row = "<tr id='row"+i+"' class='info'><td class='minAmt'>" + minAmt + "</td><td class='maxAmt'>" + maxAmt + "</td></tr>";
    $("table tbody").append(new_row);

    $("#minAmt").val($('td.maxAmt').last().text()).prop("disabled","disabled");
    $("#maxAmt").val('');
);

所以在第一次点击之后,用户只能输入最大的数量。

我的问题

我想在每次点击“添加”后将.01 添加到最小值(除了第一次手动输入最小值)。 p>

例如:

首先我输入 1 - 100。

下次最小金额自动取100,所以我输入最大金额,1000。

点击“添加”后,我想在表格中显示100.01到1000。

我该怎么做?

【问题讨论】:

【参考方案1】:

您可以用作值:

+minAmt + 0.01

注意第一个一元加号运算符,它将字符串转换为值。

这里是更新了一些改进的代码:

更多 jQuery 风格的向表格添加行的方式 输入验证:数字和最大值 > 最小值 i 的动态计算,未在您的代码中初始化

$("button#addbutton").click(function()
    var minAmt=$("#minAmt").val();
    var maxAmt=$("#maxAmt").val();
    // Some validation
    if (minAmt == '' || isNaN(minAmt)) 
        $("#minAmt").focus();
        $("#minError").show();
        return;
    
    $("#minError").hide();
    if (maxAmt == '' || isNaN(maxAmt) || +maxAmt <= +minAmt) 
        $("#maxAmt").focus();
        $("#maxError").show();
        return;
    
    $("#maxError").hide();

    var i = $("table tbody tr").length + 1;
    $("table tbody").append(
        $("<tr>").attr("id", "row"+i).addClass("info").append(
            $("<td>").addClass("minAmt").text(minAmt),
            $("<td>").addClass("maxAmt").text(maxAmt)
        )
    );

    $("#minAmt").val(+maxAmt+0.01).prop("disabled","disabled");
    $("#maxAmt").val('');
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="col-md-6">
    <div class="form-group ">
      <label for="minAmt" class="col-lg-4 control-label">Min.Amount</label>
      <div class="col-lg-6">
        <input type="text" class="form-control minAmt" id="minAmt" name="minAmt" placeholder="Enter Min Amount" />
        <span id="minError" style="display: none; color: red">invalid input</span>
      </div>
    </div>
      <div class="form-group ">
      <label for="maxAmt" class="col-lg-4 control-label">Max.Amount</label>
      <div class="col-lg-6">
        <input type="text" class="form-control maxAmt" id="maxAmt" name="maxAmt" placeholder="Enter Max Amount" />
        <span id="maxError" style="display: none; color: red">invalid input</span>
      </div>
    </div>
</div>
<div class="col-md-12">
    <div class="form-actions btnzone">
       <button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;margin-left: 40%;" id="addbutton" ><i class="icon-check-sign" aria-hidden="false"></i>Add</button>
    </div>
</div>
</form>
<form  class="form-horizontal" role="form" id="limits" >
    <div class="col-md-12" style="height:150px;overflow:auto;margin-top:5px;">
      <table id="table" class="table table-hover table-fixed"  cellspacing="0" style="border: 1px; height:10px;" >
        <thead style="background-color:#CCE5FF">
           <tr>
             <th>Min.Amount</th>
             <th>Max.Amount</th>
           </tr>
         </thead>
      <tbody>     
      </tbody>
    </table>
  </div>
</form>

【讨论】:

谢谢@trincot。你拯救了我的一天 我还有一个问题

以上是关于如何使用 jquery 将“.01”添加到文本框值的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 jquery 将文本复制到剪贴板? [复制]

如何使用javascript验证动态生成的输入框值

将文本框值添加到单个记录:INSERT INTO 语句中的语法错误

如何将可关闭的文本标签添加到 Textarea Kendo | jQuery

如何根据文本框值过滤列表框值

在jquery中更改另一个文本框时动态设置一个文本框值