Save the values in the table

Question

Save the values in the table

Navigation

#1 by (1 votes)

0

I need your help, I'm new to this JavaScript. My table creates new rows and inside it I can add the data, only that what I want is that the added fields are "saved" (so to speak) each time I add a new row. When I save I mean that the fields already appear in the table but that they can no longer be edited. This is an example code that I got:

$(document).ready(function() {
  $('#bt_add').click(function() {
    agregar();
  });
  $('#bt_del').click(function() {
    eliminar(id_fila_selected);
  });

  $('#bt_delall').click(function() {
    eliminarTodasFilas();

  });


});
var cont = 0;
var id_fila_selected = [];

function agregar() {
  cont++;
  var fila =

    '<tr class="selected" id="fila' + cont + '" onclick="seleccionar(this.id);"><td>&nbsp;</td>' +

    '<td><input type="text" id="nombre"></td>' +

    '<td><input type="text" id="area"></td>' +

    '<td><input type="text" id="puesto"></td>' +

    '<td><input type="text" id="email"></td></tr>';


  $('#tabla').append(fila);
  reordenar();
}

function seleccionar(id_fila) {
  if ($('#' + id_fila).hasClass('seleccionada')) {
    $('#' + id_fila).removeClass('seleccionada');
  } else {
    $('#' + id_fila).addClass('seleccionada');
  }
  //2702id_fila_selected=id_fila;
  id_fila_selected.push(id_fila);
}

function eliminar(id_fila) {
  /*$('#'+id_fila).remove();
  reordenar();*/
  for (var i = 0; i < id_fila.length; i++) {
    $('#' + id_fila[i]).remove();
  }
  reordenar();
}

function reordenar() {
  var num = 1;
  $('#tabla tbody tr').each(function() {
    $(this).find('td').eq(0).text(num);
    num++;
  });
}

function eliminarTodasFilas() {
  $('#tabla tbody tr').each(function() {
    $(this).remove();
  });

}

#content {
  position: absolute;
  min-height: 50%;
  width: 80%;
  top: 20%;
  left: 5%;
}

.selected {
  cursor: pointer;
}

.selected:hover {
  background-color: #0585C0;
}

.seleccionada {
  background-color: #0585C0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div id="content">
  <label> Tabla de Ejemplo </label>
  <br>
  <button id="bt_add" class="btn btn-default">Agregar</button>
  <button id="bt_del" class="btn btn-default">Eliminar</button>
  <button id="bt_delall" class="btn btn-default">Eliminar todo</button>

  <table id="tabla" class="table table-bordered">
    <thead>
      <tr>
        <td>Nº</td>
        <td>NOMBRE</td>
        <td>AREA</td>
        <td>PUESTO</td>
        <td>EMAIL</td>
      </tr>
    </thead>
  </table>
</div>

javascript

asked by Reinos Ric 17.07.2017 в 20:54

source

1 answer

NULL value when passing data json file to php Modify queries made by the scaffolding first database

score 1 · Accepted Answer

What you need is to add what you have written in the table as text. For this, you can put a listener for the event keyup in the last text box, to proceed to save what is entered in the table when an Enter is detected.

Example

$(document).ready(function() {
  $('#bt_add').click(function() {
    agregar();
  });
  $('#bt_del').click(function() {
    eliminar(id_fila_selected);
  });

  $('#bt_delall').click(function() {
    eliminarTodasFilas();

  });


});
var cont = 0;
var id_fila_selected = [];

function agregar() {
  cont++;
  var fila =

    '<tr class="selected" id="fila' + cont + '" onclick="seleccionar(this.id);"><td>&nbsp;</td>' +

    '<td><input type="text" id="nombre"></td>' +

    '<td><input type="text" id="area"></td>' +

    '<td><input type="text" id="puesto"></td>' +

    '<td><input type="text" id="email" onkeyup="addToTable(event)"></td></tr>';


  $('#tabla').append(fila);
  reordenar();
}

/*
 * Esta función agrega lo ingresado a la tabla
 */
function addToTable(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    const row = e.target.parentNode.parentNode;
    const inputs = row.querySelectorAll('input');
    const values = [].map.call(inputs, input => input.value);
    const tds = row.querySelectorAll('td');
    [].forEach.call(tds, (td, i) => {
      if (i === 0) { td.textContent = i + 1; }
      else { td.innerHTML = values[i - 1]; }
    });
  }
}

function seleccionar(id_fila) {
  if ($('#' + id_fila).hasClass('seleccionada')) {
    $('#' + id_fila).removeClass('seleccionada');
  } else {
    $('#' + id_fila).addClass('seleccionada');
  }
  //2702id_fila_selected=id_fila;
  id_fila_selected.push(id_fila);
}

function eliminar(id_fila) {
  /*$('#'+id_fila).remove();
  reordenar();*/
  for (var i = 0; i < id_fila.length; i++) {
    $('#' + id_fila[i]).remove();
  }
  reordenar();
}

function reordenar() {
  var num = 1;
  $('#tabla tbody tr').each(function() {
    $(this).find('td').eq(0).text(num);
    num++;
  });
}

function eliminarTodasFilas() {
  $('#tabla tbody tr').each(function() {
    $(this).remove();
  });

}

#content {
  position: absolute;
  min-height: 50%;
  width: 80%;
  top: 20%;
  left: 5%;
}

.selected {
  cursor: pointer;
}

.selected:hover {
  background-color: #0585C0;
}

.seleccionada {
  background-color: #0585C0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div id="content">
  <label> Tabla de Ejemplo </label>
  <br>
  <button id="bt_add" class="btn btn-default">Agregar</button>
  <button id="bt_del" class="btn btn-default">Eliminar</button>
  <button id="bt_delall" class="btn btn-default">Eliminar todo</button>

  <table id="tabla" class="table table-bordered">
    <thead>
      <tr>
        <td>Nº</td>
        <td>NOMBRE</td>
        <td>AREA</td>
        <td>PUESTO</td>
        <td>EMAIL</td>
      </tr>
    </thead>
  </table>
</div>