make empty table before adding elements-CodePudding

im trying to make a table that fills some space before adding rows... i tried making an empty row with a height of like 500px but this dosnt seems to work as intended.

<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>

I want to make it look like there are 10 empty rows and when adding elements with JS they appear occuping those spaces in order

This is the expected result, but its made with flash

CodePudding user response：

You could use a row of empty td that has your height set to 500px and uses a repeating background linear gradient. Below the nth-child code is for when you have actual rows of data and the :first-child:last-child is for when you don't have any data as the row will be the only child:

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>

CodePudding user response：

This is one of the many ways to achieve the result of having an empty table with a function that will populate the next available empty row (if any).

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>

CodePudding user response：

You probably can't make the width of the row/table 500px because the actual width of the table is around 700px given the current font size of the headings. So you may want to reduce those down to about 0.7em.

But you can also build the rows/cells using a helper function so you don't have to hardcode them in the HTML, and then you can style the table/cells using 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', '&nbsp;'));

// 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>