LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
body {
  text-align: center;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 1s ease-in;
}

table {
  border-collapse: collapse;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}

thead tr {
  background-color: #a0a0a0;
}

tbody tr {
  background-color: white;
}

tbody tr:nth-child(even) {
  background-color: #e5e5e5;
}

th {
  min-width: 100px;
  text-align: center;
}

td {
  min-width: 100px;
  text-align: center;
}

button {
  font-size: 16px;
  margin-right: 10px;
}
JS
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

const firstNames = ['Jane', 'John', 'James', 'Jill', 'Jack', 'Jolene', 'Jerry'];
const lastNames = ['Doe', 'Smith', 'Hill', 'Thomas', 'Jones', 'Fox', 'McGuire'];

var Table = React.createClass({
  getInitialState: function() {
    return {
      items: []
    };
  },
  
  addRow: function() {
    var items = this.state.items;
    var firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
    var lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
    items.push([firstName, lastName]);
    this.setState({items: items});
  },
  
  removeLastRow: function() {
    var items = this.state.items;
    if (items.length != 0)  {
      items.splice(-1, 1);
      this.setState({items: items});
    }
  },
  
  renderTBodyContent: function() {
    var items = this.state.items;
    if (items.length === 0) {
      return (
        TABLE EMPTY
      );
    }
    const rows = this.state.items.map(function(name) {
      return (
        
          {name[0]}
          {name[1]}
        
      );
    });
    return rows;
  },
  
  render: function() {
    return (
      
{this.renderTBodyContent()}
First name Last name
); } }); React.render(, document.getElementById('container'));
Term
Sat, 01/13/2018 - 16:17

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv