Enter data in an HTML table using JavaScript jQuery

Question

Enter data in an HTML table using JavaScript jQuery

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

Hi, I am new to HTML and I need to perform the following exercise: given the following code, I need to implement javascript to be able to add the data to the table. Also, when you add one, you can delete it. Finally, you must count the number of records

<!DOCTYPE html>
<html>
<head>
	<title>
		Laboratorio 1
	</title>
	<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
	<script src="insertar.js" type="text/javascript"></script>
</head>
<body>

<form>
  <p>
  	<label>Entre su Nombre:</label> <br>		
  	<input id="nombre" type="text" value="Nombre..."><br>	
  </p>
  <p>
  	<label>Entre su Apellido:</label>	<br>	
  	<input id="apellido" type="text" value="Apellido..."><br>	
  </p>
  <p>
  	<label>Entre su C&eacute;dula:</label> <br>		
  	<input id="cedula" type="text" value="CI..."> <br>
  </p>
  <button id="adicionar" type="button">Adicionar a la tabla</button>
</form>

<p>Elementos en la Tabla: <div id="adicionados">0</div></p>
<table border="1">	
	<tr>
		<th>Nobmre</th>
		<th>Apellidos</th>
		<th>C&eacute;dula</th>
		<th>Eliminar</th>
		
	</tr>	
</table>


</body>
</html>

$(document).ready(function(){
	$('#adicionar').click(funtion(){
		entro
		agregar();
	});
});
var cont=0;
function agregar(){
var fila='<tr class="selected" id="fila'+cont+'"><td>'+cont+'</td><td>texto por defecto/td><td></td></tr>';
$('#adicionados').append(fila);
}

javascript jquery html formularios vscode

asked by V.Rocha 06.09.2017 в 23:59

source

2 answers

Problem with angular ng-repeat directive Know when to use the keywords new and override

score 3 · Answer 1

Here is what you are looking for, I hope to help you, if you have questions, please comment, this comment for you to study the code

  $(document).ready(function() {
//obtenemos el valor de los input

$('#adicionar').click(function() {
  var nombre = document.getElementById("nombre").value;
  var apellido = document.getElementById("apellido").value;
  var cedula = document.getElementById("cedula").value;
  var i = 1; //contador para asignar id al boton que borrara la fila
  var fila = '<tr id="row' + i + '"><td>' + nombre + '</td><td>' + apellido + '</td><td>' + cedula + '</td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">Quitar</button></td></tr>'; //esto seria lo que contendria la fila

  i++;

  $('#mytable tr:first').after(fila);
    $("#adicionados").text(""); //esta instruccion limpia el div adicioandos para que no se vayan acumulando
    var nFilas = $("#mytable tr").length;
    $("#adicionados").append(nFilas - 1);
    //le resto 1 para no contar la fila del header
    document.getElementById("apellido").value ="";
    document.getElementById("cedula").value = "";
    document.getElementById("nombre").value = "";
    document.getElementById("nombre").focus();
  });
$(document).on('click', '.btn_remove', function() {
  var button_id = $(this).attr("id");
    //cuando da click obtenemos el id del boton
    $('#row' + button_id + '').remove(); //borra la fila
    //limpia el para que vuelva a contar las filas de la tabla
    $("#adicionados").text("");
    var nFilas = $("#mytable tr").length;
    $("#adicionados").append(nFilas - 1);
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <form>
   <div class="form-group">
    <p>
      <label>Entre su Nombre:</label> <br>
      <input id="nombre" class="form-control" type="text" placeholder="Nombre..."><br>
    </p>
    <p>
      <label>Entre su Apellido:</label> <br>
      <input id="apellido" class="form-control" type="text" placeholder="Apellido..."><br>
    </p>
    <p>
      <label>Entre su C&eacute;dula:</label> <br>
      <input id="cedula" class="form-control" type="text" placeholder="Cedúla"> <br>
    </p>
    <button id="adicionar" class="btn btn-success" type="button">Adicionar a la tabla</button>
  </div>
</form>

<p>Elementos en la Tabla:
  <div id="adicionados"></div>
</p>
<table  id="mytable" class="table table-bordered table-hover ">
  <tr>
    <th>Nobmre</th>
    <th>Apellidos</th>
    <th>C&eacute;dula</th>
    <th>Eliminar</th>

  </tr>
</table>

</div>

score 1 · Answer 2

function guardar(){
   
    var _nom = document.getElementById("nom").value;
    var _ape = document.getElementById("ape").value;
    var _ced = document.getElementById("ced").value;

    var fila="<tr><td>"+_nom+"</td><td>"+_ape +"</td><td>"+_ced +"</td></tr>";

    var btn = document.createElement("TR");
   	btn.innerHTML=fila;
    document.getElementById("tablita").appendChild(btn);
}

        table{
            border-collapse: collapse;
        }
        table, td, th {
            border: 2px solid orange;
            padding:20px;
        }
        button{
            color:white;
            font-weight:bold;
            background-color:orange;
            width:100px;
            height:25px;
            font-size:15px;
        }

 Nombre: <input id="nom" style="margin:10px" type="text"><br><br>
        Apellido:<input id="ape" style="margin:4px" type="text"><br><br>
        Cedula: <input id="ced" style="margin:20px" type="text"><br><br>
        <button id="btn_guardar" onclick="guardar()">Guardar</button><br><br>

        <table >
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Apellido</th>
                    <th>Cedula</th>
                </tr>
            </thead>
            <tbody id="tablita">

            </tbody>
        </table>

You must work with the CreateElement () method;