BRANDNEW Table

Table test

by László Kovács

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.min.js"></script>
<header>
		<h1> Table Test </h1>
		
    </br>
<form id="myOwnCheckBox">
<input type="checkbox" name="tablecolumn" value=".personID_td">PersonID
<br>
<input type="checkbox" name="tablecolumn" value=".personName_td">Name
<br>
<input type="checkbox" name="tablecolumn" value=".personAge_td">Age
<br>
<input type="checkbox" name="tablecolumn" value=".personAddress_td">Address
<br>
<input type="checkbox" name="tablecolumn" value=".personNumber_td">Phone Number
</form> 
<button>Hide it</button>
    </br>
    </br>
	<table id="testTable">
	 <tr id="tr1" class="tableHead">    
	   <th class="personID_td"> PersonID 
	   </th>
	   <th class="personName_td">   Name
	   </th>
	   <th class="personAge_td">   Age
	   </th>
	   <th class="personAddress_td">   Address
	   </th>
	   <th class="personNumber_td">   Phone Number
	   </th>
	 </tr>
	</table>
		
	</section>

	<footer>
		</br>
	</footer>

	<script id="TableTemplate" type="text/template">
   		  <tr>    
	   		<th> <%= personID %> 	   	</th>
	  		<th> <%= personName %>	   	</th>
	   		<th> <%= personAge %>	   	</th>
	   		<th> <%= personAddress %>	   	</th>
	   		<th>  <%= personNumber %>	   	</th>  
	 	  </tr>
	 </script>
	 
 	<script id="PersonTemplate" type="text/template">  
 	
	   		<td class="personID_td"> <%= personID %> 	   		</td>
	  		<td class="personName_td"> <%= personName %>	   		</td>
	   		<td class="personAge_td"> <%= personAge %>	   		</td>
	   		<td class="personAddress_td"> <%= personAddress %>	   		</td>
	   		<td class="personNumber_td">  <%= personNumber %>	   		</td>
</script>

CSS

* {
  margin: 0px;
  padding: 0px;
}

table{
  margin: 10px;
  background-color: #D0D0D0;
}

th {
  background-color: #E20074;
  border-bottom: 1px solid black;
  color: #FFFFFF;
}

tr {
  background-color: #64B9E4;
}

td {
  width: 20%;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  padding-left: 5px; 
  padding-right: 5px;
  overflow: hidden;
}

JavaScript

var app = app || {};

app.Person = Backbone.Model.extend({
    defaults: {
        personID: 1,  
        personName: 'Unknown',
        personAge: 'Unknown',
        personAddress: 'Unknown',
        personNumber: 'Unknown'
    }
});

app.People = Backbone.Collection.extend({
    url: "/people",
    model: app.Person
});

app.PersonView = Backbone.View.extend({
    tagName: 'tr',
    className: 'PesonContainer',
    template: _.template( $( '#PersonTemplate' ).html() ),

    render: function() {
        //this.el is what we defined in tagName. use $el to get access to jQuery html() function
        this.$el.html( this.template( this.model.attributes ) );
        return this;
    },
    
});

app.PeopleView = Backbone.View.extend({
    el: '#testTable',

    initialize: function( initialPersons ) {
        this.collection = new app.People( initialPersons );
        this.listenTo( this.collection, 'add', this.renderPerson );
        this.render();
    },

    // render library by rendering each book in its collection
    render: function() {
        this.collection.each(function( item ) {
            this.renderPerson( item );
        }, this );
    },

    // render a book by creating a BookView and appending the
    // element it renders to the library's element
    renderPerson: function( item ) {
        var personView = new app.PersonView({
            model: item
        });
        this.$el.append( personView.render().el );
    },

    addPerson: function( e ) {
      e.preventDefault();

     var formData = {};
    
    this.collection.add( new app.Person( formData ) );
    
  },
});

    
$.mockjax({
    url: '/people',
    responseText: [
        {     personID: '00012345007', personName: 'Harry Potter', personAge: '12', personAddress: 'Roxfort', personNumber: '06-9&3/4-666-23'}, 
         {     personID: '00012345001', personName: 'Katniss Everdeen', personAge: '16', personAddress: 'Panem', personNumber: '06-12-666-23'}, 
        {     personID:...