How to edit html table values by passing values to input type
<p>I have a <strong>table</strong> that has some values that whenever the <strong>edit</strong> button on that row gets clicked all of the values on that row get passed to the corresponding <strong>input</strong> tags so they can be edited.</p>

<p>This is my code:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {

  //"use strict";
  cargarDatos();


  $('#frmContacto').submit(function(event) {
    event.preventDefault(); //Bloqueo de comportamiento por defecto de formulario
    guardarDatos();
    cargarDatos();
  });

  $('input').on('blur', function() {
    $(this).addClass('marcado');
    //alert(this.value);
  });

  $('.btnEditar').on('click', function(event) {
    event.preventDefault(); 

    //Here is where I call a function that is supposed to pass values to the inputs on my html page so I could update the values

  });

  $('#inputFoto').on('change', function(e) {
    precargarImagen(this);
  });

  $(window).load(function() {
    $(document).ready($('#efecto1').addClass('animacion1'));
    // $(document).ready($('#efecto2').addClass('animacion1'));
    // cargarDatos();
  });

});

/*jshint latedef:false */
function guardarDatos() {
  name = $('#inputNombre').val();
  direccion = $('#inputDireccion').val();
  telefono = $('#inputTelefono').val();
  fecha = $('#inputFecha').val();
  email = $('#inputEmail').val();
  color = $('#inputColor').val();
  dataFoto = $("#imgFoto").attr("src");
  /*alert("Sus datos son: \n" + nombre + "\n" 
   + direccion + "\n" + telefono + "\n" 
   + fecha + "\n" + email+ "\n" + color);*/

  contacto = {
    nombre: name,
    direccion: direccion,
    telefono: telefono,
    fecha: fecha,
    email: email,
    color: color,
    foto: dataFoto
  };

  contactos.push(contacto);
  console.log(JSON.stringify(contactos));

  localStorage.setItem('lstcontactos2', JSON.stringify(contactos));

}

/*jshint latedef:false */
function cargarDatos() {

  var data = localStorage.getItem('lstcontactos2');
  contactos = data &amp;&amp; JSON.parse(data);
  if (contactos == null)
    contactos = new Array();

  $('#tablaContactos').bootstrapTable({
    data: contactos
  });


}

function btnEditar(value) {
  console.log("valueformat " + value);
  return '&lt;a href="#' + value + '" class="btn btn-default btnEditar"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;&lt;/a&gt;';
}

function imgFoto(value) {
  return '&lt;img id="imgFoto" src="' + value +
    '" style="width:auto;height:160px;"&gt;';
}


function precargarImagen(inputfile) {
  var file = inputfile.files[0];
  var imageType = /image.*/;

  if (file.type.match(imageType)) {
    var reader = new FileReader();

    reader.onload = function(e) {
      var img = new Image();
      img.src = reader.result;
      $(".file-caption-name").html(file.name);
      $(".file-preview-frame").empty();
      $(".file-preview-frame").
      append('&lt;img id="imgFoto" src="' + reader.result +
        '" style="width:auto;height:160px;"&gt;');
    };

    reader.readAsDataURL(file);
    inputfile.val(img.src);
  } else {
    alert("Archivo no soportando!");
  }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.marcado {
    color: #ff0000;
    border: 1px solid #0000ff;
}
.desmarcado {
    color: #00000;
    border: 0;
}


.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    text-align: right;
    opacity: 0;
    filter: alpha(opacity=0);
    opacity: 0;
    background: none repeat scroll 0 0 transparent;
    cursor: inherit;
    display: block;
}
.file-preview-frame {
    display: table;
    margin: 8px;
    height: 160px;
    width: 160px;
    border: 1px solid #ddd;
    box-shadow: 1px 1px 5px 0px #a2958a;
    padding: 6px;
    float: left;
    text-align: center;
    vertical-align: middle;
    transition: all .4s ease-in-out;
}
.file-preview-frame:hover {
    box-shadow: 3px 3px 5px 0px #333;
    cursor: pointer;
    background-size: 150% 150%;
    transform: scale(2.2);
}

/* Shrink */

.hvr-shrink {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}
.hvr-shrink:hover,
.hvr-shrink:focus,
.hvr-shrink:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="es"&gt;

&lt;head&gt;
  &lt;meta charset=utf-8&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge" /&gt;
  &lt;title&gt;Contactos&lt;/title&gt;
  &lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" /&gt;
  &lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" /&gt;
  &lt;link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.css"&gt;
  &lt;link rel="stylesheet" href="estilos.css" /&gt;
  &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/locale/bootstrap-table-es-AR.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div class="container"&gt;
    &lt;h1&gt;Contactos personales&lt;/h1&gt;
    &lt;nav class="navbar navbar-inverse"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;a class="navbar-brand" href="#"&gt;Listado&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;div class="row show-grid"&gt;
      &lt;div class="animacion1"&gt;
        &lt;div class="col-sm-6"&gt;
          &lt;table id="tablaContactos" class="table table-hover" data-toggle="table" data-search="true" data-row-style="rowStyle" data-show-refresh="true" data-show-toggle="true" data-show-columns="true"&gt;
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th data-field="nombre" data-sortable="true"&gt;Nombre&lt;/th&gt;
                &lt;th data-field="direccion" data-sortable="true"&gt;Dirección&lt;/th&gt;
                &lt;th data-field="email" data-sortable="true"&gt;Email&lt;/th&gt;
                &lt;th data-field="fecha" data-sortable="true"&gt;Fecha&lt;/th&gt;
                &lt;th data-field="telefono" data-sortable="true" data-visible="false"&gt;Telefono&lt;/th&gt;
                &lt;th data-field="color" data-sortable="false" data-visible="false"&gt;Color&lt;/th&gt;
                &lt;th data-field="foto" data-sortable="false" data-formatter="imgFoto"&gt;Foto&lt;/th&gt;
                &lt;th data-field="email" data-formatter="btnEditar"&gt;&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6"&gt;
        &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;Agregar/editar contacto&lt;/div&gt;
          &lt;div class="panel-body"&gt;
            &lt;form class="form-horizontal" id="frmContacto"&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="inputFoto" class="col-sm-2 control-label"&gt;Foto&lt;/label&gt;
                &lt;div class="col-sm-10"&gt;
                  &lt;div class="file-preview-frame"&gt;
                    &lt;img src="" style="width:auto;height:160px;"&gt;
                  &lt;/div&gt;
                  &lt;input type="file" class="form-control file" id="inputFoto" data-show-upload="false" required="true"&gt;
                &lt;/div&gt;
              &lt;/div&gt;

              &lt;div class="form-group"&gt;
                &lt;label for="inputNombre" class="col-sm-2 control-label"&gt;Nombre&lt;/label&gt;
                &lt;div class="col-sm-10"&gt;
                  &lt;input type="text" class="form-control" id="inputNombre" placeholder="Ingrese nombre" required&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="inputDireccion" class="col-sm-2 control-label"&gt;Dirección&lt;/label&gt;
                &lt;div class="col-sm-10"&gt;
                  &lt;input type="text" class="form-control" id="inputDireccion" required placeholder="Ingrese dirección personal"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="inputTelefono" class="col-sm-2 control-label"&gt;Telefono&lt;/label&gt;
                &lt;div class="col-sm-10"&gt;
                  &lt;input type="number" class="form-control" id="inputTelefono" placeholder="Ingrese # telefónico" required&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="inputEmail" class="col-sm-2 control-label"&gt;Email&lt;/label&gt;
                &lt;div class="col-sm-10"&gt;
                  &lt;input type="email" class="form-control" id="inputEmail" placeholder="Ingrese Email" required&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="inputFecha" class="col-sm-2 control-label"&gt;Fecha de nacimiento&lt;/label&gt;
                &lt;div class="col-sm-10"&gt;
                  &lt;input type="date" class="form-control" id="inputFecha" placeholder="Ingrese su fecha de nacimiento" required&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="inputColor" class="col-sm-2 control-label"&gt;Color favorito&lt;/label&gt;
                &lt;div class="col-sm-10"&gt;
                  &lt;input type="color" class="form-control" id="inputColor"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="inputURL" class="col-sm-2 control-label"&gt;Página Web&lt;/label&gt;
                &lt;div class="col-sm-10"&gt;
                  &lt;input type="url" class="form-control" id="inputURL" placeholder="Ingrese su página web"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;div class="col-sm-offset-2 col-sm-10"&gt;
                  &lt;button type="submit" class="btn btn-primary" id="btnGuardar"&gt;Guardar OK&lt;/button&gt;
                  &lt;button type="button" class="btn btn-default"&gt;Cancelar&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>How can I do this with jquery or is there a better way of doing this? and also whenever I click the <strong>btnGuardar submit button</strong> how can I update table without having to refresh the page to see the new added values?</p>