使用 JQuery / JavaScript 对三行 HTML 文本框值求和

Question

我有以下 html 页面，需要使用 JQuery / JavaScript 对三行 HTML 文本框值求和。 - 我需要每一行的总计以及所有行的总计。

表单如下所示：

这是我的带有三行文本框的 HTML：

    <table data-role="table" data-theme="c" id="bookList" class="table-stroke table-stripe">

<thead>
<tr>
  <th>Type</th>
  <th>Mon<br>
    <input disabled id="monDate" size="5" data-mini="true"></th>
  <th>Tue<br>
    <input disabled id="tueDate" size="5" data-mini="true"></th>
  <th>Wed<br>
    <input disabled id="wedDate" size="5" data-mini="true"></th>
  <th>Thu<br>
    <input disabled id="thuDate" size="5" data-mini="true"></th>
  <th>Fri<br>
    <input disabled id="friDate" size="5" data-mini="true"></th>
  <th>Sat<br>
    <input disabled id="satDate" size="5" data-mini="true"></th>
  <th>Sun<br>
    <input disabled id="sunDate" size="5" data-mini="true"></th>
  <th>Totals</th>
  <th>Description</th>
</tr>
</thead>

<tbody>
<tr>
  <th><select name="select-choice-1" id="select-choice-1" data-native-menu="false" data-theme="c" data-mini="true">
    <option value="Regular Hourly Rate" selected>Regular Hourly Rate</option>
    <option value="Paid Leave Time">Paid Leave Time</option>
    <option value="Bereavement">Bereavement</option>
    <option value="Holiday Pay">Holiday Pay</option>
    </select></th>
  <td><input type="number" pattern="[0-9]*" name="mon1" id="mon1" value="8" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="tue1" id="tue1" value="8" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="wed1" id="wed1" value="8" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="thu1" id="thu1" value="" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="fri1" id="fri1" value="" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="sat1" id="sat1" value="" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="sun1" id="sun1" value="" size="10" maxlength="5" data-    mini="true"></td>
  <td><input name="total1" type="text" disabled id="total1" value="" size="10" maxlength="5" pattern="[0-9]*"     data-mini="true"></td>
  <td><label>
    <input name="desc1" type="text" id="desc1" size="15" maxlength="50" data-mini="true">
    </label></td>
</tr>
<tr>
  <th><select name="select-choice-2" id="select-choice-2" data-native-menu="false" data-theme="c" data-mini="true">
    <option value="Regular Hourly Rate">Regular Hourly Rate</option>
    <option value="Paid Leave Time" selected>Paid Leave Time</option>
    <option value="Bereavement">Bereavement</option>
    <option value="Holiday Pay">Holiday Pay</option>
    </select></th>
  <td><input type="number" pattern="[0-9]*" name="mon2" id="mon2" value="" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="tue2" id="tue2" value="" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="wed2" id="wed2" value="" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="thu2" id="thu2" value="8" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="fri2" id="fri2" value="" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="sat2" id="sat2" value="" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="sun2" id="sun2" value="" size="10" maxlength="5" data-    mini="true"></td>
  <td><input name="total2" type="text" disabled id="total2" value="" size="10" maxlength="5" pattern="[0-9]*"     data-mini="true"></td>
  <td><label>
    <input name="desc2" type="text" id="desc2" size="15" maxlength="50" data-mini="true">
    </label></td>
</tr>
<tr>
  <th><select name="select-choice-3" id="select-choice-3" data-native-menu="false" data-theme="c" data-mini="true">
    <option value="Regular Hourly Rate">Regular Hourly Rate</option>
    <option value="Paid Leave Time">Paid Leave Time</option>
    <option value="Bereavement">Bereavement</option>
    <option value="Holiday Pay" selected>Holiday Pay</option>
    </select></th>
  <td><input type="number" pattern="[0-9]*" name="mon3" id="mon3" value="" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="tue3" id="tue3" value="" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="wed3" id="wed3" value="" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="thu3" id="thu3" value="" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="fri3" id="fri3" value="8" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="sat3" id="sat3" value="" size="10" maxlength="5" data-    mini="true"></td>
  <td><input type="number" pattern="[0-9]*" name="sun3" id="sun3" value="" size="10" maxlength="5" data-    mini="true"></td>
  <td><input name="total3" type="text" disabled id="total3" value="" size="10" maxlength="5" pattern="[0-9]*"     data-mini="true"></td>
  <td><label>
    <input name="desc3" type="text" id="desc3" size="15" maxlength="50" data-mini="true">
    </label></td>
</tr>
<tr>
  <th>&nbsp;</th>
  <td colspan="7"><div align="right">Totals</div></td>
  <td><input name="total4" type="text" disabled id="total4" value="" size="10" maxlength="5" pattern="[0-9]*"     data-mini="true"></td>
  <td>&nbsp;</td>
</tr>
</tbody>

</table>

Answer 1

假设你有以下html

<table>
<tr id="hourly">
    <td>
        <input value="1" />
        <input value="2" />
        <input id="total_hour" />
    </td>
</tr>
</table>
<button id="calc">Submit</button>

以下 JS 应该可以满足您的需求。

//-- Create an empty array to hold items
var items = [];

//-- set hourly total = 0
var htotal = 0;

//-- When submit is clicked process hourly time, this should be repeated for each row

    $("#calc").click(function () {
//-- use the each function to loop through every input field on the hourly row

        $("#hourly input").each(function () {

//-- only the final total has an id and we don't want that included in our total

          if(!$(this).attr("id"))
          {

            //-- convert each value to a number and push to items array
            items.push(parseFloat($(this).val()));

          }



    });
//-- loop through each item in the items array
      $.each(items, function() {
//-- add the items together as the htotal variable
              htotal += this;
      });
//-- set the total_hour value to htotal
    $("#total_hour").val(htotal);

    });

在这里工作 Plunk http://plnkr.co/edit/KbUgI9Orov5dao4fftET?p=preview