0

estoy atascada con el siguiente ejercicio, tengo que utilizar el DOM y el atributo onclik con el siguiente código pero las siguientes funciones no sé ni como hacerlas ni como empezarlas, ya que no dispongo de más explicación e información de las mismas, más allá del código que me han dado:

  • ponerTrazoEncima()
  • ponerTrazoDebajo()
  • mostrarCelda()
  • modificarCelda()

Este sería el código html, que me han dado:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ejemplo de tablas</title>
    <script type="text/javascript" src="Pruebas.js"></script>
    <style>
    table,
    td {
        border: 1px solid black;
    }
    </style>
</head>

<body>
    <div id="resultado"></div>
    <table id="miTabla" border="1" cellspacing="1" cellpading="1">
        <tr>
            <td>Modelo</td>
            <td>Potencia</td>
        </tr>
        <tr>
            <td>Ferrari 512 BB</td>
            <td>380CV</td>
        </tr>
        <tr>
            <td>Lamborghini Miura</td>
            <td>385CV</td>
        </tr>
        <tr>
            <td>Porsche 964 3.6</td>
            <td>360CV</td>
        </tr>
    </table>
    <br /><br />
    <form>
        Añadir o Eliminar el trazo de delimitación de la tabla <br />
        <input type="button" id="botonEncima" value="Trazo por encima de la tabla" onclick="ponerTrazoEncima();" />
        <br />
        <input type="button" id="botondebajo" value="Trazo por debajo de la tabla" onclick="ponerTrazoDebajo();" />
        <br />
    </form>
    <br /><br />
    <form name="mostrar">
        Formulario para mostrar celdas (Número de línea entre 0 y 3)<br />
        <input type="text" id="numLinea1" value="" />
        <br />
        Número de columna (entre 0 y 1)<br />
        <input type="text" id="numColumna1" value="" />
        <br />
        <input type="button" id="botonMostrarCelda" value="Botón que muestra una celda" onclick="mostrarCelda();" />
        <br />
    </form>
    <form name="modificar">
        Formulario para modificar celdas (Número de línea entre 0 y 3)<br />
        <input type="text" id="numLinea2" value="" />
        <br />
        Número de columna (entre 0 y 1)<br />
        <input type="text" id="numColumna2" value="" />
        <br />
        <input type="button" id="botonMostrarCelda" value="Botón que modifica una celda" onclick="modificarCelda();" />
        <br />
    </form>
</body>

</html>

Os agradezco cualquier ayuda o corrección. Muchas gracias!

5
  • bueno, pues las funciones se hacen con javascript, has estudiado algo de javascript? el 6 may. 2021 a las 18:48
  • Que tienes en el archivo Pruebas.js?
    – Pipe
    el 6 may. 2021 a las 18:49
  • Sí estoy estudiando javascript, llevo muy poco, en el archivo Pruebas.js tengo las funciones que si he conseguido sacar como modificar el borde o el cellspacing pero he dejado solo en el post las que no sé porque me ha dado error al ser mucho código.
    – Miriam Me
    el 6 may. 2021 a las 19:15
  • Creo que te refieres a esto <button onclick="func()">PULSAR</button> function func() { //Código Js}
    – Roberto
    el 6 may. 2021 a las 19:15
  • Hablando claro no tengo ni idea de como hacer esas funciones con javascript
    – Miriam Me
    el 6 may. 2021 a las 19:19

1 respuesta 1

1

Primero necesitas alguna manera de seleccionar los elementos, por ejemplo document.getElementById() (https://developer.mozilla.org/es/docs/Web/API/Document/getElementById).

Segundo, una forma de leer o modificar el contenido element.innerHTML, que devuelve el contenido del elemento y al que se le puede asignar un valor para modificarlo.

Y por último, podrías usar element.children[index] (https://developer.mozilla.org/en-US/docs/Web/API/Element/children) para ubicar las celdas específicas dentro de la tabla.

El resultado final sería algo así:

var row = document.getElementById("numLinea1").value;
var col = document.getElementById("numColumna1").value;
var tabla = document.getElementById("miTabla");
var resultado = document.getElementById("resultado");
resultado.innerHTML = tabla.children[row].children[col].innerHTML;
2
  • Probablemente haya que parsear "row" y "col" para que puedan ser usados como índices: row = parseInt(row);
    – imili
    el 6 may. 2021 a las 19:36
  • 1
    Gracias! Creo que con tu explicación ya sé por donde (por lo menos) empezar
    – Miriam Me
    el 6 may. 2021 a las 19:44

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.