Fetch information from a td by jquery

Question

I have within my system a kind of analysis table, where the client will check item by item filled in according to what the surveyor did. Inside this screen there is a section for Checklist, which is mounted dynamically at the moment the customer accesses the analysis table and according to the items of Checklist. The basic structure of the page looks like this:

<table> 
<tr>
<td id=X>Trecho1 <input type='text' name='teste' + IDdoChecklistsCliente/> <td>
<td>Trecho2 <select> 
<option value='0'> </option>
<option value='1'> Teste 1</option>
<option value='2'> Teste 2 </option>
<option value='3'> Teste 3</option>
</select> </td>
</tr>
</table>

It works perfectly, brings the data all filled in according to the database. I just can’t read this data (input and select). I tried to do a each() and fetch the information from comes everything but input and select data. As the page assembly is done dynamically by taking the client’s Checklist items, the input and select Ids modify to each client.

As mentioned above I have already used each to search the TD according to the excerpt below:

$('table tr').each(function (index, tr) {
        var tds = $(tr).find('td');
        $(tds).each(function (indexTd, td) {
           // alert($(td).text());
            var teste = $(td).text();
            alert(teste);
        });
    });

The result in Alert was : Trecho1, Trecho2, Teste1teste2teste3. Even if you have something in the textbox it does not inform and much less what the combo information.

Any solution to this?

editing

To get an idea of what I want. Here’s one part of the information I want:

I have to get every piece of information (Checklist id, Combo value, Note) from each line. I tried to assign an ID to the table so that I could only get the specific lines of this table, but it fetches all the additional screen information, not just from the table. (Has the requester screen, vehicle, Checklist and vehicle photos).

The excerpt from the specific code for this part is this:

var tabela = document.getElementById("MinhaTabela");
    var linhas = tabela.getElementsByTagName("tr");
    
    var Textoimput1;
    var Combo;
    var Textoimput2;
    // Preciso percorrer todas as linhas da TR e pegar os valores de cada TD que tenha o input
    
    for (var i = 0; var < linhas.lenght; i ++)
    {
       Textoimput1 = $('input')[i];
        Combo = $('select option:selected')[i];
        Textoimput2 = $('input')[i];
        alert($(Textoimput1).val() + " - " + $(Combo).val() + "- " + $(Textoimput2).val());    
    }
    
    // Mesmo identificando que é para buscar apenas os dados da Table MinhaTabela
    // Está buscando informações de outras telas que compõe esta tela de checklist. 

<table id= "MinhaTabela">
<tr>
<td><input type='text' name='idchecklist' + id[i] value='12345'></td>
<td><label>Nome do Item de Checklist</label></td>
<td><select>
<option value='0'> </option>
<option value='1'>APROVADO </option>
<option value='2'>REPROVADO </option>
<option value='3'>NÃO AVALIADO </option>
</select>
</td>
<td><input type='text' name='Observacaochecklist' + id[i+1] value=' '></td>
</tr>
<tr>
<td><input type='text' name='idchecklist' + id[i] value='54321'></td>
<td><label>Nome do Item de Checklist</label></td>
<td><select>
<option value='0'> </option>
<option value='1'>APROVADO </option>
<option value='2'>REPROVADO </option>
<option value='3'>NÃO AVALIADO </option>
</select>
</td>
<td><input type='text' name='Observacaochecklist' + id[i+2] value=' '></td>
</tr>
<tr>
<td><input type='text' name='idchecklist' + id[i] value='12346'></td>
<td><label>Nome do Item de Checklist</label></td>
<td><select>
<option value='0'> </option>
<option value='1'>APROVADO </option>
<option value='2'>REPROVADO </option>
<option value='3'>NÃO AVALIADO </option>
</select>
</td>
<td><input type='text' name='Observacaochecklist' + id[i] value=' '></td>
</tr>
</table>

In addition to repeating input information, he is seeking information from other screens (Requester, Vehicle, Vehicle Photos). Remembering that unfortunately I have no way to leave the items of Hecklist static (which would facilitate in 1000000% my life) because each client has its own Checklist, then is mounted this table dynamically according to the information of Checklist registered in the database.

Answer 1

See if that helps you:

$(document).ready(function() {
  $("button").click(function() {
    $ar_tr = $('table[id=MinhaTabela] tr');
    
    $.each($ar_tr, function(i, $tr){
    
      input_idchecklist = $($tr).find('input')[0];
      alert( $(input_idchecklist).attr('name') + ': ' + $(input_idchecklist).val() );
      opcao = $($tr).find('select option:selected');
      alert( $(opcao).val() );
      
      input_observacao = $($tr).find('input')[1];
      alert( $(input_observacao).attr('name') + ': ' + $(input_observacao).val() );
      
    
    });
    
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id= "MinhaTabela">
<tr>
<td><input type='text' name='idchecklist' + id[i] value='12345'></td>
<td><label>Nome do Item de Checklist</label></td>
<td><select>
<option value='0'> </option>
<option value='1'>APROVADO </option>
<option value='2'>REPROVADO </option>
<option value='3'>NÃO AVALIADO </option>
</select>
</td>
<td><input type='text' name='Observacaochecklist' + id[i+1] value=' '></td>
</tr>
<tr>
<td><input type='text' name='idchecklist' + id[i] value='54321'></td>
<td><label>Nome do Item de Checklist</label></td>

<td><select>
<option value='0'> </option>
<option value='1'>APROVADO </option>
<option value='2'>REPROVADO </option>
<option value='3'>NÃO AVALIADO </option>
</select>
</td>
<td><input type='text' name='Observacaochecklist' + id[i+1] value=' '></td>
</tr>
</table>
<button type="button">Mostrar</button>

Answer 2

Define a class for each.

Run a map function for each class type by taking the value with $(this). val()