Traté de buscar en Google esta pregunta, y la respuesta a los cuadros de alerta personalizados en javascript suele ser el diálogo jquery. Y esto funciona muy bien con una consulta, pero tengo una tabla enorme donde se supone que se puede hacer clic en el 90% de las celdas para abrir una pequeña ventana de alerta con información.
Intenté una pregunta de Stack (enlace debajo). Pero la misma respuesta hizo una falla en el código.
Así que aquí está mi código de muestra que "funciona" ahora mismo:
<table> <tr> <td>Manufacturer</td> <td>Product</td> <td>Price range 1</td> <td>Price range 1</td> <td>Price range 1</td> </tr> <tr> <td>Umbrella Company</td> <td>Vaccine</td> <td><div onclick="alert('1399')">1399</div></td> <td><div onclick="alert('4299')">4299</div></td> <td><div onclick="alert('5999')">5999</div></td> </tr> </table>Esta opción funciona, pero no funciona de forma personalizada. Esta otra opción, con código personalizado con jQuery, funciona con una celda, y todas las demás celdas simplemente gritan la misma declaración.
Pruebe la fuente jsfiddle con ambas tablas, una con alert() y otra con jquery box.
¿No es posible hacerlo de esta manera?
Fuente uno: ¿Cómo cambiar el estilo del cuadro de alerta? Fuente dos: https://jsfiddle.net/olelasse/e6hk9340/
Podría evitar más duplicaciones usando funciones secundarias o pasando la referencia del elemento, pero esta es la idea general. No soy un gran admirador de las referencias DOM porque son frágiles. Mueve un elemento y todo va a Hades en una cesta de mano.
function functionAlert(msg) { var confirmBox = $("#confirm"); confirmBox.find(".message").text(msg); var myYes = confirmBox.find(".yes"); myYes.on('click', function() { confirmBox.hide(); }); //myYes.click(myYes); confirmBox.show(); } #confirm { display: none; background-color: #F3F5F6; color: #000000; border: 1px solid #aaa; position: fixed; width: 300px; height: 400px; left: 40%; top: 40%; box-sizing: border-box; text-align: center; } #confirm button { background-color: #FFFFFF; display: inline-block; border-radius: 12px; border: 4px solid #aaa; padding: 5px; text-align: center; width: 60px; cursor: pointer; bottom: 5px; } #confirm .message { padding: 5px; text-align: left; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> <title>JS Alert Box</title> </head> <body> <h2> Table 1 </h2> <h3> Alert() </h3> <table border="1"> <tr> <td>Manufacturer</td> <td>Product</td> <td>Price range 1</td> <td>Price range 2</td> <td>Price range 3</td> </tr> <tr> <td>Umbrella Company</td> <td>Vaccine</td> <td><div onclick="functionAlert('1399')">1399</div></td> <td><div onclick="functionAlert('4299')">4299</div></td> <td><div onclick="functionAlert('5999')">5999</div></td> </tr> <tr> <td>Umbrella Company</td> <td>Vaccine 2</td> <td><div onclick="functionAlert('1299')">1299</div></td> <td><div onclick="functionAlert('4199')">4199</div></td> <td><div onclick="functionAlert('5899')">5899</div></td> </tr> <tr> <td>Microhard</td> <td>PDA</td> <td><div onclick="functionAlert('999')">999</div></td> <td><div onclick="functionAlert('3599')">3599</div></td> <td><div onclick="functionAlert('6299')">6299</div></td> </tr> </table> <div id="confirm"> <div class="message"> </div> <button class="yes">Close</button> </div> </body> </html>No escriba el HTML a mano. Genere dinámicamente en función de sus datos. Puede usar una biblioteca como React, o simplemente usar el DOM como lo demostré a continuación.
De esta manera, no importa cuán grande sea su tabla, solo necesita escribir la lógica del controlador de eventos una vez. Hay formas adicionales en las que puede simplificar este código, pero la que elija dependerá de su experiencia y objetivos.
// All your data are belong to this array const data = [ ["Umbrella Company", "Vaccine", 1399, 4299, 5999], ["Soylent Corporation", "Soylent Green", 299, 399, 599], ["Omni Consumer Products", "ED-209", 19990, 39990, 78990], ["Tyrell Corporation", "Nexus-6", 27990, 31990, 59990], ]; const table = document.getElementById("products"); for (const row of data) { const tr = document.createElement("tr"); const manTD = document.createElement("td"); manTD.innerText = row[0]; tr.appendChild(manTD); const prodTD = document.createElement("td"); prodTD.innerText = row[1]; tr.appendChild(prodTD); const range1TD = document.createElement("td"); range1TD.innerText = row[2]; range1TD.addEventListener("click", function() { alert(row[2]); }); tr.appendChild(range1TD); const range2TD = document.createElement("td"); range2TD.innerText = row[3]; range2TD.addEventListener("click", function() { alert(row[3]); }); tr.appendChild(range2TD); const range3TD = document.createElement("td"); range3TD.innerText = row[4]; range3TD.addEventListener("click", function() { alert(row[4]); }); tr.appendChild(range3TD); table.appendChild(tr) } <table id="products"> <tr> <th>Manufacturer</th> <th>Product</th> <th>Price range 1</th> <th>Price range 1</th> <th>Price range 1</th> </tr> </table>Siempre que sea posible, intente mantener su código SECO, a continuación modifiqué su código para hacer lo siguiente->
Usó un controlador de eventos delegado en la tabla. Esto significa que solo necesita un evento para manejar todos los TD, y mejor aún si un TD se agregara dinámicamente más tarde, funcionaría con las líneas agregadas.
Usé una matriz para almacenar los datos, luego podemos usar esto para representar las líneas de la tabla.
Usé la propiedad .dataset para almacenar el tipo de datos almacenados en el TD, solo estoy usando esto para evitar que se muestre el cuadro de diálogo si no hace clic en un TD con números, pero podría haber usado una clase, o incluso analizado el .innerText
const data = [ ["Umbrella Company", "Vaccine", 1399, 4299, 5999], ["Umbrella Company", "Vaccine2", 1299, 4199, 5899], ["Microhard", "PDA", 999, 3599, 6299] ]; const table = document.querySelector('table'); const confirmBox = document.querySelector('#confirm'); const confirmBoxMsg = confirmBox.querySelector('.message'); const confirmBoxYes = confirmBox.querySelector('.yes'); function fillTable() { for (const d of data) { const tr = document.createElement('tr'); for (const v of d) { const td = document.createElement('td'); td.dataset.type = typeof v; td.innerText = v; tr.appendChild(td); } table.appendChild(tr); } } table.addEventListener('click', ev => { const td = ev.target.closest('td'); if (!td) return; //did with click a TD? if (td.dataset.type !== 'number') return; confirmBoxMsg.innerText = td.innerText; confirmBox.style.display = 'block'; }); confirmBoxYes.addEventListener('click', ev => { confirmBox.style.display = 'none'; }); fillTable(); #confirm { display: none; background-color: #F3F5F6; color: #000000; border: 1px solid #aaa; position: fixed; width: 300px; height: 400px; left: 40%; top: 40%; box-sizing: border-box; text-align: center; } #confirm button { background-color: #FFFFFF; display: inline-block; border-radius: 12px; border: 4px solid #aaa; padding: 5px; text-align: center; width: 60px; cursor: pointer; bottom: 5px; } #confirm .message { padding: 5px; text-align: left; } <html> <head> <title>JS Alert Box</title> </head> <body> <h2> Table 1 </h2> <h3> Alert() </h3> <table border="1"> <tr> <td>Manufacturer</td> <td>Product</td> <td>Price range 1</td> <td>Price range 2</td> <td>Price range 3</td> </tr> </table> <div id="confirm"> <div class="message"> </div> <button class="yes">Close</button> </div> </body> </html>