1

El asunto es el siguiente:

Necesito hacer, usando HTML, JavaScript o algun otro lenguaje que NO requiera de programas externos, una forma desde la cual se puedan ingresar datos a una tabla con 3 columnas que luego debe ser mostrada en otra página (digamosle forma.html y tabla.html).

Luego, el codigo de <td>'s y <tr>'s generado desde forma.html debe ser insertado en el codigo de tabla.html.

Esta tabla debe ser dinámica en el sentido de que debe actualizarse siempre que se realicen cambios desde forma.html, ya sea de agregar, modificar o eliminar datos.

No importa si el metodo no es muy seguro, en tanto cumpla con los requisitos (es un sitio web local).

Hasta el momento solo puedo ingresar los datos de forma manual (realmente no se mucho sobre javascript) pero necesito automatizar este proceso.

Quisiera tener algún trozo de codigo que compartir, pero no tengo aún nada hecho :/

Alguna idea?

Aclaración: NO TENGO ACCESO a otro software que el editor de texto (notepad++) y exploradores web

edit: aquí un ejemplo de la tabla que estoy usando:

    <table>

      <thead>
        <tr>
          <th id="nombArchivo"  align="center">Archivo</th>
          <th id="tipoArchivo"  align="center">Tipo</th>
          <th id="autoArchivo"  align="center">Autor (es)</th>
          <th id="descArchivo">Descripcion</th>
        </tr>
      </thead>

      <tbody>

        <tr>
          <td><a href="link del archivo">nombre del archivo</a> </td>
          <td>tipo de archivo</td>
          <td>autor del archivo</td>
          <td>nombre del archivo</td>
        </tr>

        <tr>
          <td><a href="link del archivo">nombre del archivo</a> </td>
          <td>tipo de archivo</td>
          <td>autor del archivo</td>
          <td>nombre del archivo</td>
        </tr>
...

Esto lo he tenido que escribir a mano para cada fila de la tabla en el codigo original.

12
  • 1
    Buenas revisa Cómo preguntar y ejemplo mínimo verificable para que te podamos ayudar.
    – Lithorell
    Commented el 29 jun. 2017 a las 13:52
  • ¿Esto lo guardas en base de datos? O donde se ve reflejado el cambio en tu formulario?
    – M. Gress
    Commented el 29 jun. 2017 a las 14:00
  • No puedo usar una base de datos relacional. Debe quedar escrito (según tengo entendido, pero no he podido hacer) en un documento plano; aunque si fuera posible que quede escrito directa y unicamente en el codigo html de tabla sería suficiente.
    – dsc
    Commented el 29 jun. 2017 a las 14:01
  • 1
    snif snif. Me huele a tarea de universitario... No entiendo por que taggeaste DataTables si es un plugin que necesita Jquery. Deberías de decirnos que es lo que llevas, no creo que nadie te de un código ya hecho. Commented el 29 jun. 2017 a las 14:17
  • OK, tengo una serie de archivos que deben estar disponibles para quien los necesite. El sitio web está en una carpeta compartida a la cual ciertos usuarios tienen acceso. Para proteger la integridad de estos archivos, los dejé a disposición de los usuarios a través de links de descarga. Uno de estos archivos es una tabla, la cual quiero que sea visualizable desde la web. Por eso necesito este script. No puedo decir más.
    – dsc
    Commented el 29 jun. 2017 a las 14:30

1 respuesta 1

1

Implementación de una solución con JS/HTML

En base al edit que está más abajo, y a que el OP compartió el formato de su tabla, se puede plantear una implementación.

Teniendo en cuenta que trabajamos sobre un solo archivo prueba.html.

El mismo posee la tabla HTML, y unos <input> para añadir registros a la misma.

El método es, mediante un botón Agregar, añadir los datos ingresados en los input al DOM de la página mediante JavaScript.

Y finalmente, se hayan añadido cuantos registros al DOM como se deseen, se puede guardar con el botón Guardar. El mismo utiliza también JavaScript para descargar un archivo con el nombre prueba.html.

Aquí viene la implementación: si configuras en el navegador utilizado, colocándole como carpeta por defecto en Descargas la misma carpeta donde se encuentra el original prueba.html, estarías escribiendo sobre el mismo, pudiendo almacenar todas las modificaciones hechas desde el navegador sobre el source-code.

El código de prueba.html es el siguiente:

<!DOCTYPE HTML>
<html><head>
<script>

function agregartabla() {
var table = document.getElementById("mitabla");

// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(-1);

// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);

// Add some text to the new cells:


var linkaagregar = document.getElementById("dirlink");
var nombre = document.getElementById("nombre");
var tipo = document.getElementById("tipo");
var autor = document.getElementById("autor");

cell1.innerHTML = '<a href="' + linkaagregar.value + '">' + nombre.value + '</a>';
cell2.innerHTML = tipo.value;
cell3.innerHTML = autor.value;
cell4.innerHTML = nombre.value;

linkaagregar.value = '';
nombre.value = '';
tipo.value = '';
autor.value = '';
}

var Download = {
    click : function(node) {
        var ev = document.createEvent("MouseEvents");
        ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        return node.dispatchEvent(ev);
    },
    encode : function(data) {
       
            return 'data:application/octet-stream;base64,' + btoa( data );
    },
    link : function(data, name){
        var a = document.createElement('a');
        a.download = name || self.location.pathname.slice(self.location.pathname.lastIndexOf('/')+1);
        a.href = data || self.location.href;
        return a;
    }
};
Download.save = function(data, name){
    this.click(
        this.link(
            this.encode( '<!DOCTYPE HTML>' + '\n' + document.documentElement.outerHTML ),
            name
        )
    );
};


</script>
</head>
<body>
      <table id="mitabla">

      <thead>
        <tr>
          <th id="nombArchivo" align="center">Archivo</th>
          <th id="tipoArchivo" align="center">Tipo</th>
          <th id="autoArchivo" align="center">Autor (es)</th>
          <th id="descArchivo">Descripcion</th>
        </tr>
      </thead>

      <tbody>

        <tr>
          <td><a href="link del archivo">nombre del archivo</a> </td>
          <td>tipo de archivo</td>
          <td>autor del archivo</td>
          <td>nombre del archivo</td>
        </tr>

 
        <tr><td><a href="linkdelarchivo">Prueba 1</a></td><td>PDF</td><td>Agustin</td><td>Prueba 1</td></tr></tbody></table>

            <input type="text" id="dirlink"><input type="text" id="tipo"><input type="text" id="autor"><input type="text" id="nombre">
<button onclick="agregartabla();">Agregar</button><br><a onclick="Download.save('hello world', 'prueba.html');"><button>Guardar</button></a> 


</body></html>

Te dejo unas capturas de como funciona.

introducir la descripción de la imagen aquí

EDIT: Respuesta Alternativa

Puedes implementar algo en base a lo que te voy a mostrar, se puede armar un código que solo utiliza HTML y JavaScript donde puedes descargar un texto, o el código HTML de una página como en este ejemplo:

var Download = {
    click : function(node) {
        var ev = document.createEvent("MouseEvents");
        ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        return node.dispatchEvent(ev);
    },
    encode : function(data) {
       
            return 'data:application/octet-stream;base64,' + btoa( data );
    },
    link : function(data, name){
        var a = document.createElement('a');
        a.download = name || self.location.pathname.slice(self.location.pathname.lastIndexOf('/')+1);
        a.href = data || self.location.href;
        return a;
    }
};
Download.save = function(data, name){
    this.click(
        this.link(
            this.encode( '<!DOCTYPE HTML>' + '\n' + document.documentElement.outerHTML ),
            name
        )
    );
};
<a onclick="Download.save('hello world', 'my_file.txt');"><button>Clickea para guardar</button></a> 

Se me ocurrió que puedes valerte de esto, para crear un botón que sea "Guardar", y modifiques la linea que nombra al archivo my_file.txt y ponerle tabla.html, y guardarlo físicamente escribiendo sobre el anterior tabla.html

Es una posible implementación.

Primer respuesta:

La respuesta es con JavaScript / HTML no se puede.

Si encuentras una solución, en base a navegadores o a Notepad++, no creo que sea sin utilizar alguna especie de plugin o de programa externo.

Te ahorré un poco de trabajo de búsqueda, y te contesto con algunas cosas que se me ocurrió buscar ya que tu pregunta también me interesó:

  1. Editar con JavaScript el código fuente de una página HTML: Pregunta en SO.
    Respuesta traducida

La respuesta es que no puedes hacer eso usando JavaScript. JavaScript sólo es capaz de manipular un DOM (Document Object Model). No hay acceso al sistema de archivos del servidor ni al sistema de archivos local (esto se debe a la limitación de seguridad del navegador). Es posible que necesite un script del lado del servidor como PHP para guardar el código modificado enviado por una solicitud POST como este tipo. Y el script de PHP del lado del servidor para sobrescribir el archivo original y tan pronto como se realiza la solicitud de Ajax, es necesario actualizar la ventana del navegador. Espero que esta ayuda te lo haya explicado.

7
  • Wow!... no es exactamente lo que buscaba, pero me sirve muy bien! Lo que buscaba era simplemente introducir el texto, aunque en link también me resulta supremamente útil... lo único que no entiendo es por qué los links que se generan no funcionan? Digo, cuando le doy a agregar se genera la nueva fila, pero al darle click al link, no funciona O.o... cuando le doy Guardar me genera un nuevo archivo con la tabla generada al principio y todos los links, pero ningun link funciona O_O
    – dsc
    Commented el 30 jun. 2017 a las 19:10
  • @dsc Lo que se está agregando como href al link es lo que completas en el primer input, ¿que estás colocando allí? ¿un link a un archivo? ¿o un link a un sitio? Si coloco www.google.com.ar si funciona, creo que estás intentando hacer un link a un archivo. ¿Estoy en lo cierto?
    – Agustin M.
    Commented el 30 jun. 2017 a las 19:13
  • Si, estaba colocando links a archivos, pero noté que el problema era que solo estaba incluyendo el subdirectorio y por eso no funcionada... puse el directorio completo y ya funcionó perfecto. Esto está maravilloso! Muchísimas gracias! :)
    – dsc
    Commented el 30 jun. 2017 a las 19:20
  • No hay de que, inclusive tuve un presentimiento que la pregunta era un desafío, para que tengas idea: stackoverflow.com/questions/33586351/… esa es una pregunta muy similar a la tuya y la cerraron porque la creyeron demasiado ámplia, y quizás pueda ser resuelta con mi respuesta ^^
    – Agustin M.
    Commented el 30 jun. 2017 a las 19:23
  • Solo me queda una duda: cómo puedo incluir un link a un estilo css en el archivo que se genera? por mas que intento no encuentro como o.o
    – dsc
    Commented el 30 jun. 2017 a las 19:36

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.