jQueryを利用し、テーブル内のinputに対してonblurが発生した際、tableのレコードをコピーしたい

Question

ご閲覧ありがとうございます

jQueryを利用し、テーブル内のinputに対してonblurが発生した際、tableの該当のレコードを、テーブルの末尾にコピーしたい
実際やってみたところ

課題
．選択した 項目2や項目３ が反映されず 項目1 がコピーされてしまう

という状況です。

お力添えよろしくお願いします

<table>
<tbody>
<tr>
   <td class="title">
      <select name="account" id="acount" class="">
         <option value="1356" selected="selected">項目１</option>
         <option value="1345">項目２</option>
         <option value="1346">項目３</option>
      </select>
   </td>
   <td class="number">
      <input name="number_nm" type="text" id="amount" class="amount" onblur="">
   </td>
</tr>
</tbody>
</table>

$(function () {
    $('table').on('blur','td:nth-child(2) .amount',function() {
        add_account( $(this) );
    });
});

var add_account=function($data){
//     //クローンとIDカウントと割当
    //console.log( $data );
     $data.parent().parent().clone().appendTo('table');
    //var idx=$("table td.title").length-1;
    $('table tr:last-child td.number input.amount').val("");
    $('table tr:last-child td.memo input').val("");
    //console.log(idx);
}

参照コード

Comments

[m.ts10806]

念のため動作確認されたブラウザとjQueryのバージョンを質問本文に追記願います。

[yambejp]

click指定していますがblurですか？

[m.ts10806]

「参照コード」のリンクミスってますね。調整願います。

[ssmxgo]

みなさまありがとうございます

blurでした
jqueryのバージョンは1.8.0
になります

参照コード確認致します

[m.ts10806]

>jqueryのバージョンは1.8.0
質問本文に追記願います。。。

Answer 1

入力値も移すなら、name属性を見ましょう。

$('table').on('blur', 'input', function(event) {
  var tr = $(event.target).closest('tr');
  var clone = tr.clone(false);
  $('[name]', tr).each(function(index, element) {
    clone.find('[name="' + element.name + '"]').val($(element).val());
  });
  tr.parent().append(clone);
});

Comments

[ssmxgo]

ありがとうございます。
挙動を確認いたしました！
javascriptのオブジェクトとjQueryの関係性が
まだわからず、少し理解に時間がかかりそうですが勉強させていただきます

Answer 2

とりあえずこんな感じで
cloneして使い回すならidは付加しないこと

<script>
$(function () {
  $('table').on('click','tr',function() {
    $(this).clone().find('select').val($(this).find('select').val()).end().appendTo('table');
  });
});

</script>
<table border>
<tbody>
<tr>
   <td class="title">
      <select name="account" class="">
         <option value="1356">項目１</option>
         <option value="1345">項目２</option>
         <option value="1346">項目３</option>
      </select>
   </td>
   <td class="number">
      <input name="number_nm" type="text" class="amount" onblur="">
   </td>
</tr>
</tbody>
</table>

Comments

[ssmxgo]

ありがとうございます。
挙動を確認いたしました！
なんとか理解できそうです。ありがとうございます。

[ssmxgo]

ちょっと汚いですが想定する挙動に鳴りました
https://www.codeply.com/go/24tCytb77P