【jQuery】テーブルの行単位で値変更時に自動入力する方法

何となく早く目が覚めてしまったので、色々と試してみました。

テーブルの行単位で項目の変更検出と他項目に値を自動入力するにはどうすればいいのかなーっと
ふと思って下記のコードを書いてみました。

実行例

変更した行のidを取得して、
後は行にあるそれぞれのinput項目に対応した処理を書いていっているだけです。

See the Pen ChangeTableContent by miko3 (@miko3) on CodePen.

コード

HTML

<table id="table-container">
  <thead>
    <tr>
      <th>入力項目</th>
      <th>x2</th>
      <th>x3</th>
      <th>済</th>
    </tr>
  </thead>
  <tbody>
    <tr class="id1">
      <td><input id="change-content" type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="checkbox"></td>
    </tr>
    <tr class="id2">
      <td><input id="change-content" type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="checkbox"></td>
    </tr>
    <tr class="id3">
      <td><input id="change-content" type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="checkbox"></td>
    </tr>
  </tbody>
</table>

JavaScript

$("#table-container input[type=text]#change-content").change(function() {
  
  var className = $(this).closest("tr").attr("class");
  var num = $(this).val();
  try {
    tmpNum = parseFloat(num);
    
    // Nanかチェック
    if (isCheckNaN(tmpNum)) {
      $("tr."+className+"  input[type=checkbox]").prop("checked", false);
      $(this).val("");
      return;
    } else {
      num = tmpNum;
      $(this).val(num);
    }
  }
  catch (e) {
    return;
  }
  
  // 項目を変更した行のテキストボックスの値を変更する
  // 最初の行は変更対象外）(not利用)
  $("tr."+className+" input[type=text]").not(':first').each(function(i){
    switch (i) {
      case 0:
        $(this).val(num*2);
        break;
      case 1:
        $(this).val(num*3)
        break;
      default:
        break;
    }
  });
  
  // チェックボックスにチェックを付ける
  $("tr."+className+"  input[type=checkbox]").prop("checked", true);
});

// Nan === Nan -> false
// ↑の性質を利用する
function isCheckNaN(num) {
  return num !== num || typeof num !== "number";
}

もっとカッコいい書き方があれば、是非教えてください…(:3_ヽ)_