me gustaria crear un boton que borre filas de una tabla, la parte html y css estan listas, pero el javascript no funciona.
Aqui dejo mis codigos.
<?php
//Archivo de conexion
include_once("connection.php");
$sql = "SELECT * FROM `reservacdt` limit 10 ";
$queryRecords = mysqli_query($conn, $sql) or die("Error al buscar");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script> <!-- Se comunica con jquery para editar la tabla -->
<link rel="stylesheet" href="estilos\clase.css"> <!-- El css de la pagina, mas que todo el de la tabla -->
</head>
<body>
<!-- Refresca la pagina -->
<br></br>
<div style="text-align: center;"><a href="cdtclase.php">Haga click para refrescar</a></div>
<!-- Tabla con los datos de la base de datos -->
<div class="container" style="padding:50px 250px;">
<h1>Clases actuales en el sistema (Centro de tecnología):</h1>
<h2>Haga click en un campo para editarlo (La fecha de inscripción no es editable)</h2>
<div id="msg" class="alert"></div> <!-- Da las alertas en connection -->
<table id="employee_grid" name="employee_grid" class="table table-condensed table-hover table-striped bootgrid-table" width="60%" cellspacing="0">
<thead>
<tr>
<th>Nombre</th>
<th>Materia</th>
<th>Fecha de inicio</th>
<th>Hora que empieza</th>
<th>Hora que termina</th>
<th>Número de maquinas a usar</th>
<th>Fecha de inscripción</th>
<th>Borrar</th>
</tr>
</thead>
<tbody id="_editable_table"> <!-- Usando los datos en connection, se imprimen los datos de uno en uno -->
<?php foreach($queryRecords as $res) :?>
<tr data-row-id="<?php echo $res['id'];?>">
<td class="editable-col" contenteditable="true" colcdt='0' oldVal ="<?php echo $res['nombre'];?>"><?php echo $res['nombre'];?></td>
<td class="editable-col" contenteditable="true" colcdt='1' oldVal ="<?php echo $res['materia'];?>"><?php echo $res['materia'];?></td>
<td class="editable-col" contenteditable="true" colcdt='2' oldVal ="<?php echo $res['fecha'];?>"><?php echo $res['fecha'];?></td>
<td class="editable-col" contenteditable="true" colcdt='3' oldVal ="<?php echo $res['fechaemp'];?>"><?php echo $res['fechaemp'];?></td>
<td class="editable-col" contenteditable="true" colcdt='4' oldVal ="<?php echo $res['fechater'];?>"><?php echo $res['fechater'];?></td>
<td class="editable-col" contenteditable="true" colcdt='5' oldVal ="<?php echo $res['numero'];?>"><?php echo $res['numero'];?></td>
<td class="editable-col" contenteditable="false" colcdt='6' oldVal ="<?php echo $res['fechainscripcion'];?>"><?php echo $res['fechainscripcion'];?></td>
<td><button type="button" name="delete_btn" colcdt='7' oldVal="'.$res["id"].'" class="btn btn-xs btn-danger btn_delete">x</button></td></tr>
<?php endforeach;?>
</tbody>
</table>
</div>
<div id="boton2" style="text-align: center;"> <!-- Muestra la forma de buscar datos -->
<button onclick="myFunction2()" id="busca">Mostrar el buscador</button>
<div id="buscador" name="buscador">
<form method="POST" action="cdtbuscar.php" style="padding:50px 250px;">
<h3>Buscar usando el nombre del profesor o su materia</h3>
<input type="text" placeholder="Escriba el nombre del profesor o su materia" name="niet" id="niet">
<input type="submit" id="input buscar" name="input buscar">
</form>
</div>
<div id="boton1" style="text-align: center;"> <!-- Muestra la forma de borrar datos -->
<button onclick="myFunction1()" id="borra">Mostrar forma de borrar datos</button>
</div>
<div id="borrador"> <!-- La forma de borrar datos -->
<form method="POST" action="cdtclaseborrar.php" style="padding:50px 250px;">
<h1>Escriba el nombre del profesor para borrar su clase o escriba una fecha de inscripción para borrar la clase correspondiente</h1>
<input type="text" placeholder="Escriba el nombre del profesor o la fecha de inscripcion para borrar la clase" name="nombreprofe" id ="nombreprofe"></input>
<div id="input submit" style="text-align: center;;"><input type="submit" id="submit" name="submit" class="floated" value="Borrar clase"></input></div>
<br></br>
</form>
</div>
</body>
</html>
<script type="text/javascript">
function myFunction1() { <!-- Muestra el formulario de borrar filas -->
var x = document.getElementById("borrador");
var audio = new Audio('audio/mouse.mp3');
audio.play();
if (confirm("Esta seguro? Si borra la fila, se borrara en la base de datos")) {
if (x.style.display === "block") {
x.style.display = "none";
document.getElementById("borra").value="Mostrar forma de borrar datos";
} else {
x.style.display = "block";
document.getElementById("borra").value="Quitar formulario";
}
} else {
x.style.display = "none";
}
}
function myFunction2() { <!-- Muestra el formulario de busqueda de filas -->
var z = document.getElementById("buscador");
var audio = new Audio('audio/mouse.mp3');
audio.play();
if (z.style.display === "block") {
z.style.display = "none";
document.getElementById("busca").value="Mostrar forma de buscar datos";
} else {
z.style.display = "block";
document.getElementById("busca").value="Quitar formulario";
}
}
$(document).ready(function(){ <!-- Permite editar la tabla en si -->
$('td.editable-col').on('focusout', function() {
data = {};
data['val'] = $(this).text();
data['id'] = $(this).parent('tr').attr('data-row-id');
data['cdtclase'] = $(this).attr('colcdt');
if($(this).attr('oldVal') === data['val'])
return false;
$.ajax({
type: "POST",
url: "servercdt.php", <!-- Se conecta a este archivo php que contiene alertas y la coneccion -->
cache:false,
data: data,
dataType: "json",
success: function(response)
{
//$("#loading").hide();
if(!response.error) {
$("#msg").removeClass('alert-danger');
$("#msg").addClass('alert-success').html(response.msg);
} else {
$("#msg").removeClass('alert-success');
$("#msg").addClass('alert-danger').html(response.msg);
}
}
});
});
});
//Arreglar esto
$(document).on('click', '.btn_delete', function(){
data = {};
data['val'] = $(this).text();
data['id'] = $(this).parent('tr').attr('data-row-id');
data['cdtclase'] = $(this).attr('colcdt');
if($(this).attr('oldVal') === data['val'])
return false;
if(confirm("Seguro?"))
{
$.ajax({
url:"deletecdt.php",
method:"POST",
data:data,
dataType:"json",
success:function(data){
alert(data);
}
});
}
});
</script>
delete.php
<?php
include_once("connection.php");
//define cdtclase of column
$columns = array(
0 =>'nombre',
1 => 'materia',
2 => 'fecha',
3 => 'fechaemp',
4 => 'fechater',
5 => 'numero',
6 => 'fechainscripcion'
);
$error = false;
$colVal = '';
$colcdt = $rowId = 0;
if(isset($_POST)){
if(isset($_POST['val']) && !empty($_POST['val']) && !$error) {
$colVal = $_POST['val'];
$error = false;
} else {
$error = true;
}
if(isset($_POST['cdtclase']) && $_POST['cdtclase'] >= 0 && !$error) {
$colcdt = $_POST['cdtclase'];
$error = false;
} else {
$error = true;
}
if(isset($_POST['id']) && $_POST['id'] > 0 && !$error) {
$rowId = $_POST['id'];
$error = false;
} else {
$error = true;
}
if(!$error) {
$sql = "DELETE FROM reservacdt SET ".$columns[$colcdt]." = '".$colVal."' WHERE id='".$rowId."'";
$status = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$msg = array('error' => $error, 'msg' => 'Se actualizaron los datos, recargue la pagina para poder verlo');
} else {
$msg = array('error' => $error, 'msg' => 'Hubo un problema actualizando los datos');
}
}
?>
connection.php
<?php
/* Database connection start */
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "prueba";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
/* check connection */
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
?>