如何通过将值传递给输入类型

时间:2016-02-13 22:41:58

标签: javascript jquery html css

我有一个表格,其中包含一些值,只要点击该行上的编辑按钮,该行上的所有值都会传递到相应的输入标签,以便对其进行编辑。

这是我的代码:

$(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 && JSON.parse(data);
  if (contactos == null)
    contactos = new Array();

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


}

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

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


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('<img id="imgFoto" src="' + reader.result +
        '" style="width:auto;height:160px;">');
    };

    reader.readAsDataURL(file);
    inputfile.val(img.src);
  } else {
    alert("Archivo no soportando!");
  }
}
.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);
}
<!DOCTYPE html>
<html lang="es">

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

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

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

</html>

如何使用jquery执行此操作,还是有更好的方法可以执行此操作?每当我点击 btnGuardar提交按钮时,如何更新表格而不必刷新页面以查看新添加的值?

3 个答案:

答案 0 :(得分:1)

该行从元素中获取文本并将其存储在变量y:
var y = document.getElementById('text id').innerHTML;

该行将存储在y变量中的值放在编辑框中:
document.getElementById('input text id').value = y;

这是一个有效的例子:

&#13;
&#13;
function edit(key) {
document.getElementById('p' + key).style.display = "none"; 
document.getElementById('input' + key).style.display = "initial";   
var yy  = document.getElementById('p' + key).innerHTML;
document.getElementById('input' + key).value = yy;
}

function save(key) {
document.getElementById('p' + key).style.display = "initial";
document.getElementById('input' + key).style.display = "none"; 
var xx = document.getElementById('input' + key).value;
document.getElementById('p' + key).innerHTML = xx; 
}
&#13;
*{
font-family: Arial, Helvetica, sans-serif;
}

p {
margin:0px;
}

input[type=text] {
  display:none;
  height:12px;
  width:40px;
}

table, th, td {
  border: 2px solid tomato;
  background:gold;
  border-collapse: collapse;
  margin:0px;
  padding:0px;
}
&#13;
<table>
<form id=formA>
<tr>
<td>
<p id=pA>value 1</p><input id=inputA type="text" name="A" value="value 1"></td><td><p id=pB>value 2</p><input id=inputB type="text" name="B" value="value 2">
</td>
</tr>  
<tr>
<td>
<button type="button" onclick="edit('A')">edit 1</button><button type="button" onclick="save('A')">save 1</button></td>
<td><button type="button" onclick="edit('B')">edit 2</button><button type="button" onclick="save('B')">save 2</button>
</td>
</tr>
<tr>
<td colspan=2>
<input type="submit" value="Submit" style="width:100%;">
</td>
</tr>
</form>
</table>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

这将是评论,但我还无法添加评论。

查看MVVM库可能是个好主意,例如:

如果您对MVVM的想法不熟悉,我建议您查看淘汰赛,虽然这可能是教程非常好的更复杂选项:http://learn.knockoutjs.com/

答案 2 :(得分:1)

这是我对这个问题的第二个答案。它具有与前面的答案相同的结构,但是这个结果同时拾取同一行(具有相同的类)的所有字段。

&#13;
&#13;
function edit(key) {
var x = document.getElementsByClassName("prow" + key);
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
}  
var x = document.getElementsByClassName("inputrow" + key);
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.display = "initial";
}
document.getElementById('inputA' + key ).value = document.getElementById('pA' + key ).innerHTML;  
document.getElementById('inputB' + key ).value = document.getElementById('pB' + key ).innerHTML;
document.getElementById('inputC' + key ).value = document.getElementById('pC' + key ).innerHTML;
}


function save(key) {
var x = document.getElementsByClassName("prow" + key);
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.display = "initial";
}  
var x = document.getElementsByClassName("inputrow" + key);
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
}
document.getElementById('pA' + key ).innerHTML = document.getElementById('inputA' + key ).value;
document.getElementById('pB' + key ).innerHTML = document.getElementById('inputB' + key ).value;
document.getElementById('pC' + key ).innerHTML = document.getElementById('inputC' + key ).value;
}
&#13;
*{
font-family: Arial, Helvetica, sans-serif;
}

p {
margin:0px;
}

input[type=text] {
  display:none;
  height:12px;
  width:45px;
}

table, th, td {
  border: 2px solid darkslategray ;
  background:darkseagreen ;
  border-collapse: collapse;
  margin:0px;
  padding:0px;
}
&#13;
<table>
<form id=formA>
<tr>
<td>
<p id=pA1 class=prow1>value 1</p><input id=inputA1 type="text" name="A" class=inputrow1 value="value 1"></td>
<td><p id=pB1 class=prow1>value 2</p><input id=inputB1 type="text" name="B" class=inputrow1 value="value 2">  
</td>
<td><p id=pC1 class=prow1>value 3</p><input id=inputC1 type="text" name="C" class=inputrow1 value="value 3">  
</td>
<td><button type="button" onclick="edit(1)">edit</button><button type="button" onclick="save(1)">save</button>
</td>
</tr>
  
<tr>
<td>
<p id=pA2 class=prow2>value 1</p><input id=inputA2 type="text" name="D" class=inputrow2 value="value 1"></td>
<td><p id=pB2 class=prow2>value 2</p><input id=inputB2 type="text" name="E" class=inputrow2 value="value 2">  
</td>
<td><p id=pC2 class=prow2>value 3</p><input id=inputC2 type="text" name="F" class=inputrow2 value="value 3">  
</td>
<td><button type="button" onclick="edit(2)">edit</button><button type="button" onclick="save(2)">save</button>
</td>
</tr>

<tr>
<td colspan=4>
<input type="submit" value="Submit" style="width:100%;">
</td>
</tr>
</form>
</table>
&#13;
&#13;
&#13;