add values to a table with javascript

Question

add values to a table with javascript

Navigation

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

1

Good, I'm trying to enter values into a table. From any form. The idea is that it is the value that was entered in the inputs, at the time of saving, this data is transferred to a small table. How could I do it with javascript? This is what I have:

function guardar(){
   
    var _nom = document.getElementById("nomb").value;
    var _cat = document.getElementById("cat").value;
    var _precio = document.getElementById("precio").value;
    var _stock = document.getElementById("stock").value;
    // if(_nom.trim()==''){
    //     alert("Ingrese nombre del producto");
    // }
    // if(_cat.trim()==''){
    //     alert("Ingrese categoria del producto");

    // }
    // if(_precio.trim()==''){
    //     alert("Ingrese precio del producto");
        
    // }
    // if(_stock.trim()==''){
    //     alert("Ingrese stock del producto");
        
    // }

    var fila="<tr><td>"+_nom+"</td><td>"+_cat+"</td><td>"+_precio+"</td><td>"+_stock+"</td></tr>";

    document.getElementById("tablita").innerHTML = fila;
}

        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="nomb" style="margin:10px" type="text"><br><br>
        Categoria:<input id="cat" style="margin:4px" type="text"><br><br>
        Precio: <input id="precio" style="margin:20px" type="text"><br><br>
        Stock: <input id="stock" style="margin:25px" type="text"><br><br>
        <button id="btn_guardar" onclick="guardar()">Guardar</button><br><br>

        <table >
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Categoria</th>
                    <th>Precio</th>
                    <th>Stock</th>
                </tr>
            </thead>
            <tbody id="tablita">

            </tbody>
        </table>

Thanks in advance.

javascript

asked by Raphael 16.10.2016 в 02:55

source

4 answers

1

Place the id "tablita" on the tbody tag

  <table>
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Categoria</th>
                <th>Precio</th>
                <th>Stock</th>
            </tr>
        </thead>
        <tbody id="tablita">
        </tbody>
    </table>

answered by 16.10.2016 в 03:10

1

If you do not want to modify your code so much, follow the advice of @Andres Castellanos, add the tag tbody the ID that your table has

<tbody id="tablita">

If you want to try JQuery it would be like that, using After

  var fila='<tr><td> ' +_nom+'</td><td>'+_cat+'</td><td>'+_precio+
           '</td><td>'+_stock + '</td></tr>';
  $('#tablita tr:last').after(fila);

answered by 16.10.2016 в 03:19

0

Thanks for the contribution. I made my own version and I share it with you. Greetings.

var names=document.getElementsByName('name[]');

function InsertIntoTable()
{
  var TableRow="<tr></tr>";
	for(key=0; key < names.length; key++)
    TableRow = TableRow.substring(0,TableRow.length-5) + "<td>" + names[key].value + "</td>" + TableRow.substring(TableRow.length-5);

  var TrElement = document.createElement("tr");
	TrElement.innerHTML = TableRow;
	document.getElementById("TableBody").appendChild(TrElement);
}

<body>
  <input type="text" name="name[]" id="TextId">
  <input type="text" name="name[]" id="TextName">
  <input type="text" name="name[]" id="TextSurname">
  <input type="text" name="name[]" id="TextAge">
  <input type="button" value="Insert" onclick="InsertIntoTable()">
  </br>
  <table>
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Surname</th>
        <th>Age</th>
       </tr>
     </thead>
     <tbody id="TableBody">
     </tbody>
   </table>
</body>

    var names=document.getElementsByName('name[]');

    function InsertIntoTable()
    {
        var TableRow="<tr></tr>";

        for(key=0; key < names.length; key++)
            TableRow = TableRow.substring(0,TableRow.length-5) + "<td>" + names[key].value + "</td>" + TableRow.substring(TableRow.length-5);

        var TrElement = document.createElement("tr");
        TrElement.innerHTML = TableRow;
        document.getElementById("TableBody").appendChild(TrElement);
    }

answered by 20.11.2017 в 22:52

Order of parameters. PHP [closed] validate telephone numbers in c #

score 2 · Accepted Answer

I solved my doubt.

function guardar(){
   
    var _nom = document.getElementById("nomb").value;
    var _cat = document.getElementById("cat").value;
    var _precio = document.getElementById("precio").value;
    var _stock = document.getElementById("stock").value;

    var fila="<tr><td>"+_nom+"</td><td>"+_cat+"</td><td>"+_precio+"</td><td>"+_stock+"</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="nomb" style="margin:10px" type="text"><br><br>
        Categoria:<input id="cat" style="margin:4px" type="text"><br><br>
        Precio: <input id="precio" style="margin:20px" type="text"><br><br>
        Stock: <input id="stock" style="margin:25px" type="text"><br><br>
        <button id="btn_guardar" onclick="guardar()">Guardar</button><br><br>

        <table >
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Categoria</th>
                    <th>Precio</th>
                    <th>Stock</th>
                </tr>
            </thead>
            <tbody id="tablita">

            </tbody>
        </table>

I just had to work with the CreateElement () method;