0

Estoy intentando acceder al contenido de un fichero con extensión .html desde Vue.js.

Para hacerlo más visual, el contenido del archivo mi-tabla.html es:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>

Y mediante Vue.js quiero acceder a ese archivo para poder recorrerlo y realizar una búsqueda. Por ejemplo extraer la información de la fila que contenga Alemania (country=Germany).

En primer lugar ¿es posible?. Si es así ¿cómo puedo obtener el contenido de mi-tabla.html?. Y en segundo lugar, una vez accedo al contenido ¿cuál sería la mejor manera de recorrerlo para realizar búsquedas sobre él y extraer la fila deseada?

1
  • 1
    La pregunta es muy amplia en si, pues la solución base es con el lenguaje JS
    – user128299
    Commented el 29 mar. 2020 a las 18:33

1 respuesta 1

-1

En el html justo antes del cierre de la etiqueta body pones lo siguiente:

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="Vue.js"></script>

Para poder acceder a la informacion, esto es un pequeño ejemplo:

$(document).ready(function(){
    //Ejemplo de como guardar en una variable el contenido de una celda
    //En este caso seria Germany
    //El :eq() empieza a contar desde 0
    var country = $('table > tr:eq(1) > td:eq(2)').text();
    //Mostrar contenido de la variable con alert();
    alert(country);
});

Deberías consultar como acceder al DOM con jquery y manipular la información

4
  • No veo para que JQuery si el OP lo que usa es VueJS y es con este con el que trata de acceder a los elementos
    – user128299
    Commented el 29 mar. 2020 a las 18:22
  • @BetaM Cuando en la pregunta Geline hizo mencion a Vue.js entendi que se trataba de un archivo javascript o jquery ya que estos tienen la extension .js. El motivo por el que puse un pequeño ejemplo con jquery es por que es mas sencillo que hacerlo con javascript
    – JPillado
    Commented el 29 mar. 2020 a las 18:29
  • @BetaM por como tiene puesta la pregunta entendí que tenia un archivo con el nombre Vue.js. Acabo de enterarme de que se trata de un framework.
    – JPillado
    Commented el 29 mar. 2020 a las 18:39
  • @Geline disculpame, malentendí tu pregunta, espero que des con la solución.
    – JPillado
    Commented el 29 mar. 2020 a las 18:40

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.