（HTML、Jquery）textareaから入力した文字のテーブル出力

ボールドテキスト###前提・実現したいこと
初めて質問させて頂きます。

HTMLとJqueryを使用するプログラムですが、
textareaから入力した文字をテーブルに出力し
textarea内に2行以上入力してテーブルに入力した行数に分かれて入力した文字とボタンが出力されるようにしたいです。

（例）
入力
1
2
⇩
出力
1 「削除」
2 「削除」
（1行にボタンと一緒に1文字ずつ）

###発生している問題・エラーメッセージ
textareaに2行以上入力してもテーブルに1行で入力した文字が並んで出ます。

（例）
1
2
⇩
1 2 「削除」

###該当のソースコード

<body>

<textarea id="data"></textarea><br />
<button id="start">出力</button>

 <table class="table" id="table">
 <thead>
 <tr>
 <td></td>
 </tr>
 </thead>
 <tbody>
 <tr>
 </tr>
 </tbody>
 </table>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script language="JavaScript">

  $("#start").click(function(){
    var str = $("#data").val();
    $("#table").append(
            $("<tr></tr>")
  .append($("<td>" + str + "<input type='button' value='削除'/></td>"))
            );
    });

  </script>

  </body>

###補足情報(言語/FW/ツール等のバージョンなど)
言語：HTML、Jquery
ツール:eclipse4.5

初めての質問であり、わかりにくい部分もあるかもしれませんが、よろしくお願いします。

kei344

2016/10/07 09:57

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

yoshim95

2016/10/07 11:20

コードを囲みましたがよろしいですか？

行動規範の内容に同意します

回答1件

ベストアンサー

改行コードで分割して配列に格納し、それを一つずつappendするとか

JavaScript
1$("#start").click(function(){ 
2	var str = $("#data").val(); 
3	var strList = str.split("\n");
4	$.each(strList, function(index, val) {
5		$("#table").append( 
6			$("<tr></tr>").append($("<td>" + val + "<input type='button' value='削除'/></td>")) 
7		); 
8	});
9});