Validate a table column

Asked

Viewed 67 times

0

I have a table that I fill in she sees ajax, and it works normal, but it’s only bringing one line, when I check to see if the line is filled, it brings me two lines.

 <table class="table table-responsive table-hover table-striped" id="tableNSerie" style="font-size:12px;">
  <thead>
     <tr>
         <th>Código</th>
         <th>Produto</th>
         <th>Nº Série</th>
     </tr>
  </thead>
  <tbody>
  </tbody>
</table>

That’s the table. And this is the code I do to check, I need to check the column Nº Series, there is only one line, but when it appears in the console, two appears.

var trs = document.getElementById('tableNSerie');
var tr = trs.getElementsByTagName("tr");
var todos = null;
var td;
for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[2];
    if ($(td).text() === "") {
        todos++;
        console.log(todos);
    }
}

In case everyone should return 1, because there is only one line.

That’s the way I carry the table

function CarregaProdutoNSerie() {
    var url = "/PedidoVenda/CarregaProdutoNControle";
    var id = $("#pedidoid").val();
    $.ajax({
        url: url
        , data: { id: id }
        , type: "POST"
        , datatype: "html"
        , success: function (data) {
            if (data.resultado !== null) {
                $("#tabelaNSerie").show();
                $("#tableNSerie tbody").html("");
                $.each(data.listaNSerie, function (i, item) {
                    $("#tableNSerie").append("<tr>"
                        + "<td>" + item.produto.codigo + "</td>"
                        + "<td>" + item.produto.nome + "</td>"
                        + "<td>" + "</td>"
                        + "</tr>");
                });                
            }
        }
    });}

This is the simulation link

javascript

  • really, I made two changes when I tested. One was the preincrement and the other was that in the td of if I wrote a text to test "zzz". ai worked. But it seems to work with pre and post. see: https://jsfiddle.net/7jf5sqgb/

  • @cpll you saved the changes? Because it’s still the same.

  • edited the link https://jsfiddle.net/7jf5sqgb/

  • @cpll there appears only one, but when I compare with empty value, it brings me two, how strange.

  • yes, so I was wrong in my answer

  • puts an id on this td

  • Instead of null, start the declaration with zero before iterating: var todos = 0;and do not declare your iterator: for (var i=0; i < tr.length; i++), just take the <tr> of <tbody>, and not of <thread>: and then see what happens.

Show 2 more comments

2 answers

2

The problem is that the variable tr takes all the tr in #tableNSerie, including the tr header, which is in thead. That should work:

var tr = trs.querySelector("tbody").getElementsByTagName("tr");

0

I believe that first you must do the append in the correct location, which is within the tags <tbody></tbody>:

$("#tableNSerie tbody").append("<tr>" ...);

If you remove the first <tr> which is also accounted for, by being within its <thead>, he will consider from his <tbody>: 

 //você pode aplicar `var` na primeira declaração e as demais juntar por uma vírgula:
   var todos=0,
       table = document.getElementById('tableNSerie'),
       tr = table.getElementsByTagName("tr");
       tr.splice(0, 1); //remove a primeira tr que está em <thread> do array

   //é recomendado declarar sempre a variável quando ela é iniciada:
   for (var i = 0; i < tr.length; i++) {
        var td = tr[i].getElementsByTagName("td")[2];
        //não é necessário usar jquery para pegar texto
        if ( td.textContent === "") {
            todos++;
            console.log(todos);
        }
    }

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.