erobit/incident.tmpl

## incident.tmpl
<tr id="incident_new" class="newi">
  <td>
    <span class="display-mode" style="display:none;"></span>
    <input type="text" name="incident" class="edit-mode form-control" />
  </td>
  <td>
    <span class="display-mode" style="display:none;"></span>
    <select name="severity" class="edit-mode form-control">
      {{#severity}}
      <option value="{{value}}">{{text}}</option>
      {{/severity}}
    </select>
  </td>
  <td>
      <span><input name="reportedId" type="checkbox" class="check-box display-mode" disabled="disabled" style="display:none;"></span>
      <input type="checkbox" name="reported" class="edit-mode" />
  </td>
  <td>
    <span id="description" class="display-mode" style="display:none;"></span>
    <input type="text" name="description" class="edit-mode form-control" />
  </td>
  <td>
    <span class="display-mode" style="display:none;"></span>
    <select name="status" class="edit-mode form-control">
      {{#status}}
      <option value="{{value}}">{{text}}</option>
      {{/status}}
    </select>
  </td>
  <td>
    <a href="#" onclick="incidents.edit({{row}});" class="edit-i display-mode btn btn-default btn-sm" style="display:none;"><i class="fa fa-edit"></i> Edit</a>
    <a href="#" onclick="incidents.save({{row}});" class="save-i edit-mode btn btn-success btn-sm"><i class="fa fa-save"></i> Save</a>
  </td>
</tr>

## incidents.html
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js"></script>
    <script src="https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js"></script>
    <script id="incident" type="x-tmpl-mustache" src="incident.tmpl"></script>
    <script src="incidents.js"></script>
</head>
<body>
  <table id="incidents">
    <tbody></tbody>
  </table>
</body>
</html>

## incidents.js
$(document).ready(function(){

  function IncidentManager(){
    this.table = $('#incidents');
    this.template = $('#incident').html();
    this.init();
  }

  IncidentManager.prototype.init = function() {
    // cache the stash!!!
    Mustache.parse(this.template);   // optional, speeds up future uses

    $(document).on("focus", '#incidents tr:last-child td:last-child', this.add.bind(this));

    // load your json data from server here and store in class variable
    this.severity = [
      {'text':'Ah whatever', 'value': '0'},
      {'text':'Ok worried', 'value': '44'},
      {'text':'Holy Fucknuts', 'value': '9999'}
    ];
    this.status = [
      {'text':'Live', 'value': '1'},
      {'text':'On-Hold', 'value': '0'}
    ];
  };

  IncidentManager.prototype.add = function(){
    var rows = this.table.find('tr').length;
    // Note: I am passing data to the stash to populate the select lists
    var incident = Mustache.render(this.template, { severity: this.severity, status: this.status });
    this.table.find('tbody').append(incident);

    if (rows>0)
      this.save(rows-1);
  };

  IncidentManager.prototype.edit = function(i) {
    this.toggle(i);
    return false;
  };

  IncidentManager.prototype.save = function(i) {
    var incident = {};
    var row = this.table.find('tr').eq(i);
    var id = row.attr('id').split('_')[1];
    row.find('td input, td select').each(function(){
      incident[$(this).attr('name')] = $(this).val();
    });

    // debug your incident json
    //alert(JSON.stringify(incident));

    if (id == 'new') {
      // $.post to add and return id
      //row.attr(id, 'incident_' + newId);
    }
    else {
      incident.id = parseInt(id);
      // $.post to update
    }

    this.toggle(i);

    // here you can
    /*
    $.post(
        '/DrillHoleUpdate/Save',
        {
            ID: dailyId,
            Drillhole: drillhole,
            RigId: rigId,
            AreaId: areaId,
            TargetInMeters_Low: targetLow,
            TargetInMeters_High: targetHigh,
            CurrentDepthInMeters: currentDepth,
            Highlights: highlights,
            DailyStatusId: dailyStatusId
        },
      */
  };

  /* could create a method to toggle a row from edit / save */
  IncidentManager.prototype.toggle = function(i) {
    var row = this.table.find('tr').eq(i);
    row.find('.edit-i').toggle();
    row.find('.save-i').toggle();
    // any other toggling required?
  }

  var incidents = new IncidentManager();
  incidents.add();  // let's start with a row
                    // we could also easily add incidents.load() to get existing incidents from db
                    // and incidents.update() to actually update the incident if save is clicked

  // global so we can access the incidents api in the console
  window.incidents = incidents;
});
	<tr id="incident_new" class="newi">
	<td>
	<span class="display-mode" style="display:none;"></span>
	<input type="text" name="incident" class="edit-mode form-control" />
	</td>
	<td>
	<span class="display-mode" style="display:none;"></span>
	<select name="severity" class="edit-mode form-control">
	{{#severity}}
	<option value="{{value}}">{{text}}</option>
	{{/severity}}
	</select>
	</td>
	<td>
	<span><input name="reportedId" type="checkbox" class="check-box display-mode" disabled="disabled" style="display:none;"></span>
	<input type="checkbox" name="reported" class="edit-mode" />
	</td>
	<td>
	<span id="description" class="display-mode" style="display:none;"></span>
	<input type="text" name="description" class="edit-mode form-control" />
	</td>
	<td>
	<span class="display-mode" style="display:none;"></span>
	<select name="status" class="edit-mode form-control">
	{{#status}}
	<option value="{{value}}">{{text}}</option>
	{{/status}}
	</select>
	</td>
	<td>
	<a href="#" onclick="incidents.edit({{row}});" class="edit-i display-mode btn btn-default btn-sm" style="display:none;"><i class="fa fa-edit"></i> Edit</a>
	<a href="#" onclick="incidents.save({{row}});" class="save-i edit-mode btn btn-success btn-sm"><i class="fa fa-save"></i> Save</a>
	</td>
	</tr>
	<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js"></script>
	<script src="https://raw.githubusercontent.com/douglascrockford/JSON-js/master/json2.js"></script>
	<script id="incident" type="x-tmpl-mustache" src="incident.tmpl"></script>
	<script src="incidents.js"></script>
	</head>
	<body>
	<table id="incidents">
	<tbody></tbody>
	</table>
	</body>
	</html>
	$(document).ready(function(){

	function IncidentManager(){
	this.table = $('#incidents');
	this.template = $('#incident').html();
	this.init();
	}

	IncidentManager.prototype.init = function() {
	// cache the stash!!!
	Mustache.parse(this.template); // optional, speeds up future uses

	$(document).on("focus", '#incidents tr:last-child td:last-child', this.add.bind(this));

	// load your json data from server here and store in class variable
	this.severity = [
	{'text':'Ah whatever', 'value': '0'},
	{'text':'Ok worried', 'value': '44'},
	{'text':'Holy Fucknuts', 'value': '9999'}
	];
	this.status = [
	{'text':'Live', 'value': '1'},
	{'text':'On-Hold', 'value': '0'}
	];
	};

	IncidentManager.prototype.add = function(){
	var rows = this.table.find('tr').length;
	// Note: I am passing data to the stash to populate the select lists
	var incident = Mustache.render(this.template, { severity: this.severity, status: this.status });
	this.table.find('tbody').append(incident);

	if (rows>0)
	this.save(rows-1);
	};

	IncidentManager.prototype.edit = function(i) {
	this.toggle(i);
	return false;
	};

	IncidentManager.prototype.save = function(i) {
	var incident = {};
	var row = this.table.find('tr').eq(i);
	var id = row.attr('id').split('_')[1];
	row.find('td input, td select').each(function(){
	incident[$(this).attr('name')] = $(this).val();
	});

	// debug your incident json
	//alert(JSON.stringify(incident));

	if (id == 'new') {
	// $.post to add and return id
	//row.attr(id, 'incident_' + newId);
	}
	else {
	incident.id = parseInt(id);
	// $.post to update
	}

	this.toggle(i);

	// here you can
	/*
	$.post(
	'/DrillHoleUpdate/Save',
	{
	ID: dailyId,
	Drillhole: drillhole,
	RigId: rigId,
	AreaId: areaId,
	TargetInMeters_Low: targetLow,
	TargetInMeters_High: targetHigh,
	CurrentDepthInMeters: currentDepth,
	Highlights: highlights,
	DailyStatusId: dailyStatusId
	},
	*/
	};

	/* could create a method to toggle a row from edit / save */
	IncidentManager.prototype.toggle = function(i) {
	var row = this.table.find('tr').eq(i);
	row.find('.edit-i').toggle();
	row.find('.save-i').toggle();
	// any other toggling required?
	}

	var incidents = new IncidentManager();
	incidents.add(); // let's start with a row
	// we could also easily add incidents.load() to get existing incidents from db
	// and incidents.update() to actually update the incident if save is clicked

	// global so we can access the incidents api in the console
	window.incidents = incidents;
	});