Table内のTextのイベントで同一行の値操作

タイトルの通り
Table内のテキストの入力値を別のTd要素の値との差分をさらに別のTd要素に表示するというもの
取るに足らない内容ですが、やり方調べるのに少し時間がかかってしまったので記録用に残しておきます。

table.html

<table>
  <thead>
    <tr id="head">
      <th>XXX</th>
      <th style="width: 100px;">在庫</th>
      <th style="width: 100px;">使用量</th>
      <th style="width: 100px;">残数</th>
    </tr>
  </thead>
  <colgroup>
    <col style="width: 15%;" />
    <col style="width: 8%;" />
    <col style="width: 8%;" />
    <col style="width: 8%;" />
  </colgroup>
  <tbody>
    <tr id="tr1">
      <th>部品１</th>
      <td>1,500</td>
      <td><input name='textOnTd' type="text" value="1,000"></td>
      <td class="txt_right">0</td>
    </tr>
    <tr id="tr2">
      <th>部品２</th>
      <td>3,000</td>
      <td><input name='textOnTd' type="text" value="1,000"></td>
      <td class="txt_right">0</td>
    </tr>
  </tbody>
</table>

table.js

  $(function () {
    $("[name^=textOnTd]").on("keydown", function () {
      var use = $(this).closest('tr').find('input[name=textOnTd]').val().replace(/,/g, '');
      var stock = $(this).closest('tr').children("td")[0].innerText.replace(/,/g, '');
      var sum = Number(stock) - Number(use);
      $(this).closest('tr').children("td")[2].innerText = sum.toLocaleString();;
    });
  });