javascript - テキスト ボックスのデータをグリッド形式で表示する

Question

私の質問は、javascript/jquery を使用してグリッド形式でデータを表示できますが、DB からデータを取得するのはフロント エンドのみです。仮定する：

textfield1
textfield2
    add more (link)

さらにリンクを追加をクリックすると、ユーザーが入力したデータが次のように表示されます。

Firstname      Lastname
amit           kumar

textfield1
textfield2
    add more (link)

すぐに両方のテキストフィールドが空白になります。次のステップも同じです。

教えてください。

Answer 1

次の HTML がある場合:

<table id="mylist">
    <tr>
        <td>First Name</td>
        <td>Last Name</td>
    </tr>
</table>

<input name="fname">
<input name="lname">
<button>Add More</button>

次に、JS を用意します。

$(function(){
  $('button').on('click',function(){
    var fname = $('input[name="fname"]').val();
    var lname = $('input[name="lname"]').val();
    $('#mylist').append('<tr><td>'+fname+'</td><td>'+lname+'</td></tr>');
    // CLEAR FIELDS
    $('input[name="fname"],input[name="lname"]').val(''); // No value
  });
});