Вопросы Теги

добавлять значения к пластине с javascript

Хорошие, я пробую класть значения в пластину. Любого формуляра. Идея состоит в том, чтобы Вы были значением, который положенный в inputs, в момент давания охранять, эти данные переместили в маленькую пластину. Поскольку Вы могли бы делать это с javascript. Это - то, что у меня есть:

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>

Спасибо заранее.

1
задан 16.10.2016, 04:18
3 ответа

ResolvГ - мое сомнение. 

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>

Только был должен работать с mГ©todo CreateElement ();

3
ответ дан 24.11.2019, 13:05
  • 1
    Tambi и # 233; n возможно делать без этого funci и # 243; n, посредством string. document.innerHTML="<tr></tr>", но правильный способ - используя createElement. –  ArtEze 17.10.2016, 02:40

Размести id "tablita" в этикетке tbody 

  <table>
        <thead>
            <tr>
                <th>Nombre</th>
                <th>Categoria</th>
                <th>Precio</th>
                <th>Stock</th>
            </tr>
        </thead>
        <tbody id="tablita">
        </tbody>
    </table>
1
ответ дан 24.11.2019, 13:05

Если он не хочет изменить так Ваш cГіdigo продолжать совет от @Andres Кастильцы, aГ±adir этикетка tbody идентификация, которая обладает Вашей таблицей 

<tbody id="tablita">

, Если он хочет протестировать JQuery serГ - в asГ, - используя After 

  var fila='<tr><td> ' +_nom+'</td><td>'+_cat+'</td><td>'+_precio+
           '</td><td>'+_stock + '</td></tr>';
  $('#tablita tr:last').after(fila);
1
ответ дан 24.11.2019, 13:05
  • 1
    я считал JQUERY, но идея состоит в том, чтобы изучать больше на чистом Javascript. Они сказали мне, что Jquery может приучать меня плохо.:/ –  Raphael 16.10.2016, 04:20
  • 2
    Верно, что нужно изучать первого Javascript и добро. но JQuery продолжает быть opci и # 243; n всегда:) –  Dev. Joel 16.10.2016, 04:26