This is where you take the data and place it in tbody , what I want is to send to print taking the temporary data that you put in the tbody . I do not want to right click and print because I plan to make a template with a logo.
Example
Empresa | Expensas |
BTNA | traslado de ida|
NTA | traslado de ida|
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=width=device‐width, initial-scale=1, shrink-to-fit=no">
<title>Rendir Expensas</title>
<!-- Boostrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/[email protected]/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" >
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
//importamos configuraciones de toastr
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-right",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
</script>
</head>
<body>
<div class="container">
<!-- Franja Azul de arriba -->
<div class="row">
<div class="col btn btn-primary btn-lg" >
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-primary">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#barra" aria-controls="barra" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="barra">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="trabajador.php">Trabajador</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="empresa.php">Empresas</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!--Imagen de TNA junto con el Titulo-->
<div class="row text-center">
<div class="col jumbotron">
<div> <img src="tna.png"> </div>
<div class="row">
<div class="col"><h1 class="display-5">Rendir Expensas</h1>
</div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<!-- Cuadro de Nombre y Apellido -->
<div class="form-inline form-group">
<form method="POST" name="consu" id="consu">
<select class="form-control" id="trabajadores" >
<?php
include 'conexion.php';
$query = $con -> query("SELECT * FROM trabajadores ORDER BY trabajadores. Nombre ASC");
echo '<option value="0">Trabajador</option>';
while ($fila = mysqli_fetch_array($query)) {
echo '<option value="'.$fila[Rut].'">'.$fila[Nombre].' '.$fila[Apellido].'</option>';
}
?>
</select>
<div class="row">
<div class="col">
<br>
<!-- RUT -->
<input type="text" name="impriinput" id="impriinput" disabled="">
</div>
</div>
</div></form>
<div class="col"></div>
<div class="col"></div>
</div>
<!-- Modal -->
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary" data-toggle="modal" onload="" data-target="#Agregar">
Expensas
</button>
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#Guardar" id="submit">
Imprimir
</button>
</div>
<!--Contenido Modal -->
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="Agregar" tabindex="-1" role="dialog" aria-labelledby="Agregar" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-1"></div>
<div class="bor col-md-5">
<!--- Empresas -->
<select class="form-control" id="empresas">
<?php
$query2 = $con -> query("SELECT * FROM empresas ORDER BY empresas. Nombre ASC ");
echo ' <option value="0"> Empresa </option>';
while ($fila2 = mysqli_fetch_array($query2)) {
echo ' <option value='.$fila2[nombre].'> '.$fila2[nombre].' </option> ';
}
?>
</select>
<span aria-hidden="true"></span>
</div>
<div class="bor row">
<div class="col bor">
<!--- Calendario -->
<input id="fecha" name="fecha" width="148"/>
<script>
$('#fecha').datepicker({
uiLibrary: 'bootstrap4',
format: 'dd-mm-yyyy'
});
</script></div>
</div>
</div>
<!--time -->
<div class="bor row">
<div class="col" align="center"> Hora: <input type="time" id="hora"></div>
</div>
<div class="bor row">
<div class="bor col-md-3"></div>
<div class="col form-check form-check-inline">
<select class="form-control" id="traslado">
<option><Traslado>Expensas</Traslado></option>
<option>Traslado de Ida</option>
<option>Traslado de Vuelta</option>
<option>Colacion</option>
<option>Compra de Articulo</option>
</select>
</div>
<div class="bor col-md-3"></div>
</div>
<div class="row">
<div class="col">
<input type="text" id="motivo" name="motivo" title=" Motivo " placeholder="Motivo" >
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" >Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal1" onclick="return validaCampos(this);" id="crearAccion" >Crear</button>
</div>
</div>
</div>
</div>
<table id="tabla-acciones" class="table table-bordered">
<thead>
<tr>
<th>Empresa</th>
<th>Hora</th>
<th>Fecha</th>
<th>Expensas</th>
<th>Motivo</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
<script type="text/javascript">
function validaCampos(){
var motivo = $("#motivo").val();
var empresas = $('#empresas').val();
var hora = $('#hora').val();
var fecha = $('#fecha').val();
var expensas = $('#traslado').val();
//validamos campos
if($.trim(motivo) == ""){
toastr.error("No ha ingresado un Motivo","Aviso!");
return false;
}else{
$('table tbody').append('<tr><td>' + empresas + '</td><td>' + hora + '</td><td>' + fecha + '</td><td>' + expensas + '</td><td>' + motivo + '</td></tr>');
$("#modal1").modal('hide');
}
}
</script>
<script type="text/javascript">
</script>
<style type="text/css">
div[class^='bor']{
border: 5px solid white;
}
</style>
<!-- Aqui termina el Jumbotron-->
</div>
</div>
</div>
<script>
$('select#trabajadores').on('change',function(){
var valor = $(this).val();
document.consu.impriinput.value = valor ;
});
</script>
<script src="dist/bundle.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>