单击添加按钮时的自动日期

时间:2019-07-02 07:45:27

标签: javascript

我创建了一个表,并且正在使用数据表进行插入,更新和删除。 当我在表格中添加新行时,date列应自动填入最后一行之后的日期。例如,“日期”列中的最后一行具有以下日期:03-07-2019,当您添加新行时,“日期”列应自动接收日期为04-07-2019。

我的代码如下:

<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>

然后使用javascript进行插入:

$('#add').click(function(){
   var html = '<tr>';
   html += '<td contenteditable id="data1"></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);
  });

  $(document).on('click', '#insert', function(){
   var data = $('#data1').text();
   var responsavel = $('#data2').text();
   var apoio = $('#data3').text();
   var elementos = $('#data4').text();
   var elementos1 = $('#data5').text();
   if(data != '' && responsavel != '' && apoio != '' && elementos != '' && elementos1 != '')
   {
    $.ajax({
     url:"./insert",
     method:"POST",
     data:{data:data, responsavel:responsavel, apoio:apoio, elementos:elementos, elementos1:elementos1},
     success:function(data)
     {
      $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
      $('#user_data').DataTable().destroy();
      fetch_data();
     }
    });
    setInterval(function(){
     $('#alert_message').html('');
    }, 5000);
   }
   else
   {

alert("Os campos são de preencimento obrigatório!");
}
});

insert.php页上的php:

if(isset($_POST["data"], $_POST["responsavel"], $_POST["apoio"], $_POST["elementos"], $_POST["elementos1"]))
{
 $data = mysqli_real_escape_string($conn, $_POST["data"]);
 $responsavel = mysqli_real_escape_string($conn, $_POST["responsavel"]);
 $apoio = mysqli_real_escape_string($conn, $_POST["apoio"]);
 $elementos = mysqli_real_escape_string($conn, $_POST["elementos"]);
 $elementos1 = mysqli_real_escape_string($conn, $_POST["elementos1"]);
 $query = "INSERT INTO raddb.mapas(data, responsavel, apoio, elementos, elementos1) VALUES('$data', '$responsavel', '$apoio', '$elementos', '$elementos1')";
 if(mysqli_query($conn, $query))
 {
  echo 'Data Inserted';
 }
}

1 个答案:

答案 0 :(得分:1)

您可以在“ $('#add')。click(function(){”之前创建CellDate类。

class CellDate{
    constructor( start_date ){
        this.date = start_date;
    }
    getNextDate(){
        this.date.setDate(this.date.getDate() + 1);
        return this.date;
    }
}

之后,创建带有开始日期的CellDate对象(从发布或手动开始)

var DateIndexer = new CellDate(new Date(1999,11,31));

在事件“ $('#add')。click(function(){”中,您可以调用“ getNextDate()”来添加新日期。

html += '<td contenteditable id="data1">'+DateIndexer.getNextDate()+'</td>';

如果要使用特定的日期格式,例如:“ yyyy-mm-dd”。您可以使用它:

var now = new Date();
var formated_date = now.format("yyyy-mm-dd");