如何在腳本中向此div表添加表頭？-有解無憂

我div-table動態地填充了它，但是鑒于它的構建方式，我找不到向它添加標題的方法。

HTML 片：

<div class="block div-table" id="sidebar-record-block"></div>

這是動態填充表格的腳本：

function showRecord(record) {
    if (record.length) {
      for (var i = 0; i < record.length; i  ) {
        // build field name on the fly, formatted field-1234
        var str = ''   i;
        var fieldId = 'field-'   ('0000'   str).substring(str.length)

        // If this field # doesn't already exist on the page, create it
        if (!$('#' fieldId).length) {
          var newField = $($.parseHTML('<div id="' fieldId '"></div>'));
          $('#sidebar-record-block').append(newField);
        }

        // Replace content of the field div with new record
        $('#' fieldId).replaceWith('<div id="' fieldId '" ></div>');
        $('#' fieldId).append('<input id=checkBox type="checkbox"</input>')
                      .append($('<div >'   record[i].heading   '</div>'))
                      .append('<div >'   record[i].cellval   '</div>')             
      }  
    }

這是css的樣子：

.div-table {
    display: table;
    width: auto;
    border-spacing: 3px;
  }

  .div-table-row {
    display: table-row;
    width: auto;
    clear: both; 
 }

  .div-table-td,
  .div-table-th {
    display: table-cell;
    width: 190px;
    background-color: rgb(245, 241, 239);
  }

這是預期的結果：如何在腳本中向此 div 表添加表頭？感謝您的幫助！

uj5u.com熱心網友回復：

實際上，您幾乎擁有所需的任何東西。訣竅只是將行的標題作為不同樣式的行元素添加到自定義表中。

例如：

.div-table {
    display: table;
    width: auto;
    border-spacing: 3px;
  }

  .div-table-row {
    display: table-row;
    width: auto;
    clear: both; 
 }

  .div-table-td,
  .div-table-th {
    display: table-cell;
    width: 190px;
    background-color: rgb(245, 241, 239);
  }
  
  .div-table-header {
    display: table-cell;
    width: 190px;
    text-align: center;
  }

<div class="block div-table" id="sidebar-record-block">
  <div class="div-table-row">
    <div>Sel</div>
    <div class="div-table-header">Color</div>
    <div class="div-table-header">Hex</div>
  </div>
  <div class="div-table-row">
    <input type="checkbox">
    <div class="div-table-th">amarelo suave</div>
    <div class="div-table-td">EEEA97</div>
  </div>
  <div class="div-table-row">
    <input type="checkbox">
    <div class="div-table-th">verde</div>
    <div class="div-table-td">00FF00</div>
  </div>
</div>

在運行時動態創建它與您已經擁有的代碼沒有太大區別。

只需在 for 回圈的開頭添加以下內容：

if(i==0) {
   $('#sidebar-record-block').append($($.parseHTML('<div class="div-table-row"><div>Sel</div><div class="div-table-header">Color</div><div class="div-table-header">Hex</div></div>')));
      }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/419481.html

標籤：

上一篇：如何使用GAS從側邊欄上的html表中獲取檢查行的值？

下一篇：谷歌作業表腳本自動添加帶有復制公式的新行