在添加元素之前制作空表

我試圖在添加行之前制作一個填充一些空間的表格......我嘗試制作一個高度為 500px 的空行，但這個 dosnt 似乎按預期作業。

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

我想讓它看起來像有 10 個空行，并且在使用 JS 添加元素時，它們似乎按順序占據了這些空間

這是預期的結果，但它是用閃光燈制作的

uj5u.com熱心網友回復：

您可以使用一排空的 td，將您的高度設定為 500px，并使用重復的背景線性漸變。下面的nth-child代碼適用于您有實際資料行的情況，而:first-child:last-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>

uj5u.com熱心網友回復：

這是獲得具有將填充下一個可用空行（如果有）的函式的空表的結果的眾多方法之一。

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>

uj5u.com熱心網友回復：

考慮到標題的當前字體大小，您可能無法將行/表格的寬度設為 500 像素，因為表格的實際寬度約為 700 像素。因此，您可能希望將它們減少到大約 0.7em。

但是您也可以使用輔助函式構建行/單元格，這樣您就不必在 HTML 中對它們進行硬編碼，然后您可以使用 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>

標籤：javascript html css

上一篇：使用點擊事件替換字串值

下一篇：中點公式在JS中回傳奇怪的輸出