MAAC inv table - with add row function

MAAC inv table - with add row function

by pj_js15

HTML

<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<table class="investment-options">
  <tr>
    <th>Product name</th>
    <th>Amount invested $</th>
    <th>% of portfolio</th>
    <th>Management Cost %</th>
    <th>&nbsp;</th>
  </tr>
  <tbody>
    <tr class="data"></tr>
    <tr class="data odd">
      <td>Sample Investment Option (001)</td>
      <td>
        <input type="text" class="txt-amount-inv" />
      </td>
      <td>0%</td>
      <td>1.14% <i class="fa fa-info-circle info" aria-hidden="true"></i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td>
    </tr>
    <tr class="data even">
      <td>Another Investment Option (002)</td>
      <td>
        <input type="text" class="txt-amount-inv" />
      </td>
      <td>0%</td>
      <td>1.14% <i class="fa fa-info-circle info" aria-hidden="true"></i></td>
      <td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td>
    </tr>
  </tbody>

  <tr class="odd">
    <td class="search-container" colspan="5">
      <input type="text" class="txt-search-inv-opt" placeholder="Begin typing to search" />
    </td>
  </tr>
  <tr class="last-row">
    <td>Total</td>
    <td>$0</td>
    <td>0%</td>
    <td></td>
    <td></td>
  </tr>
</table>

CSS

* {
  font-family: Arial;
  font-size: 13px;
}

table.investment-options {
  border-collapse: collapse;
  width: 100%;
}

th,
.last-row td {
  background-color: #007ACC;
  color: #FFF;
  padding: 10px 20px;
}

td {
  text-align: center;
  padding: 10px;
}

/*
tr.odd {
  background-color: #FFF;
}

tr.even {
  background-color: #F9F9F9;
}
*/

tr:nth-child(even) {
      background-color: #FFF;
    }
    
tr:nth-child(odd) {
  background-color: #F9F9F9;
}

table tr th {}

.txt-amount-inv {
  margin: 0 auto;
  padding: 10px;
  width: 80px;
}

i.info {
  color: #007ACC;
}

i.delete {
  color: #B0B0B0;
  font-size: 16px;
}

.txt-search-inv-opt {
  padding: 10px;
  width: 96%;
}

.search-container {
  padding: 10px;
}

JavaScript

$(this).ready(function() {

  //Insert new row
  $('.txt-search-inv-opt').keypress(function(e) {
    if (e.which == 13) {
    	var rowCount = $('table.investment-options tr.data').length;
    	var dataRowClass = rowCount % 2 == 0 ? '' : '';
      
      var newRow = '<tr class="data ' + dataRowClass + '"><td>' + $(this).val() + '</td><td><input type="text" id="text-' + rowCount + '" class="txt-amount-inv" /></td><td>0%</td><td>1.14% <i class="fa fa-info-circle info" aria-hidden="true"></i></td><td><i class="fa fa-trash-o delete" aria-hidden="true"></i></td></tr>';
      
      //console.log($('.text-' + rowCount));
      
      //$('.text-' + rowCount).focus();
      
      $("table.investment-options tr.data:last").after(newRow);
    }
  });
  
  //delete row
  $('table.investment-options').on('click', '.delete', function(){
  	$(this).parents('tr').remove();
  });
  
  
  
});