JSFiddle - React, Tailwind, and code Playground

by aitnasser

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="row">
    <div class="col-md-4 col-md-offset-4">
        <div class="form-group">
            <label class="col-sm-2 control-label" for="fname">First Name</label>
            <div class="col-sm-4">
                <input type="text" placeholder="First Name" id="fname" class="form-control" name="fname">
            </div>
            <label class="col-sm-2 control-label" for="lName">Last Name</label>
            <div class="col-sm-4">
                <input type="text" placeholder="Last Name" id="lName" class="form-control" name="lName">
            </div>
            <br/>
            <br>
            <label class="col-sm-2 control-label" for="mId">Member Id</label>
            <div class="col-sm-4">
                <input type="text" placeholder="Member Id" id="mId" class="form-control" name="mId">
                     <button type="button" class="btn btn-default" id="save">Save</button>
            </div>
        </div>
        <br/>
        <br/>
        <br/>
        <hr/>
        <div class="container">
            <table class="table table-striped" id="dataTable">
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Member Id</th>
                        </tr>
        </thead>

        <tbody>

        </tbody>
    </table>

JavaScript

function MemberInfo(fName,lName,memberId){
this.FirstName=fname;
this.LastName=lName;
this.MemberId=memberId;    
}

$('#save').click(function () {

     
      $("#dataTable").find('tbody')
          .append($('<tr>')
          .append($('<td>')
          .text($('#fname').val()))
          .append($('<td>')
          .text($('#lName').val()))
          .append($('<td>')
          .text($('#mId').val()))
                  );
                   
      $('#fname').val('');
      $('#lName').val('');
      $('#mId').val('');

    var arr=[];    
    $("#dataTable").find('tbody tr').each(function(index,item){
   
        var fName=$(item).find('td').eq(0).text();
        var lName=$(item).find('td').eq(1).text();
        var memberId=$(item).find('td').eq(2).text();
        arr.push(new MemberInfo(fName,lName,memberId))
    });
          
  localStorage.setItem("memberData",arr);
  })