Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Recargar tabla DOM

JavaScript - Recargar tabla DOM

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 5
Ha aumentado su posición en 13 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Recargar tabla DOM

Publicado por Anonymus (3 intervenciones) el 12/12/2019 10:43:21
Tengo una tabla 3x3 en el cual desplazo el Valor X según la flecha. El problema es cuando ejecuto cualquier funcion de los de abajo la tabla se va duplicando. He intentado limpiar con un table.inner=' ';


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!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>Ejercicio 1</title>
    <style>
      td {
        padding: 20px;
      }
      button {
        margin-top: 20px;
        padding: 11px;
      }
    </style>
  </head>
  <body>
    <script>
      var array = [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, "X"]
      ];
 
      //Localiza X
      for (var x = 0; x < array.length; x++) {
        for (var y = 0; y < array[x].length; y++) {
          if (array[x][y] == "X") {
            var posicionX = x;
            var posicionY = y;
          }
        }
      }
 
      function mostrar() {
        // Obtener la referencia del elemento body
 
        var body = document.getElementsByTagName("body")[0];
        // Crea un elemento <table> y un elemento <cont>
        var tabla = document.createElement("table");
 
        var contenedor = document.createElement("cont");
 
        // Crea las columnas
        for (var x = 0; x < array.length; x++) {
          // Crea las filas de la tabla
          var fila = document.createElement("tr");
 
          for (var y = 0; y < array[x].length; y++) {
            // Crea un elemento <td> y un nodo de texto, haz que el nodo de
            // texto sea el contenido de <td>, ubica el elemento <td> al final
            // de la fila de la tabla
            var celda = document.createElement("td");
            var textoCelda = document.createTextNode(array[x][y]);
            celda.appendChild(textoCelda);
            fila.appendChild(celda);
          }
          contenedor.appendChild(fila);
          tabla.appendChild(contenedor);
          // appends <table> into <body>
          body.appendChild(tabla);
          // modifica el atributo "border" de la tabla y lo fija a "2";
          tabla.setAttribute("border", "2");
        }
      }
 
      function arriba() {
        if (posicionX > 0) {
          var objetivo = array[posicionX - 1][posicionY];
          //console.log(objetivo);
          array[posicionX][posicionY] = objetivo;
          array[posicionX - 1][posicionY] = "X";
 
          posicionX--;
        }
 
        mostrar();
      }
      function abajo() {
        if (posicionX < 2) {
          var objetivo = array[posicionX + 1][posicionY];
          //console.log(objetivo);
          array[posicionX][posicionY] = objetivo;
          array[posicionX + 1][posicionY] = "X";
 
          posicionX++;
        }
        mostrar();
      }
      function izquierda() {
        if (posicionY > 0) {
          var objetivo = array[posicionX][posicionY - 1];
          //console.log(objetivo);
          array[posicionX][posicionY] = objetivo;
          array[posicionX][posicionY - 1] = "X";
 
          posicionY--;
        }
        mostrar();
      }
 
      function derecha() {
        if (posicionY < 2) {
          var objetivo = array[posicionX][posicionY + 1];
          //console.log(objetivo);
          array[posicionX][posicionY] = objetivo;
          array[posicionX][posicionY + 1] = "X";
 
          posicionY++;
        }
        mostrar();
      }
 
      function limpiar() {
        //code
      }
 
      mostrar();
    </script>
 
    <button onclick="arriba();">&uarr;</button>
    <button onclick="abajo();">&darr;</button>
    <button onclick="izquierda();">&larr;</button>
    <button onclick="derecha();">&rarr;</button>
  </body>
  <div id="correcto"></div>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Recargar tabla DOM

Publicado por joel (895 intervenciones) el 12/12/2019 16:14:26
El problema es que vas añadiendo al body cada vez una tabla nueva.

Yo te he modificado el código y he añadido un div donde se añade la tabla, pero antes de añadirla, elimino el contenido del div.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!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>Ejercicio 1</title>
    <style>
      td {
        padding: 20px;
      }
      button {
        margin-top: 20px;
        padding: 11px;
      }
    </style>
  </head>
 
  <body>
    <div id="tablero"></div>
    <script>
      var array = [
        [1, 2, 3],
        [4, 5, 6],
        [7, 8, "X"]
      ];
 
      //Localiza X
      for (var x = 0; x < array.length; x++) {
        for (var y = 0; y < array[x].length; y++) {
          if (array[x][y] == "X") {
            var posicionX = x;
            var posicionY = y;
          }
        }
      }
 
      function mostrar() {
        // Obtener la referencia del elemento body
 
        var body = document.getElementById("tablero");
        // Crea un elemento <table> y un elemento <cont>
        var tabla = document.createElement("table");
 
        var contenedor = document.createElement("cont");
 
        // Crea las columnas
        for (var x = 0; x < array.length; x++) {
          // Crea las filas de la tabla
          var fila = document.createElement("tr");
 
          for (var y = 0; y < array[x].length; y++) {
            // Crea un elemento <td> y un nodo de texto, haz que el nodo de
            // texto sea el contenido de <td>, ubica el elemento <td> al final
            // de la fila de la tabla
            var celda = document.createElement("td");
            var textoCelda = document.createTextNode(array[x][y]);
            celda.appendChild(textoCelda);
            fila.appendChild(celda);
          }
          contenedor.appendChild(fila);
          tabla.appendChild(contenedor);
          // appends <table> into <body>
          body.innerHTML="";
          body.appendChild(tabla);
          // modifica el atributo "border" de la tabla y lo fija a "2";
          tabla.setAttribute("border", "2");
        }
      }
 
      function arriba() {
        if (posicionX > 0) {
          var objetivo = array[posicionX - 1][posicionY];
          //console.log(objetivo);
          array[posicionX][posicionY] = objetivo;
          array[posicionX - 1][posicionY] = "X";
 
          posicionX--;
        }
 
        mostrar();
      }
      function abajo() {
        if (posicionX < 2) {
          var objetivo = array[posicionX + 1][posicionY];
          //console.log(objetivo);
          array[posicionX][posicionY] = objetivo;
          array[posicionX + 1][posicionY] = "X";
 
          posicionX++;
        }
        mostrar();
      }
      function izquierda() {
        if (posicionY > 0) {
          var objetivo = array[posicionX][posicionY - 1];
          //console.log(objetivo);
          array[posicionX][posicionY] = objetivo;
          array[posicionX][posicionY - 1] = "X";
 
          posicionY--;
        }
        mostrar();
      }
 
      function derecha() {
        if (posicionY < 2) {
          var objetivo = array[posicionX][posicionY + 1];
          //console.log(objetivo);
          array[posicionX][posicionY] = objetivo;
          array[posicionX][posicionY + 1] = "X";
 
          posicionY++;
        }
        mostrar();
      }
 
      function limpiar() {
        //code
      }
 
      mostrar();
    </script>
 
    <button onclick="arriba();">&uarr;</button>
    <button onclick="abajo();">&darr;</button>
    <button onclick="izquierda();">&larr;</button>
    <button onclick="derecha();">&rarr;</button>
  </body>
  <div id="correcto"></div>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar