如何使用Javascript制作sum.toFixed句柄逗号？

时间：2017-03-30 16:04:22

标签： javascript jquery html

我试图让我的javascript在插入逗号后继续计算列的总和？当我尝试插入一个例如$ 5,000的数字时，它将不再能够计算总和？我对Javascript很陌生，只是通过使用Stack Overflow的代码片段来实现这一目标。请帮我详细说明最后一部分。谢谢。另外，我使用的是WordPress，这就是为什么我的＆＃34; $＆＃34;是jQuery。谢谢。

＆＃13;
＆＃13; 
jQuery(document).ready(function() {
  //iterate through each textboxes and add keyup
  //handler to trigger sum event
  jQuery(".txt").each(function() {
    jQuery(this).keyup(function() {
      calculateSum();
    });
  });
});

function calculateSum() {
  var sum = 0;
  //iterate through each textboxes and add the values
  jQuery(".txt").each(function() {
    //add only if the value is number
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }
  });

  var sumQ = [];
  for (var i = 1; i <= 3; i++) {
    sumQ[i] = 0;
    jQuery('td:nth-child(' + (i + 1) + ')').find(".txt").each(function() {
      if (!isNaN(this.value) && this.value.length != 0) {
        sumQ[i] += parseFloat(this.value);
      }
    });
    jQuery(".span7").find('input').eq(i - 1).val(sumQ[i].toFixed(2));
  }

  //.toFixed() method will roundoff the final sum to 2 decimal places
  jQuery("#sum").val(sum.toFixed(2));
}

var revenue = 12345678;
console.log(revenue.formatMoney()); // $12,345,678.00
＆＃13; 
div.row-fluid.span7.form-inline {
  float: left;
}

.currencyinput {
  border: 1px inset #ccc;
}

.currencyinput input {
  border: 0;
}

.input-icon {
  position: relative;
}

.input-icon>i {
  position: absolute;
  display: block;
  transform: translate(0, -50%);
  top: 50%;
  pointer-events: none;
  width: 25px;
  text-align: center;
  font-style: normal;
}

.input-icon>input {
  padding-left: 25px;
  padding-right: 0;
}

.input-icon-right>i {
  right: 0;
}

.input-icon-right>input {
  padding-left: 0;
  padding-right: 25px;
  text-align: right;
}

table thead {
  background-color: #D3D3D3;
  font-weight: bold;
  line-height: 1.5;
  font-size: .8em;
}

thead td {
  padding: 5px;
  vertical-align: middle;
}

table,
th,
td {
  border: 1px solid black;
  padding-left: 10px;
  line-height: 1.5;
}

table tbody {
  font-size: .7em;
}

.dollars:before {
  content: "$";
}

td {
  padding: 5px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Expense</th>
        <th>Total Program Expenses</th>
        <th>Amount Requested from LCEF</th>
      </tr>
    </thead>
    <tr>
      <td>Salary and Benefits</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" placeholder="0.00" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>

    </tr>
    <tr>
      <td>Contract Services (consulting, professional, fundraising)</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Occupancy (rent, utilities, maintenance)</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Training & Professional Development</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Insurance</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Travel</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Equipment</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Supplies</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Printing, Copying & Postage</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Evaluation</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Marketing</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Conferences, Meetings, etc.</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Administration</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td contenteditable="true">Other - </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td contenteditable="true">Other - </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="text" class="txt input-mini" />
        </div>
      </td>
    </tr>

  </table>
  <div class="row-fluid">

    <div class="span7">
      <div class="form-inline">

        <table>
          <tr>
            <td>Quarters' Total</td>
            <td>
              <div class="input-icon">
                <i>$</i><input type="text" readonly="readonly" class="input-mini" />
              </div>
            </td>
            <td>
              <div class="input-icon">
                <i>$</i><input type="text" readonly="readonly" class="input-mini" />
              </div>
            </td>

          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

您可以使用输入类型number代替text来解决此问题，这样它就会阻止用户添加任何commans或特殊字符，除了这样的数字：

＆＃13;
＆＃13; 
jQuery(document).ready(function() {
  //iterate through each textboxes and add keyup
  //handler to trigger sum event
  jQuery(".txt").each(function() {
    jQuery(this).keyup(function() {
      calculateSum();
    });
  });
});

function calculateSum() {
  var sum = 0;
  //iterate through each textboxes and add the values
  jQuery(".txt").each(function() {
    //add only if the value is number
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat(this.value);
    }
  });

  var sumQ = [];
  for (var i = 1; i <= 3; i++) {
    sumQ[i] = 0;
    jQuery('td:nth-child(' + (i + 1) + ')').find(".txt").each(function() {
      if (!isNaN(this.value) && this.value.length != 0) {
        sumQ[i] += parseFloat(this.value);
      }
    });
    jQuery(".span7").find('input').eq(i - 1).val(sumQ[i].toFixed(2));
  }

  //.toFixed() method will roundoff the final sum to 2 decimal places
  console.log('sum: ', sum);
  jQuery("#sum").val(sum.toFixed(2));
}

var revenue = 12345678;
console.log(revenue); // $12,345,678.00
＆＃13; 
div.row-fluid.span7.form-inline {
  float: left;
}

.currencyinput {
  border: 1px inset #ccc;
}

.currencyinput input {
  border: 0;
}

.input-icon {
  position: relative;
}

.input-icon>i {
  position: absolute;
  display: block;
  transform: translate(0, -50%);
  top: 50%;
  pointer-events: none;
  width: 25px;
  text-align: center;
  font-style: normal;
}

.input-icon>input {
  padding-left: 25px;
  padding-right: 0;
}

.input-icon-right>i {
  right: 0;
}

.input-icon-right>input {
  padding-left: 0;
  padding-right: 25px;
  text-align: right;
}

table thead {
  background-color: #D3D3D3;
  font-weight: bold;
  line-height: 1.5;
  font-size: .8em;
}

thead td {
  padding: 5px;
  vertical-align: middle;
}

table,
th,
td {
  border: 1px solid black;
  padding-left: 10px;
  line-height: 1.5;
}

table tbody {
  font-size: .7em;
}

.dollars:before {
  content: "$";
}

td {
  padding: 5px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Expense</th>
        <th>Total Program Expenses</th>
        <th>Amount Requested from LCEF</th>
      </tr>
    </thead>
    <tr>
      <td>Salary and Benefits</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" placeholder="0.00" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>

    </tr>
    <tr>
      <td>Contract Services (consulting, professional, fundraising)</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Occupancy (rent, utilities, maintenance)</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Training & Professional Development</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Insurance</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Travel</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Equipment</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Supplies</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Printing, Copying & Postage</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Evaluation</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Marketing</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Conferences, Meetings, etc.</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td>Administration</td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td contenteditable="true">Other - </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
    </tr>
    <tr>
      <td contenteditable="true">Other - </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
      <td>
        <div class="input-icon">
          <i>$</i><input type="number" class="txt input-mini" />
        </div>
      </td>
    </tr>

  </table>
  <div class="row-fluid">

    <div class="span7">
      <div class="form-inline">

        <table>
          <tr>
            <td>Quarters' Total</td>
            <td>
              <div class="input-icon">
                <i>$</i><input type="number" readonly="readonly" class="input-mini" />
              </div>
            </td>
            <td>
              <div class="input-icon">
                <i>$</i><input type="number" readonly="readonly" class="input-mini" />
              </div>
            </td>

          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题