Create records in an HTML table

Question

Create records in an HTML table

Navigation

#1 by (0 votes)

0

How I am learning to program with a sequence of commands and I would like to consult information from a data sheet to HTML, but I can not do it. Try to do the same as this in this sequence create the table and then insert the data but I can not get it.

<!DOCTYPE html>

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">

<script>

   function mostrar(id,id2,id3){

          var division = document.getElementById(id); //se define la variable "el" igual a nuestro div
          var indice = document.getElementById(id2).selectedIndex;
          if( indice > 0 ){
              division.style.display = ''; //damos un atributo display:none que oculta el div
              var ss = SpreadsheetApp
              .openById("")
              .getSheetByName("Mantenimiento correctivo");
               var ultimoRegistro = ss.getLastRow()+1;
               var data = ss.getRange(1,ultimoRegistro).getValue();
               var tabla = document.getElementById(id3);
          }
          else
          {
               division.style.display = 'none'; 
          }    
        }       
   }

 </script>

<!--<html>
  <head>
    <base target="_top">
  </head>
  -->
  <body  bgcolor="e3e5e8">

<br><br>

<div align="center" >

<select id="option" name="nombre_area">
<option value="">Selecciona opción</option>
<option value="1">Administración</option>
<option value="2">Vestidores Mujeres</option>
<option value="3">Alberca</option>
</select>

<br>


<button id="buscar" onClick="mostrar('Mostrar_Tabla','option','Consulta')">Buscar</button>
<br><br><br>
</div>
<center>
<div id="Mostrar_Tabla" style="display:none">
<table border="1" id="Consulta">
        <caption>Consulta de solicitudes de mantenimiento</caption>
        <tr>
        <th>Area</th>
            <th>Folio</th>
            <th>Tema</th>
            <th>Descripción</th>
            <th>Fecha de registro</th>
            <th>Fecha de fin</th>
            <th>Estatus</th>
            <th>Autorización</th>
            <th>Fuera de servicio</th>
        </tr>
        </table>
</div>
</center>

<!--
</body>
</html>
-->

javascript

asked by Alejandro_H 01.11.2018 в 23:22

source

1 answer

Problem with modal window problem with regex preg_match php

score 0 · Answer 1

With the code that you have uploaded, I can not see your html code, but suppose that the definition of the table is as follows

                            <table>
                                <thead>
                                    <tr>
                                        <th>Dni</th>
                                    </tr>
                                </thead>
                                <tbody  id="body-id" align="center">
                                </tbody>

Pay attention, since the Html tables have two parts, the header (column titles) are declared between the <thead></thead> tags indicating each column with <th>Nombre de tu columna</th> .

Another part, very important is the <tdboy> where the rows of the table will be appended. It is necessary to declare an id, to be able to reference them with javascript or jquery according to what is easier for you.

Now suppose, that you have a function (that somehow receives parameters)

funcion cargarFilas(dni)
{
      //armo la celda
      celdaDni = '<td>'+ dni +'</td>';
      //armo la fila
      fila = '<tr>' + celdaDni + '</tr>'; 
      //con javascript creo el renglon
      var renglon = document.createElement('TR');
      //a ese renglon creado, le paso fila
      //con innerHTML puedes modificar la pagina, agregando texto o otras caracteristicas
      renglon.innerHTML = fila;
      //usando el id, accedo al body de la tabla y con appendchild le agrego la nueva fila
      document.getElementById('body-id').appendChild(renglon);
}

I hope it's useful for you, any questions we're seeing.