Send element tr created dynamically to a function and in it, get the values of the input in the td

Question

I have a table to which I am adding records as follows

    var rowCount = document.getElementById('tblParteDiario').rows.length;

var row = '<tr>' +
    '   <td class="div-table-cell" style="width:8%;text-align:left; font-size=small">' + //0 = Chofer
    '       <input style="width:100%" class="form-control txtChoferAutocomplete' + rowCount + ' " placeholder = "Búsqueda" /> ' +
    '       <input class="txtChoferlID' + rowCount + ' " type="hidden" /> ' +
    '   </td> ' +
    '   <td class="div-table-cell" style="width:5%;text-align:left; font-size=small">' + //1 = Desde
    '        <input type="text"  id="horaDesde" class="timepickerD form-control txtDesde' + rowCount +'"/> ' +
    '   </td> ' +
    '   <td class="div-table-cell" style="width:5%;text-align:left; font-size=small">' + //2 = Hasta
    '        <input type="text" id="horaHasta" onBlur="testFunction(this.parentNode.parentNode);" class="timepickerH form-control txtHasta' + rowCount + '"/> ' +
    '   </td> ' +
    '   <td class="div-table-cell" style="width:3%;text-align:left; font-size=small">' + //3 = TiempoTranscurrido 
    '        <input type="text" class="form-control txtTranscurrido' + rowCount + '"/> ' +
    '   </td> ' +
    '   <td class="div-table-cell" style="width:8%;text-align:left; font-size=small">' + //4 = Pozo
    '       <input style="width:100%" class="form-control txtPozoAutocomplete' + rowCount + ' " placeholder = "Búsqueda" /> ' +
    '       <input class="txtPozolID' + rowCount + ' " type="hidden" /> ' +
    '   </td> ' +
    '</tr>';

$("#tblParteDiario").append(row);

In the input of the column "2 = Hasta" I have specified that in the onBlur call a function and it receives the element tr, well, that works. How do I get the value of the inputs that are in the td 1 and 3, for example and in the case of the column "4 = Pozo" how do I get the value of the first input within the td

I leave the function that receives the tr with one of the many attempts that made to achieve the objective. In this case, the log tells me that .find is not a valid function

function testFunction(element) {
element.find('td:eq(3) input').each(function () {
    task = this.value;
    console.log(task);
});}

Answer 1

You can easily do that with jquery. All you have to do is find the input with the class name that you have. for example for first td and first input we say in the function for the element that we have sent to find the input with class name txtChoferAutocomplete and then get the value for it.

Below is an example of every input. you can delete the ones that you dont want.

 function testFunction(element) { var txtChoferAutocomplete = $(element).find(".txtChoferAutocomplete").val(); var txtChoferlID = $(element).find(".txtChoferlID").val(); var txtDesde = $(element).find(".txtDesde").val(); var txtHasta = $(element).find(".txtHasta").val(); var txtTranscurrido = $(element).find(".txtTranscurrido").val(); var txtPozoAutocomplete = $(element).find(".txtPozoAutocomplete").val(); var txtPozolID = $(element).find(".txtPozolID").val(); console.log(txtChoferAutocomplete) console.log(txtChoferlID) console.log(txtDesde) console.log(txtHasta) console.log(txtTranscurrido) console.log(txtPozoAutocomplete) console.log(txtPozolID) } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td class="div-table-cell"> <input class="form-control txtChoferAutocomplete 10" placeholder="Búsqueda" /> <input class="txtChoferlID 10" type="hidden" /> </td> <td class="div-table-cell"> <input type="text" id="horaDesde" class="timepickerD form-control txtDesde 10"/> </td> <td class="div-table-cell"> <input type="text" id="horaHasta" onblur="testFunction(this.parentNode.parentNode);" class="timepickerH form-control txtHasta 10"/> </td> <td class="div-table-cell"> <input type="text" class="form-control txtTranscurrido 10"/> </td> <td class="div-table-cell"> <input class="form-control txtPozoAutocomplete 10" placeholder="Búsqueda" /> <input class="txtPozolID 10" type="hidden" /> </td> </tr> </table> 

Answer 2

You can do it with jQuery but you are creating table rows in HTML text and jQuery functions might not always work with text HTML content. They work properly with HTML DOM content. Your text HTML may not always be detected as HTML table row. So, I think find will not always work correctly in all browsers.

I have created the testFunction as given below. It requires to add the child class or id property of tr, td and input elements.

function testFunction(element){
    var eltbl = $(element).parent().parent().attr("id");

    var txtChoferAutocomplete = $("#"+eltbl+" .div-table-cell > .txtChoferAutocomplete0").val();
    var txtChoferlID = $("#"+eltbl+" .div-table-cell > .txtChoferlID0").val();
    var horaDesde = $("#"+eltbl+" .div-table-cell > #horaDesde").val();
    var horaHasta = $("#"+eltbl+" .div-table-cell > #horaHasta").val();
    var txtTranscurrido = $("#"+eltbl+" .div-table-cell > .txtTranscurrido0").val();
    var txtPozoAutocomplete = $("#"+eltbl+" .div-table-cell > .txtPozoAutocomplete0").val();
    var txtPozolID = $("#"+eltbl+" .div-table-cell > .txtPozolID0").val();


    console.log(txtChoferAutocomplete);
    console.log(txtChoferlID);
    console.log(horaDesde);
    console.log(horaHasta);
    console.log(txtTranscurrido);
    console.log(txtPozoAutocomplete);
    console.log(txtPozolID);

}