get input value in an HTML table that is generated dynamically?

Question

get input value in an HTML table that is generated dynamically?

Navigation

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

1

I have an HTML table that dynamically filled with a table of a BD, to each row that returns I add an input text to add certain information for each row, one row has nothing to do with the others, now it has I have placed a different name for each input of the table, when I position myself in the input of a row, I should get an id that is painted in the table to validate that information with ajax, the problem I have is that I have the code to obtain that value but only by placing the id of the specific input and not in a general way for any input that I select, how can I do that JS function so that I can get that value for any input?

<script>
    $(document).ready(function () {
        //El id de los input comienza con numeroFac-0, numeroFac-1...
        $('#numeroFac-0').on('focus', function () {
            var hola = $(this).parent().parent();
            hola.children().each(function () {
                var celdas = hola.children();
                $('#txtNombre').val($(celdas[0]).text());
                $('#test').val($(celdas[1]).text());
                $('#txtFechaa').val($(celdas[3]).text());
            });
        });
    });
</script>

this is my table or the html

<table class="table table-striped table-condensed">
            <thead>
                <tr>
                    <th><i class="glyphicon glyphicon-asterisk"></i> Cliente</th>                    
                    <th><i class="glyphicon glyphicon-user"></i> Nombre</th>
                    <th style="text-align:center"><i class="glyphicon glyphicon-info-sign"></i> Total compras</th>
                    <th style="text-align:center"><i class="glyphicon glyphicon-info-sign"></i> Total a comisionar</th>                    
                    <th style="text-align:center"><i class="glyphicon glyphicon-info-sign"></i> Alcance %</th>
                    <th><i class="glyphicon glyphicon-info-sign"></i> Monto $</th>
                    <th><i class="glyphicon glyphicon-info-sign"></i> Concepto</th>
                    <th><i class="glyphicon glyphicon-info-sign"></i> Ingresar Factura</th>
            </thead>
            <tbody>

                @Code If consultaComisiones.Count > 0 Then End Code
                
                @Code For Each item1 In consultaComisiones End Code
                        
                    <tr>
                        
                        @Code If item1("Alcance") >= "80" And (item1("NIVEL_PRECIO") = "DAF B" Or item1("NIVEL_PRECIO") = "DAF C") Then End Code
                           
                        <td>@item1("Cliente") <input type="text" id="numeroCliente" name="numeroCliente" value="@item1("Cliente")" /></td> 
                        <td>@item1("Nombre") <input type="text" id="nombreCliente" name="nombreCliente" value="@item1("Nombre")" /></td>                        
                        <td style="text-align:center">@item1("total_compras") <input type="text" id="totalCompras" name="totalCompras" value="@item1("total_compras")" /> </td>
                        <td style="text-align:center">@item1("total_parad") <input type="text" id="totalComisionar" name="totalComisionar" value="@item1("total_parad")" /> </td>
                        <td style="text-align:center">@item1("Alcance") % <input type="text" id="alcance" name="alcance" value="@item1("Alcance")" /> </td>
                        <td>@Format(item1("Monto"),"C") <input type="text" id="monto" name="monto" value="@item1("Monto")" /> </td>
                        <td>Permanencia Amigo Chip 60 Dias(@item1("MES") @item1("ANIO"))@item1("total_parad") -lineas <input type="text" id="concepto" name="concepto" value="Permanencia Amigo Chip 60 Dias(@item1("MES") @item1("ANIO"))@item1("total_parad") -lineas" /> </td>                          
                        <td><input type="text" id="numeroFactura-@i"   /></td>    
                         @Code   i = i + 1
                              End If End Code                
                                        
                    </tr>

                  @Code Next End Code
                    <tr>                        
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td><center><button type="button" id="btnGuardar" class="btn btn-success"><span class="glyphicon glyphicon-floppy-disk"></span> Guardar</button></center></td>
                    </tr>
                
               @Code Else End Code
                    <tr>                        
                        <td colspan="8" >
                           <span style="color:red"><i class="glyphicon glyphicon-remove"></i> No existen resultados con los parametros de búsqueda que elegiste... </span>
                        </td>
                    </tr>                    
              @Code End If End Code
            </tbody>                
        </table>
        </form>
        <span class="text-success">Registros encontrados.: <span class="badge">@i</span></span>
        <div id="resultados" ></div>

javascript jquery html

asked by Ivxn 26.05.2016 в 20:52

source

3 answers

1

For what you indicate in the code, it seems that what you want is to apply the event handler to input whose id starts with numeroFac- (eg: numberFac-0, numberFac-1, numberFac-2 .. .) instead of all input .

For this you can use a selector only for the id's that start with a specific string, the format would be the following: [atributo^='valor'] . That will select all the elements whose attribute starts with the value string. In your case you want to select the input whose id starts with numberFac-, so what you would do would be something like this: input[id^='numeroFac-'] . That in your code would be like this:

<script>
    $(document).ready(function () {
        //El id de los input comienza con numeroFac-0, numeroFac-1...
        $("input[id^='numeroFac-']").on('focus', function () {
            var hola = $(this).parent().parent();
            hola.children().each(function () {
                var celdas = hola.children();
                $('#txtNombre').val($(celdas[0]).text());
                $('#test').val($(celdas[1]).text());
                $('#txtFechaa').val($(celdas[3]).text());
            });
        });
    });
</script>

answered by 27.05.2016 в 05:51

0

You must use

the following code

$ (this) .closest ('table'). attr ('id')

closest

This method will be used when we need to obtain a specific object (in this case the information of a table, then with attr we will look for the attribute "id"

Clear that this code worked within each ()

Greetings.

answered by 26.05.2016 в 23:34

Because in php you can directly access the variables sent in an object from ajax Processing of input file in PHP

score 2 · Accepted Answer

Here is an example.

var a = document.querySelectorAll("input");
for(var b in a){
  var c = a[b];
if(typeof c=="object"){
  c.onclick = function (){
     console.log(this.id);
  }
}
}

<table>
<tbody>
<tr><td><input id="uno" value="a" /></td></tr>
<tr><td><input id="dos" value="b" /></td></tr>
<tr><td><input id="tres" value="c" /></td></tr>
</tbody>
</table>