HTML table cell value

Question

HTML table cell value

Navigation

#1 by (3 votes)

0

I have a function that creates a row within a table html , inside one of the cells in the row I have an element of type input of which I want to obtain the assigned value, I do it in the following way:

function añadirDetalle(){
    if (document.getElementById("prod_cod").value!=="" &&
            document.getElementById("cant").value!=="" &&
            document.getElementById("prod_nom").value!=="" &&
            document.getElementById("costoUnitario").value!=="") {
        ingresarDetalle();
        var table = document.getElementById("tabProd");
        var row = document.createElement("tr");
        row.addEventListener('click',pressfila,true);
        var columna1=document.createElement("td");
        var celda1 = document.createElement("label");
        var columna2=document.createElement("td");
        var celda2 = document.createElement("label");
        var columna3=document.createElement("td");
        var celda3 = document.createElement("input");

        celda3.addEventListener('blur',cambiaCantidad,true);

        var columna4=document.createElement("td");
        var celda4 = document.createElement("label");
        var columna5=document.createElement("td");
        var celda5 = document.createElement("label");
        var columna6=document.createElement("td");
        var celda6 = document.createElement("select");
        celda6.setAttribute("class","form-control");
        celda1.innerHTML = document.getElementById("prod_cod").value;
        celda2.innerHTML = document.getElementById("prod_nom").value;
        celda3.value = document.getElementById("cant").value;
        celda3.setAttribute('value',document.getElementById("cant").value);
        celda4.innerHTML = document.getElementById("costoUnitario").value;
        var valunit=document.getElementById("costoUnitario").value*document.getElementById("cant").value;
        valorTotal=valorTotal+valunit;
        var valunitdecimal=valunit.toFixed(2);
        celda5.innerHTML = valunitdecimal.toString();
        columna1.appendChild(celda1);
        columna2.appendChild(celda2);
        columna3.appendChild(celda3);
        columna4.appendChild(celda4);
        columna5.appendChild(celda5);
        columna6.appendChild(celda6);
        row.appendChild(columna1);
        row.appendChild(columna2);
        row.appendChild(columna6);
        row.appendChild(columna3);
        row.appendChild(columna4);
        row.appendChild(columna5);

        table.appendChild(row);

}

The following function is responsible for modifying the total value of the total column, but I can not get the value of input of that cell, I also tried it with innerText e innerHTML but I can not get the value either

function cambiaCantidad(){
        var cantidadaNueva=document.getElementById("tabProd").rows[indice_fila_tabla].cells[3].value;
        var valorUnitario=document.getElementById("tabProd").rows[indice_fila_tabla].cells[4].innerText;
        document.getElementById("tabProd").rows[indice_fila_tabla].cells[5].innerHTML=cantidadaNueva*valorUnitario;       
    }

javascript html

asked by Leo T 04.12.2017 в 22:19

source

1 answer

How to filter data from an array of objects using RegExp? what does this syntax mean?

score 3 · Accepted Answer

All you have to do is select as input the one that is inside your <td> , when you do this

var cantidadaNueva=document.getElementById("tabProd").rows[indice_fila_tabla].cells[3].value;

You are trying to capture the value of your <td> which is not right, then you should do the following:

var td = document.getElementById("tabProd").rows[0].cells[3]; //Primero seleccionar el <td>
var valor_input = td.getElementsByTagName('input')[0].value; // Luego seleccionar el valor del <input> perteneciente a ese <td>

I leave you this small functional example of the logic that I have implemented

function ejemplo(){

    var td = document.getElementById("tabProd").rows[0].cells[3];
    var valor_input = td.getElementsByTagName('input')[0].value;

    console.log(valor_input);
}

ejemplo();

<table id="tabProd">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td><input type="" name="" value="4"></td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
    </tbody>
</table>