1

Tengo una tabla hecha con HTML y JavaScript.

var ths = document.getElementsByTagName("th");
var tds = document.getElementsByTagName("td");

for (var i = 0; i < ths.length; i++) {

  ths[i].style.color = "red";

}

for (var i = 0; i < tds.length; i++) {

  tds[i].style.color = "green";

}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
 
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
 
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Y quisiera que por medio de JavaScript Básico (estoy aprendiendo a usarlo y no se mas allá de Jquery) me localice y me modifique el color de una palabra, que en este caso seria John . Se que puede ser por medio de esta función:

color = document.getElementsByTagName('td');
color[6].style.color="green";

Pero no hace la función de buscar la palabra, encontrar la palabra y cambiarle el color de la palabra.

10
  • para cambiar el color de una sola palabra hay que encerrarla en algun tipo de tag (por ej agregando un <span>) lo cual implica modificar el DOM actual. seria un, buscar la palabra y remplazarla por la palabra encerrada en dicho tag... no es algo muy practico para una aplicacion de la vida real. Capaz no entendi bien el post, puedes mejorar la redaccion o hacer las aclaraciones necesarias. Commented el 25 jul. 2017 a las 18:50
  • 1
    Estoy casi seguro que hay una pregunta similar, lo que pasa es que era sobre hacer highlight o algo así en el texto. Voy a buscarla y la pongo por aqui.
    – Alvaro Montoro
    Commented el 25 jul. 2017 a las 21:17
  • 1
    Mira esta preguntas y esta otra. Creo que la soluciones de esas dos preguntas te pueden servir para lo que quieres... y estoy casi seguro que debe de haber al menos otra más, porque creo recordar que yo respondí a algo parecido, pero no consigo encontrarla.
    – Alvaro Montoro
    Commented el 25 jul. 2017 a las 21:23
  • 1
    @AlvaroMontoro Ya resolvi mi problema gracias
    – Reinos Ric
    Commented el 25 jul. 2017 a las 21:56
  • 1
    ¿Cómo lo hiciste al final?
    – Alvaro Montoro
    Commented el 25 jul. 2017 a las 22:08

1 respuesta 1

2

Puedes usar características avanzadas de JS. Debes usar document.designMode junto con execCommand para poder editar el documento.

La mayoría de los comandos afectan a la selección de documento (negrita, cursiva, etc.), mientras que otros insertar nuevos elementos (añadiendo un enlace) o afectan a toda una línea (sangría).

Te muestro cómo quedaria tu código:

    //recuperamos el valor que queremos resaltar
    var text = "John";
    document.designMode = "on";
    var sel = window.getSelection();
    sel.collapse(document.getElementById("resultat"), 0);

    while (window.find(text)) {
        document.execCommand("HiliteColor", false, "lightgreen");
        sel.collapseToEnd();
    }
    document.designMode = "off";
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
</head>

<body>
    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>

        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>

        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>80</td>
        </tr>
    </table>

</body>


</html>

3
  • Hola @sakulino se me hace algo avanzado, como por ejemplo, trato de cambiarle "HiliterColor" por "Color" para que así solo me cambie el color de letra y no me la subraye. Pero no logro que haga ese cambio... je, si me pudieras decir como pudiera lograr ese cambio por favor
    – Reinos Ric
    Commented el 25 jul. 2017 a las 21:27
  • Prueba con "ForeColor" Commented el 25 jul. 2017 a las 21:30
  • Ya, me funciono gracias
    – Reinos Ric
    Commented el 25 jul. 2017 a las 21:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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