javascript - JQuery / JavaScript を使用して HTML テキストボックスの値の 3 つの行を合計する

Question

次の HTML ページがあり、JQuery/JavaScript を使用して HTML テキストボックス値の 3 つの行を合計する必要があります。- 各行の合計と、すべての行の総計が必要です。

フォームは次のようになります。

3行のテキストボックスを含む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>