0
242
Views¿Cómo creo un botón que, cuando se hace clic, muestra datos en node.js?
Así que creé un botón, junto con una tabla que muestra datos de mi base de datos. Sin embargo, quiero que esos datos aparezcan solo cuando se hace clic en el botón. Entonces, cuando se hace clic en el botón, quiero que aparezca una fila aleatoria de una tabla específica que tengo en mi base de datos. 
`<button id="breakfast2">Breakfast</button> <table id="mealTableContainer2"> <thead> <tr> <th id="mealname">Meal Name</th> <th id="mealcalories">Calories</th> <th id="mealtype">Type of Meal</th> </tr> </thead> <tbody id="mealContainer2"></tbody> </table>`El único Javascript que tengo actualmente es para colocar mi base de datos en esa tabla, pero realmente solo quiero que aparezca cuando hago clic en el botón de desayuno. Simplemente no puedo entender cómo; si alguien me lo pudiera explicar de forma muy sencilla se lo agradeceria un monton!
console.log('Data2 received') $.ajax({ url: 'http://localhost:5000' + "/read-recordsrandom", type: 'get', success: function(response) { var data2 = JSON.parse(response); if(data2.msg === "SUCCESS"){ console.log(data2.meal) createMealTable2(data2.meal); } else { console.log(data2.msg); } }, error: function(err){ alert(err); } });}
function createMealTable2(data2) { var tableHTML2 = " "; console.log("Test"); for(var i=0; i < data2.length; i++){ tableHTML2 += "<tr>"; tableHTML2 += "<td>" + data2[i].mealname + "</td>"; tableHTML2 += "<td>" + data2[i].mealcalories + "</td>" tableHTML2 += "<td>" + data2[i].mealtype + "</td>"; tableHTML2 += "</tr>"; } $('#mealContainer2').html(tableHTML2);}
3 answers
Answer question0
Ocultarlo inicialmente y luego mostrarlo
document.getElementById("breakfast2") .addEventListener('click', function(event) { document.getElementById("mealTableContainer2").classList.remove('hidden'); }); .hidden { display: none; } <button id="breakfast2">Breakfast</button> <table id="mealTableContainer2" class="hidden"> <thead> <tr> <th id="mealname">Meal Name</th> <th id="mealcalories">Calories</th> <th id="mealtype">Type of Meal</th> </tr> </thead> <tbody id="mealContainer2"></tbody> </table>0
Si tengo razón, por defecto, se supone que la tabla está oculta. Entonces, en primer lugar, puede ocultar la tabla con css
Cambia esta línea para ocultar la tabla.
<table id="mealTableContainer2" style="display: none;">Después de eso, deberá agregar un detector de eventos en el botón "desayuno" en javascript para mostrar la tabla al hacer clic
document.getElementById("breakfast2").addEventListener("click", function() { document.getElementById("mealTableContainer2").style.display = "block"; });0
Así es como puedes hacer clic en ajax
NOTA: `` son acentos graves que se utilizan en los límites literales de la plantilla y DEBEN ser acentos graves
$(function() { const createMealTable2 = data => { $('#mealContainer2') .html(data.map(meal => `<tr> <td>${meal.mealname}</td> <td>${meal.mealcalories}</td> <td>${meal.mealtype}</td> </tr>`) .join("") ) }; $("#breakfast2").on("click", function() { $.ajax({ url: 'http://localhost:5000' + "/read-recordsrandom", type: 'get', success: function(response) { var data2 = JSON.parse(response); if (data2.msg === "SUCCESS") { createMealTable2(data2.meal); } else { console.log(data2.msg); } }, error: function(err) { alert(err); } }); }) }) <button type="button" id="breakfast2">Breakfast</button> <table id="mealTableContainer2"> <thead> <tr> <th id="mealname">Meal Name</th> <th id="mealcalories">Calories</th> <th id="mealtype">Type of Meal</th> </tr> </thead> <tbody id="mealContainer2"></tbody> </table>