Warm tip: This article is reproduced from stackoverflow.com, please click
javascript

Function does not enter the else

发布于 2020-03-27 10:17:32

I am using the following function in a datatables table.

function novaData(d){
   var dia  = d.getDate().toString();
   dia = (dia.length == 1) ? '0'+dia : dia;
   var mes  = (d.getMonth()+1).toString();
   mes = (mes.length == 1) ? '0'+mes : mes;
   var ano = d.getFullYear();
   return dia+"-"+mes+"-"+ano;
}

  class CellDate{
    constructor( start_date ){
        this.date = start_date;
    }
getNextDate(){
   if($('#user_data tbody tr').length){
      var ultima_data = $("#user_data tbody tr:first td:first").text().trim().split("-");
      var ultimo_dia = +ultima_data[0];
      var ultimo_mes = +ultima_data[1];
      var ultimo_ano = +ultima_data[2];
      this.date.setDate(ultimo_dia);
      this.date.setMonth(ultimo_mes-1);
      this.date.setYear(ultimo_ano);
      this.date.setDate( this.date.getDate()+1);
   }else{
      this.date.setMonth(this.date.getMonth()+1);
      this.date.setDate(1);
   }
   return  novaData(this.date);
}
}

  var DateIndexer = new CellDate(new Date(Date.now()));

$('#add').click(function(){

   var html = '<tr>';
   html += '<td contenteditable id="data1">'+DateIndexer.getNextDate()+'</td>';
   html += '<td contenteditable id="data2"></td>';
   html += '<td contenteditable id="data3"></td>';
   html += '<td contenteditable id="data4"></td>';
   html += '<td contenteditable id="data5"></td>';
   html += '<td><button type="button" name="insert" id="insert" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-send"></span></button></td>';
   html += '</tr>';
   $('#user_data tbody').prepend(html);
  });

Within the class in getNextDate, when it is true (the table already has rows), creating a new row fills the date field with the date of the next day of the last row already entered.

But if the table has no row inserted, it returns in the date field NaN-NaN-NaN, because it does not enter into the else.

If you put console.log(DateIndexer.getNextDate()); before the function $('#add').click(function(){ returns 01-08-2019.

But if put console.log(DateIndexer.getNextDate()); inside the function $('#add').click(function(){ returns NaN-NaN-NaN.

Table #user_data:

<div class="container box">
   <h3 align="center">MAPA DE TRABALHO</h3>
   <h5 align="center">Ajudante de Ação Direta - Turno: Manhã</h5>
   <br />
   <div class="table-responsive">
   <br />
    <div align="right">
     <button type="button" name="add" id="add" class="btn btn-info"><span class="glyphicon glyphicon-plus"></span></button>
    </div>
    <br />
    <div id="alert_message"></div>
    <table id="user_data" class="table table-bordered table-striped">
     <thead>
      <tr>
       <th>Data</th>
       <th>Resp. de Turno</th>
       <th>Apoio</th>
       <th>Elementos ALA A</th>
       <th>Elementos ALA B</th>
       <th></th>
      </tr>
     </thead>
    </table>
</div>
</div>
</div>
Questioner
Bruno Pinto
Viewed
11
Cleiton Tortato 2019-07-04 00:21

Your html has no tbody, returning null on you first execution

Try to include a tbody

<table id="user_data" class="table table-bordered table-striped">
    <thead>
     <tr>
      <th>Data</th>
      <th>Resp. de Turno</th>
      <th>Apoio</th>
      <th>Elementos ALA A</th>
      <th>Elementos ALA B</th>
      <th></th>
     </tr>
    </thead>
    <tbody>
    </tbody>
</table>

This will fix your code here:

$('#add').click(function(){

   var html = '<tr>';
   html += '<td contenteditable id="data1">'+DateIndexer.getNextDate()+'</td>';
   html += '<td contenteditable id="data2"></td>';
   html += '<td contenteditable id="data3"></td>';
   html += '<td contenteditable id="data4"></td>';
   html += '<td contenteditable id="data5"></td>';
   html += '<td><button type="button" name="insert" id="insert" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-send"></span></button></td>';
   html += '</tr>';
   $('#user_data tbody').prepend(html); //<--- right here

});

Your condition on if need to be reviewed too, because on the first execution tbody was empty, change to this

class CellDate {
    constructor(start_date) {
        this.date = start_date;
    }
    getNextDate() {
   //here the change for if condition     
   if ($('#user_data tbody tr') != null && $('#user_data tbody tr').length > 0) {
            var ultima_data = $("#user_data tbody tr:first td:first").text().trim().split("-");
            var ultimo_dia = +ultima_data[0];
            var ultimo_mes = +ultima_data[1];
            var ultimo_ano = +ultima_data[2];
            this.date.setDate(ultimo_dia);
            this.date.setMonth(ultimo_mes - 1);
            this.date.setYear(ultimo_ano);
            this.date.setDate(this.date.getDate() + 1);
            console.log('if', this.date);
        } else {
            this.date.setMonth(this.date.getMonth() + 1);
            this.date.setDate(1);
            console.log('else', this.date);
        }
        return novaData(this.date);
    }
}

Code here https://jsfiddle.net/nzb0tdjq/