JavaScript - Funcion que muestra una descripcion larga sin saltos de linea

 
Vista:

Funcion que muestra una descripcion larga sin saltos de linea

Publicado por Saltos de linea que no se muestran (2 intervenciones) el 22/10/2020 09:38:47
Buenos días. Soy nueva en Java Script. Tengo una tabla que se carga desde una base de datos sql.
La tabla es un poco larga no mucho. La he configurado para que muestre solo 10 líneas y en otra tabla adicional debajo e muestre la descripción de cada linea en que sitúo el raton, esto con el evento onmouseover, hasta aquí todo bien. Lo que hago es que la descripción larga la he colocado en una columna oculta y cuando el raton se posa sobre una linea, el contenido (la descripción larga) de esa columna oculta, se muestra en la tabla de abajo.
El problema lo tengo en que no muestra el salto de linea. He probado varias cosas... os dejo el código a ver si pueden ayudarme. De antemano, gracias.

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
//html
<?php
 
$consulta = "SELECT id_parameters, par, rank, manufacturing, value, short_description, description FROM parameters WHERE nivell = 'S'";
$resultado = mysqli_query($db, $consulta);
 
 
?>
 
<body>
 
 
     <div id="scroll_tabla">
 
          <table id="tablaParametros" align = "center">
            <thead>
                <td  style="display:none"></td>
                <td  style="display:none"></td>
                <td>Par</td>
                <td>Rang</td>
                <td>Fab.</td>
                <td>Valor</td>
                <td>Nou Valor</td>
                <td>Descripció Breu</td>
                <td style="display:none"></td>
            </thead>
            <tbody>
                <?php
                while($fila = mysqli_fetch_assoc($resultado))
                {
                ?>
                   <tr>
                        <td style="display:none"><?php echo ($fila['id_parameters']);?></td>
                        <td style="display:none"><?php echo ("ST");?></td>
                        <td onmouseover="ver_id()"><?php echo ($fila['par']);?></td>
                        <td onmouseover="ver_id()"><?php echo ($fila['rank']);?></td>
                        <td onmouseover="ver_id()"><?php echo($fila['manufacturing']);?></td>
                        <td onmouseover="ver_id()"><?php echo ($fila['par']);?></td>
                        <td onmouseover="ver_id()"><span class="editar">Editar</span></td>
                        <td align="left" onmouseover="ver_id()"><?php echo ($fila['short_description']);?></td>
                        <td style="display:none"><?php echo ($fila['description']);?></td>
                    </tr>
                <?php
                }
                ?>
            </tbody>
        </table>
     </div>
 
 
     <div id="TablaD">
 
        <table>
            <thead>
                <td>Descripción</td>
             </thead>
     </div>
 
     <table id="tabla"> //Aqui es donde muestra la descripción larga con la función "ver_id()"
         <tr>
        <td id="tdDesc"></td>
         </tr>
    </table>
         <p></p>
 
 </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
//Funcion "ver_id()"
 
function ver_id() {
 
 
    if (!document.getElementsByTagName || !document.createTextNode) return;
    var rows = document.getElementById('tablaParametros').getElementsByTagName('tr');
    for (i = 0; i < rows.length; i++) {
        rows[i].onmouseover = function() {
		var result = this.getElementsByTagName('td')[8].innerHTML;
 
 
		//result = result.replace(/\r?\n/g, "'+\\n+'"); //no funciona
				result = result.replace(/\r?\n/g, "<br>"); //me muestra en el texto las etiquetas <br>
 
 
 
			//BORRA LOS DATOS DE LA TABLA que contiene la descripcion
                            var row = document.getElementById("");
                            document.getElementById("tabla").deleteRow(row);
 
 
 
 
                            var tbl = document.getElementById("tabla");
                            var tblBody = document.createElement("tbody");
 
 
 
 
                                var fila = document.createElement("tr");
 
                                var celda = document.createElement("td");
                                textoCelda = document.createTextNode(result);
 
 				celda.appendChild(textoCelda);
                                fila.appendChild(celda);
                                tblBody.appendChild(fila);
 
 
 
                            tbl.appendChild(tblBody);
                            tbl.setAttribute("border", "2");
 
        }
 
    }
 
}
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: 2.725
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Funcion que muestra una descripcion larga sin saltos de linea

Publicado por joel (612 intervenciones) el 22/10/2020 10:42:29
Al ver tu código lo veo un tanto liado... veo que eliminas filas, las vuelves a crear... todo un lió... Porque no reemplazas el ultimo texto del id "tdDesc"?

El replace de la linea 14 lo veo correcto!!!

Lo que no veo correcto es que lo pongas en un createTextNode... ahi solo va texto, sin HTML... si mira la documentación https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode te dice: "Creates a new Text node. This method can be used to escape HTML characters."

Una manera correcta seria:
1
2
var celda = document.createElement("td");
celda.innerHTML=result;

Coméntanos, ok?
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
sin imagen de perfil

Funcion que muestra una descripcion larga sin saltos de linea

Publicado por Maria (4 intervenciones) el 22/10/2020 10:50:10
Muchas Gracias... lo pruebo y os digo algo
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
sin imagen de perfil

Funcion que muestra una descripcion larga sin saltos de linea

Publicado por Maria (4 intervenciones) el 22/10/2020 10:55:09
Super agradecida!!! tenia semanas atascada con esto, como he dicho antes, no manejo js... Funciona!!! Gracias
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