What I want is that when I click on an image I insert a new cell with some data in the table.
The problem is that it tells me that insertCell is not a function (in the browser's console) and I do not know why, I'm doing it as I see that the rest do it in their examples.
I leave the JavaScript code I've been doing.
<script>
function insertaEjercicio(nombreejercicio)
{
var dia = document.getElementById('dia').value;
var diatempo = "tempo" + dia;
var row = document.getElementById('tempoLUNES');
var x = row.insertCell(-1);
x.innerHTML = "New cell";
</script>
And I also leave the HTML that results from doing all the PHP queries that I do in this module.
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Web AdGYMnistrator</title>
<style type="text/css">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
<link rel="stylesheet" href="Web%20AdGYMnistrator_files/style.css" type="text/css">
<link rel="stylesheet" href="Web%20AdGYMnistrator_files/font-awesome.css" type="text/css">
<link rel="stylesheet" href="Web%20AdGYMnistrator_files/w3.css" type="text/css">
<link rel="stylesheet" href="Web%20AdGYMnistrator_files/default.css" type="text/css" media="screen">
<script type="text/javascript" src="Web%20AdGYMnistrator_files/jquery-3.js"></script>
<script>
function cargarDiv(div,url)
{
$(div).load(url);
}
</script>
</head>
<body>
<!--
*************************
* AREA DE LOGIN *
*************************
-->
<div class="loginBox">
<br>
<form class="loginForm" action="" method="post">
<p class="field">
<input value="1234" name="usuario" placeholder="Usuario" type="text">
<i class="fa fa-user"></i>
</p>
<p class="field">
<input name="password" placeholder="Contraseña" type="password">
<i class="fa fa-lock"></i>
</p>
<p class="submit">
<button type="submit" name="submit"><i class="fa fa-arrow-right"></i></button>
</p>
</form>
<br>
</div>
<!--
*************************
* AREA DE NAVEG *
*************************
-->
<div class="navidiv">
<ul class="naviarea">
<li class="botonnav"><a class="botontexto" href="http://192.168.2.244/index.php">NOTICIAS</a></li>
<li class="botonnav"><a class="botontexto" onclick='cargarDiv("#contenidoBox","actividades.php")'>ACTIVIDADES</a></li>
<li class="botonnav"><a class="botontexto" onclick='cargarDiv("#contenidoBox","horarios.php")'>HORARIOS</a></li>
<li class="botonnav"><a class="botontexto" onclick='cargarDiv("#contenidoBox","ejercicios.php")'>EJERCICIOS</a></li>
<li class="botonnav"><a class="botontexto" onclick='cargarDiv("#contenidoBox","tablas_crear.php")'>TABLAS</a></li>
</ul>
</div>
<!--
*************************
* AREA CONTENIDO *
*************************
-->
<div id="contenidoBox" class="contenidoBox">
<script>
//AQUÍ VA EL JS QUE PUSE MÁS ARRIBA, LO BORRO PARA NO PONERLO DOS VECES.
//AQUÍ VA EL JS QUE PUSE MÁS ARRIBA, LO BORRO PARA NO PONERLO DOS VECES.
//AQUÍ VA EL JS QUE PUSE MÁS ARRIBA, LO BORRO PARA NO PONERLO DOS VECES.
</script>
<div class="contenidoTablas">
<div class="contenidoTablasTemporal">
<table id="tablatempo" style="font-size:14px;" cellspacing="7px">
<tbody><tr>
<th id="tempoLUNES">LUNES</th>
</tr>
<tr>
<th id="tempoMARTES">MARTES</th>
</tr>
<tr>
<th id="tempoMIERCOLES">MIÉRCOLES</th>
</tr>
<tr>
<th id="tempoJUEVES">JUEVES</th>
</tr>
<tr>
<th id="tempoVIERNES">VIERNES</th>
</tr>
<tr>
<th id="tempoSABADO">SÁBADO</th>
</tr>
<tr>
<th id="tempoDOMINGO">DOMINGO</th>
</tr>
<tr>
</tr>
</tbody></table>
</div>
<div class="contenidoTablasCrear">
<form action="cambiarpassword.php" method="post" name="cambiarpassword">
<table>
<tbody><tr><th colspan="2"> CREAR TABLA </th>
</tr><tr>
<td style="text-align:right;">
Nombre:
</td>
<td>
<input name="nombre_tabla" id="nombre_tabla" required="true" type="text">
</td>
</tr>
<tr>
<td style="text-align:right;">
Día:
</td>
<td>
<select name="dia" id="dia">
<option selected="selected" value="LUNES">Lunes</option>
<option value="MARTES">Martes</option>
<option value="MIERCOLES">Miércoles</option>
<option value="JUEVES">Jueves</option>
<option value="VIERNES">Viernes</option>
<option value="SABADO">Sábado</option>
<option value="DOMINGO">Domingo</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:right;">
Músculo:
</td>
<td>
<select name="musculo" id="musculo" onchange="seleccionaMusculo(value)">
<option value="" disabled="true">
</option><option selected="selected" value="Biceps">Biceps</option>
<option value="Dorsales">Dorsales</option>
</select>
</td>
</tr>
<tr>
<td class="contenidoTablasCrearAviso" colspan="2" style="font-size:10px;">
Para insertar un ejercicio a la tabla simplemente haga click en su imagen.
</td>
</tr>
<tr>
<td>
</td>
<td>
<input value="Crear tabla" onclick="CrearTabla()" type="button">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input value="Crear tabla e imprimir" onclick="ImprimirTabla()" type="button">
</td>
</tr>
<!-- <input type="hidden" value="" id="buffer" name="buffer"> -->
</tbody></table>
</form>
</div>
<div name="contenidoTablasListaEjercicioSeries" id="contenidoTablasListaEjercicioSeries">
</div>
<div name="contenidoTablasLista" id="contenidoTablasLista">
<div class="contenidoEjerciciosListaCuadros" id="3" onclick="insertaEjercicio('Curl con barra')">
<a class="contenidoEjerciciosListaCuadrosNombre">Curl con barra<br></a>
<img src="Web%20AdGYMnistrator_files/biceps_curl_barra.gif">
</div>
</div>
</div>
</div>
</body></html>
The concrete error that Google Chrome and Mozilla Firefox give me is:
TypeError: row.insertCell is not a function