0
150
Viewshacer una tabla vacía antes de agregar elementos
Estoy tratando de hacer una tabla que llene algo de espacio antes de agregar filas... Traté de hacer una fila vacía con una altura de 500 px, pero parece que esto no funciona según lo previsto.
<table> <thead> <tr> <th>ID ARTICULO</th> <th>NOMBRE</th> <th>FORMATO</th> <th>CANTIDAD</th> <th>POR</th> <th>TOTAL</th> <th>LOTE</th> <th>FECHA VENC</th> <th>Valor Tot</th> <th>Valor Unit</th> </tr> </thead> <tbody> <tr style="height:500px ;"></tr> </tbody> </table>Quiero que parezca que hay 10 filas vacías y al agregar elementos con JS aparecen ocupando esos espacios en orden
Este es el resultado esperado, pero está hecho con flash.
3 answers
Answer question0
Puede usar una fila de td vacía que tenga su altura establecida en 500 px y use un degradado lineal de fondo repetitivo. Debajo, el código del nth-child es para cuando tiene filas reales de datos y el :first-child:last-child es para cuando no tiene ningún dato, ya que la fila será el único hijo:
table { border: 1px solid black; border-collapse: collapse; } th, td { border: 1px solid black; } tbody tr:nth-child(odd) td { background: #cccccc; } tbody tr:nth-child(even) td { background: #ffffff; } tbody tr:first-child:last-child td { /* the 50px increments here is the height of the td divided by 10 to make it look like you have ten rows) */ background: repeating-linear-gradient(#cccccc, #cccccc 50px, #ffffff 50px, #ffffff 100px); ); } <table> <thead> <tr> <th>ID ARTICULO</th> <th>NOMBRE</th> <th>FORMATO</th> <th>CANTIDAD</th> <th>POR</th> <th>TOTAL</th> <th>LOTE</th> <th>FECHA VENC</th> <th>Valor Tot</th> <th>Valor Unit</th> </tr> </thead> <tbody> <tr style="height:500px;"> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table>0
Esta es una de las muchas formas de lograr el resultado de tener una tabla vacía con una función que llenará la siguiente fila vacía disponible (si la hay).
initTable(5); const fixedRow = [1,2,3,4,5,6,7,8,9,10] ; function initTable(nRows){ const nCols = document.querySelectorAll('#mytable thead tr th').length; const tbody = document.querySelector('#mytable tbody'); for(let j=0; j<nRows; j++){ const tr = document.createElement('tr'); tr.setAttribute('data-empty', 'true'); for(let k=0; k<nCols; k++){ const td = document.createElement('td'); tr.appendChild(td); } tbody.appendChild(tr); } } function populateNextEmptyRow(datarow){ const table = document.querySelector('#mytable'); const firstEmptyRow = document.querySelector('#mytable tbody tr[data-empty=true]'); if (firstEmptyRow == null){ console.log('no more available empty rows'); return; } let i=0; for(cellvalue of datarow){ firstEmptyRow.children[i].innerText = cellvalue; i++; } firstEmptyRow.setAttribute('data-empty', 'false'); } #mytable td{ border: solid 1px lightgray; height: 2rem; text-align: center; } button { cursor: pointer; margin-top: 5px; } <table id="mytable"> <thead> <tr> <th>ID ARTICULO</th> <th>NOMBRE</th> <th>FORMATO</th> <th>CANTIDAD</th> <th>POR</th> <th>TOTAL</th> <th>LOTE</th> <th>FECHA VENC</th> <th>Valor Tot</th> <th>Valor Unit</th> </tr> </thead> <tbody> </tbody> </table> <button onclick="populateNextEmptyRow(fixedRow);">populateNextRow</button>0
Probablemente no pueda hacer que el ancho de la fila/tabla sea de 500 px porque el ancho real de la tabla es de alrededor de 700 px dado el tamaño de fuente actual de los encabezados. Por lo tanto, es posible que desee reducirlos a aproximadamente 0,7 em.
Pero también puede crear las filas/celdas usando una función de ayuda para que no tenga que codificarlas en el HTML, y luego puede diseñar la tabla/celdas usando CSS.
// Take in a number, a type, and a value, // create a new array of template strings // and then join that array up into an HTML string function builder(n, type, value) { return new Array(n) .fill('') .map(el=> `<${type}>${value}</${type}>`) .join(''); } // Create some HTML: a set of 10 rows that have 10 cells const html = builder(10, 'tr', builder(10, 'td', ' ')); // Attach that HTML to the table body const tbody = document.querySelector('tbody'); tbody.innerHTML = html; table { border-collapse: collapse; border: 1px solid #565656; width:500px; table-layout: fixed; } th { font-size: 0.7em; background-color: white; text-transform: lowercase; } th:first-letter { text-transform: capitalize; } th, td { border: 1px solid #dfdfdf; padding: 0 0.3em;} tr:nth-child(odd) {background-color: #efefef;} td { width: 10%; } <table> <thead> <tr> <th>ID ARTICULO</th> <th>NOMBRE</th> <th>FORMATO</th> <th>CANTIDAD</th> <th>POR</th> <th>TOTAL</th> <th>LOTE</th> <th>FECHA VENC</th> <th>Valor Tot</th> <th>Valor Unit</th> </tr> </thead> <tbody> </tbody> </table>