Visualización de resultados obtenidos de la base de datos en la interfaz (JavaScript / HTML / SQLite)

Quiero buscar registros de una base de datos, a la que quiero que se muestren los datos en la pantalla.

Desde el código a continuación, ya puede ver que la consulta que tengo es que si la base de datos contiene LIKE (entrada de datos), entonces alerta al usuario con “Evento Encontrado”, si no se encuentran datos, entonces “¡No hay evento!”.

Sin embargo, ahora quiero mostrar realmente los resultados en la pantalla en una tabla o en cualquier forma que sea presentable.

Sé que puede crear y visualizar la tabla dentro de la función javascript, pero no estoy muy seguro de cómo hacerlo. ¿Puede alguien darme una mano amiga? 🙂

function fetchEvent() { db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2*1024*1024); db.transaction(foundEvent, errorCB); } function foundEvent(tx) { var TitleT = document.getElementById("texttitle").value; tx.executeSql("SELECT * FROM SoccerEvents WHERE Title LIKE '%" + TitleT + "%'", [], renderEvent); } function renderEvent(tx,results) { if (results.rows.length > 0) { navigator.notification.alert("Event found"); } else { navigator.notification.alert("No event!"); } } 

HTML –

  
Select your option Tower Hamlets Greenwich Islington Bromley Hackney Lewisham

Las tablas constan de un árbol complejo de nodos, por lo tanto, para que este proceso sea cómodo y fácil, cree una tabla generada por Javascript en su página, insertando en su página un elemento DOM generado desde String, que contiene un marcado HTML normal .

Y hay dos formas generales de lograr esto.


1.

Primero: use .innerHTML de su elemento DOM.

Desventaja de este enfoque : en ciertas situaciones, provocará un comportamiento inesperado en el viejo IE. Se mencionan aquí: ¿Por qué funciona .html y no innerHTML o appendChild? Debe decirse que muchas empresas razonables han dejado de admitir IE <9, pero tuve que mencionarlo como una desventaja, ya que sus requisitos para el navegador no están especificados, por lo que tal vez podría ser una consideración importante para su proyecto.

Aquí está la implementación (sin protección contra fallas, me salté para mejorar la legibilidad del código):

    Example: inserting new HTML to DOM   

2.

Puede usar cualquier biblioteca de Javascript que lo abstraiga de los errores. Personalmente prefiero jQuery para las tareas de manipulación DOM.

Érase una vez un tipo muy agradable llamado John Resig decidió crear capa de abstracción y azúcar de syntax para manipular DOM con Javascript. Él creó jQuery. El objective de esta biblioteca es abstraerse del comportamiento extraño específico del navegador de la implementación de Javascript: hace que el comportamiento sea entre navegadores al proporcionar API entre navegadores, y los hack para contrarrestar esos errores están ocultos bajo el capó de jQuery.

Es el sitio jquery.com tiene una documentación en línea increíblemente bien hecha.

Desventaja de este enfoque : la syntax de jQuery es extraña para el progtwigdor de Javascript vainilla, por lo que tendrá que aprenderla si desea usarla, pero es bellamente expresiva para el dominio de la manipulación de DOM.

Mencionó que usa jQueryMobile: requiere que jQuery funcione en absoluto, lo que significa que tiene jQuery incluido en su página.

Aquí está la implementación de outputHtml, usando jQuery:

    Example: inserting new HTML to DOM with jQuery     

Generando HTML para la tabla:

Ahora que sabe cómo insertar su HTML en DOM, necesita generar HTML para su tabla. Puedes hacerlo a mano, pero te recomendaría usar una función especializada para que todo sea manejable.

A continuación, proporciono el código para la función de muestra que podría hacer su trabajo.

Podrías usarlo así:

 // actually, you should populate tableData // with data extracted from your database var tableData = [ [ 'header 1', 'header 2', 'header 3' ], [ '(x:1,y:1)', '(x:2,y:1)', '(x:3,y:1)' ], [ '(x:1,y:2)', '(x:2,y:2)', '(x:3,y:2)' ] ]; outputHtml( generateTableHtml( tableData ) ); 

Código para generateTableHtml:

  

Actualización: respuesta a los comentarios:

Antes que nada, si no tienes suficiente experiencia con JS y HTML para saber intuitivamente cómo encajar las piezas del rompecabezas que te di, estarás en un mundo de problemas. Porque esos no se pueden explicar de una manera simple. Para explicarlos, requieren escribir / traducir algunos libros y algunos blogs.

O podría pasar una semana o dos para tutoriales en línea. -_ ^ Y eso sería mucho más rentable.

Tengo mi propia vida para vivir ^ ^ Y necesitas entrenar tus propias alas para aprender a volar. Ayudar demasiado nos paralizaría a ambos a la larga. Por lo tanto, este es un buen lugar para despedirse.

PD

Su mejor opción para obtener resultados rápidos es encontrar alguna biblioteca de JavaScript que pueda generar el resultado de la consulta WebSQL de manera confiable para aquellos navegadores que pretenda admitir. Quizás puedas encontrar algo así en GitHub.

Pero, para finalizar lo que comencé, aquí hay un ejemplo de cómo se puede tejer el código para generar su solicitud a la mesa. Te doy dos bloques: scripts + html. Html es básicamente un formulario de su propia lista + div para la tabla de salida. En el bloque de scripts, tiene su script en el último scriptblock, y en esta implementación debe proporcionar los nombres de los campos manualmente. Los scripts deben ir antes de su formulario; de lo contrario, el código no funcionaría.

No implementé medidas de seguridad ya que son bastante individuales para cada proyecto.

Guiones:

      

HTML:

   

Gracias por su respuesta y respuesta Joan, es extremadamente útil. Ya había resuelto el problema pero olvidé publicar la respuesta.

 function foundEvent(tx) { var TitleT = document.getElementById("texttitle").value; tx.executeSql("SELECT * FROM SoccerEvents WHERE Title LIKE '%" + TitleT + "%'", [], renderEvent); } function renderEvent(tx, response) { var div = document.getElementById("responsediv"); var temp = ""; alert(response.rows.length); for (var i = 0; i < response.rows.length; i++) { temp += ""; div.innerHTML = temp; } }
TitleLocationNoPeopleDateDescription
" + response.rows.item(i).Title + "" + response.rows.item(i).Location + "" + response.rows.item(i).NoPeople + "" + response.rows.item(i).Date + "" + response.rows.item(i).Description + "