如何使用javascript/jQuery使表格頁腳的colspan靈活？-有解無憂

我有一個動態 html 表，我想在頁腳中的某些計算位置放置總和。這些欄位有一個固定的 colspan 1。其他欄位應顯示為帶有變數 colspan 的單列。

在下面的示例中，我想在標題包含單詞“Sum”的位置添加這些頁腳總和 - 請注意，這些總和可能出現在表中的任何位置。

所有標題資料和“針”欄位都存盤在陣列中。

我正在獲取標題陣列中針的位置position = header.indexOf(column); //position of current needle

然后計算colspancolSpan = position - last_pos - el_span; //calculate colspan

最后，將元素添加到頁腳使用

$('#testTable tfoot tr').append("<th colspan=" colSpan "></th>");
$('#testTable tfoot tr').append("<th colspan=" el_span ">Sum</th>");

不知何故，第一個 sum 欄位總是在錯誤的位置 - 如何調整我的演算法來解決這個問題？

如何使用 javascript/jQuery 使表格頁腳的 colspan 靈活？

$(document).ready(function(){
  const header    = ["Info","Info","Info","Info","Sum1","Sum2","Info","Sum3","Info","Info","Sum4"];
  const needles   = ["Sum1","Sum2","Sum3","Sum4"];
  const el_span   = 1; //fixed colspan for sum column
  let   position  = 0; //position pointer, starting from 0
  let   last_pos  = 0; //last position stored
  let   colSpan   = 0; //calculated colspan, starting with 0
  
  for(const column of needles)
  {
    position = header.indexOf(column); //position of current needle
    colSpan  = position - last_pos - el_span; //calculate colspan
    last_pos = position;
    
    $('#testTable tfoot tr').append("<th colspan=" colSpan "></th>");
    $('#testTable tfoot tr').append("<th colspan=" el_span ">Sum</th>");
  }
  
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="testTable" class="table table-bordered">
  <thead>
    <tr>
      <th>Info</th>
      <th>Info</th>
      <th>Info</th>
      <th>Info</th>
      <th>Sum</th>
      <th>Sum</th>
      <th>Info</th>
      <th>Sum</th>
      <th>Info</th>
      <th>Info</th>
      <th>Sum</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>23</td>
      <td>2</td>
      <td>Text</td>
      <td>245</td>
      <td>Text</td>
      <td>Text</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>23</td>
      <td>2</td>
      <td>Text</td>
      <td>245</td>
      <td>Text</td>
      <td>Text</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>23</td>
      <td>2</td>
      <td>Text</td>
      <td>245</td>
      <td>Text</td>
      <td>Text</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>23</td>
      <td>2</td>
      <td>Text</td>
      <td>245</td>
      <td>Text</td>
      <td>Text</td>
      <td>4</td>
    </tr>    
  </tbody>
  <tfoot>
    <tr>
    
    </tr>
  </tfoot>
</table>

uj5u.com熱心網友回復：

我通過創建一個新spans[]陣列（最初包含一個 object {text:'', colspan:0}）和一個cursor來管理它，在陣列內部回圈時在某些條件下更新header[]。

然后我回圈header[].

每次header[]元素不在needles[]陣列內時，我都會增加里面物件的colspan值span[]。

如果標題元素包含在needles[]陣列中，我會在陣列中添加一個新物件spans[]。

最后，我有一個陣列，其中包含要附加的每個頁腳元素的文本和colspans。

它似乎運作良好，它也不關心陣列內元素的順序。needles[]

運行代碼片段Full-Page，以避免表格console.log() 重疊）。

$(document).ready(function() {
  const header = ["Info", "Info", "Info", "Info", "Sum1", "Sum2", "Info", "Sum3", "Info", "Info", "Sum4"];
  const needles = ["Sum1", "Sum2", "Sum3", "Sum4"];

  const spans = []; // new array
  let cursor = 0; // cursor
  spans[cursor] = {
    text: '',
    colspan: 0
  };

  for (let i = 0; i < header.length; i  ) {
    if (!needles.includes(header[i])) { // if not included,   colspan
      spans[cursor].colspan  ;
    } else {
      if (i !== 0) cursor  ; // only needed when we have a needle
                             // in the first header element

      // here I create the new objects
      // with the text Sum1, Sum2, etc
      // and colspan=1
      spans[cursor] = {};
      spans[cursor].text = header[i];
      spans[cursor].colspan = 1;

      if (i === header.length - 1) continue; // if I am at the end 
                                             // of the header array,
                                             // skip the next block


      // if the next element in the header array is not included
      // in needles, I already create a new element with
      // colspan = 0 for the next loop.
      // If the next element is also in needles it's not necessary
      // as it will be catched by else{} block in the next loop
      if (!needles.includes(header[i   1])) {
        cursor  ;
        spans[cursor] = {};
        spans[cursor].text = '';
        spans[cursor].colspan = 0;
      }
    }
  }

  console.log(spans);

  for (const span of spans) {
    $('#testTable tfoot tr').append(`<th colspan="${span.colspan}">${span.text}</th>`);
  }
});

.as-console-wrapper {
  max-height: 150px !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="testTable" class="table table-bordered">
  <thead>
    <tr>
      <th>Info</th>
      <th>Info</th>
      <th>Info</th>
      <th>Info</th>
      <th>Sum</th>
      <th>Sum</th>
      <th>Info</th>
      <th>Sum</th>
      <th>Info</th>
      <th>Info</th>
      <th>Sum</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>23</td>
      <td>2</td>
      <td>Text</td>
      <td>245</td>
      <td>Text</td>
      <td>Text</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>23</td>
      <td>2</td>
      <td>Text</td>
      <td>245</td>
      <td>Text</td>
      <td>Text</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>23</td>
      <td>2</td>
      <td>Text</td>
      <td>245</td>
      <td>Text</td>
      <td>Text</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
      <td>23</td>
      <td>2</td>
      <td>Text</td>
      <td>245</td>
      <td>Text</td>
      <td>Text</td>
      <td>4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>

    </tr>
  </tfoot>
</table>

uj5u.com熱心網友回復：

表生成器

此解決方案有一個 tableBuilder 函式，該函式從標題陣列創建表并接受標題和行數的可選引數。由于頁眉列確定頁腳布局，因此“needles”屬性似乎無關緊要，因此未使用。沒有必要使用 jQuery，尤其是從 Bootstrap 5 中洗掉了依賴項。

該片段創建了 2 個表，一個來自標頭陣列，另一個來自反向標頭陣列。總和列可以按任何順序移動，并且可以正確計算 colspan。如果 OP 只想要頁腳，而不是整個表格，那么很容易修改構建器以僅添加該部分。

運行代碼片段進行嘗試。

您可能需要向下滾動才能查看第二個表格

const header = ["Info", "Info", "Info", "Info", "Sum1", "Sum2", "Info", "Sum3", "Info", "Info", "Sum4"];

function tableBuilder(selector, header, caption, rowCount) {

  let thead = "",
    tbody = "",
    tfoot = "",
    row = "",
    n = 0;

  header.forEach(p => {

    thead  = `<th>${p}</th>`;

    row  = `<td> </td>`;

    if (p.indexOf("Sum") >= 0) {
      if (n > 0) tfoot  = `<th colspan="${n}"></td>`;
      tfoot  = `<th>${p}</th>`;
      n = 0;
    } else n  ;

  });
  
  // add last column when not a sum
  if (n > 0) tfoot  = `<th colspan="${n}"></th>`;
  
  for (n = 0; n < (rowCount || 4); n  ) tbody  = `<tr>${row}</tr>`;

  let table = document.querySelector(selector);

  table.innerHTML = `
  <caption>${caption || "Table"}</caption>
  <thead ><tr>${thead}</tr></thead>
  <tbody>${tbody}</tbody>
  <tfoot ><tr>${tfoot}</tr></tfoot>
  `;

}

// Test

tableBuilder("#table1", header, "Table", 2);

tableBuilder("#table2", header.reverse(), "Table - Reversed Header", 4);

th {
  font-size: 0.6rem;
}

.table caption {
  font-weight: bold;
}

<div class="p-2">
  <table id="table1" class="table table-striped table-bordered caption-top"></table>
  <table id="table2" class="table table-striped table-bordered caption-top"></table>
</div>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

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

標籤：javascript jQuery

上一篇：用javascript交換選擇文本？

下一篇：按鈕獲取特定輸入隱藏值JQuery