2. 程式人生 > >JS生成表格，合併單元格

JS生成表格，合併單元格

阿新 • • 發佈：2019-01-03


在網上找了這麼多都沒有JS生成表格然後JS操作合併單元格的，或者是別人寫的太負責了，又不想去理解，所以就自己動手寫了個簡單點的。

其實程式碼也不多，思路清晰就基本上可以了。一開始的時候是被colspan蒙了，因為要注意大小寫才可以的。看下程式碼，

  1. <html> 
  2. <head> 
  3. <script type="text/javascript"> 
  4. function showRowOrColTable(){ 
  5. //建立table
  6.     var table = document.createElement("table"); 
  7.         var projectid=3; //看圖下合併多少列就寫多少
  8.         table.border = "1"; 
  9.         var rowIndex = 0; 
  10.         var rowStart = 0; 
  11.         var rowLength = 2; 
  12.         var colIndex = 1; 
  13.         var colLength = 2; 
  14.         var projectLength=projectid*2; 
  15.         for ( var i = 0; i < 5; i++) { 
  16.             var row = table.insertRow(i); 
  17.             for ( var
     j = 0; j < projectLength+1; j++) { 
  18.                 var cell = row.insertCell(j); 
  19.                 cell.innerHTML = "hello world"; //賦值內容
  20.             } 
  21.         } 
  22.         for ( var j = 0; j <= rowIndex; j++) { 
  23.             table.rows[j].cells[colIndex].colSpan = projectid; 
  24.             table.rows[j].cells[projectid*2-1].colSpan = projectid; 
  25.             for ( var i = 0; i < projectid - 1; i++) { 
  26.                 table.rows[j].deleteCell(colIndex+1); 
  27.                 table.rows[j].deleteCell(3); 
  28.             } 
  29.         } 
  30.         table.rows[rowIndex].cells[rowStart].rowSpan = 2; 
  31.         table.rows[rowIndex + 1].deleteCell(0); 
  32.         table.rows[0].cells[0].innerHTML = "&nbsp;"; 
  33.         table.rows[0].cells[1].innerHTML = "個人得分"; 
  34.         table.rows[0].cells[2].innerHTML = "個人準確率"; 
  35.         table.rows[1].cells[0].innerHTML = "第一"; 
  36.         table.rows[1].cells[1].innerHTML = "第二"; 
  37.         table.rows[1].cells[2].innerHTML = "第一"; 
  38.         table.rows[1].cells[3].innerHTML = "第二"; 
  39.         var _row=table.rows[1]; 
  40.         document.getElementById("table").appendChild(table); 
  41.     } 
  42.     </script> 
  43.     </head> 
  44.     <body onLoad="showRowOrColTable()"> 
  45.         <div id="table"></div> 
  46.     </body> 
  47.     </html> 

如圖：

相關推薦

JS生成表格，合併單元格

在網上找了這麼多都沒有JS生成表格然後JS操作合併單元格的，或者是別人寫的太負責了，又不想去理解，所以就自己動手寫了個簡單點的。 其實程式碼也不多，思路清晰就基本上可以了。一開始的時候是被colspan

jxl生成表格（合併單元格，字型，樣式。。。）

public static String testEx() { // a, 計算路徑 SimpleDateFormat sdf = new SimpleDateFormat("/yyyy-MM-dd/"); String datePath = sdf.form

原生JS 實現表格的合併單元格

/* 引數:table或tbody的id,開始行號，結束行號，合併哪一列 mc('field_selection', 0, 4, 0); */

利用Freemarker生成doc檔案（包含list迴圈，ifelse判斷，合併單元格，嵌入表格單元格字數過多報錯等）

1、利用office等軟體開啟doc文件，另存為word2003xml形式的檔案。 2、修改xml中的需要動態生成的值，Freemarker變數為${data}格式的，修改完改成ftl字尾，複製到載入

Aspose.Cells 首次使用，用到模版填充資料，合併單元格，換行-https://www.cnblogs.com/gylspx/p/5961070.html

Aspose.Cells 首次使用，用到模版填充資料，合併單元格，換行 Aspose.Cells 首次使用，用到模版填充資料，合併單元格，換行 模版格式，圖格式是最簡單的格式，但實際效果不是這種，實際效果圖如圖2 圖2 ，注意看紅色部分，一對一是正常的，但是有一對多的訂單，就得把前

Markdown表格之合併單元格效果

1.例項分析   日常工作編輯文件繪製表格時，不僅僅需要規整的n*m行列表格，有時候也需要對錶格進行單元格合併，比如下圖：   但是Markdown本身不提供單元格合併語法，但是不要忘了，Markdown是相容HTML的，因此，我們可以通過HTML

phpexcel的居中顯示，合併單元格

phpexcel的居中顯示 所有單元格居中： $objPHPExcel->getDefaultStyle()->getAlignment()->setHorizontal(PHPExcel_Style_Alignment::HORIZO

poi匯出excel時，合併單元格後，求和不正確，即“假”合併

excel中所謂“真假”合併單元格 真合併：我們選擇一段連續的單元格,點選合併,這時候,EXCEL會提示如果合併只會顯示第一個單元格的資料,而且其他單元的的資料也會沒掉. 假合併：如果我們用一個已經合併的單元格,格式刷要合併的單元格,這時候沒有提示資料丟失的.事實上,這時候

java poi匯出Excel表，合併單元格

其他參考文章： http://www.cnblogs.com/bmbm/archive/2011/12/08/2342261.html http://www.cnblogs.com/xuyuanjia/p/5886056.html 這是一個struts2的act

element-ui中Table表格省市區合併單元格

import axios from 'axios' export default { name: "city", data() { return { tableData: [], //table的資料 originalData: [],//

js動態生成表格【含合併單元格的表格】

最近遇到需求，動態生成表格，類似Excel，支援合併單元格的表格，程式碼分享給大家~ 一、網上找到的簡單生成表格的例子： 以下是生成規則表格m行*n列類似，可以直接開啟HTML檢視結果。 <!DOCTYPE html> <html l

vue中 表頭th 合併單元格，且表格列數不定的動態渲染方法

吐槽 今天，在vue中遇到 複雜表格的渲染 ，需要合併表頭的單元格，且合併單元格的那列還是動態資料，也就是說你不知道會有多少組要合併起來，哎，我也有點說不清楚，廢話不多說了，看程式碼把： 程式碼示例 data資料是後端介面返回的，其中的資料格式是這樣的： [ { "studentId

H5 寫一個3x3表格，合併1和2單元格，4和7單元格

<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">    &nb

execl 表格合併單元格後大小不一樣的表格如何自動生成序號

我使用WPS進行演示，微軟的execl 方法一樣 第一步，需要一個基準，例如在A1格內輸入第一個序號，假設為1，如下圖 第二步，選擇需要編號的所有單元格，輸入公式  =MAX(A$1:A1)+1  ，然後按下CRTL+ENTRT即可。 特別注意=MAX(A$1:A1)+

table：表格設定table-layout：fixed屬性後，如果表格中第一行出現合併單元格，那麼後面tr中的td設定寬度無效

針對上面的問題，現在又兩種解決方法：  1 在表格的第一行設定一個隱藏的行如下:<tablestyle="table-layout: fixed; width:100%;">    <trstyle="display:none">        <

動態生成包含合併單元格的表格

<html xmlns="http://www.w3.org/1999/xhtml" ><head><title>標題頁</title><style>TABLE{font-family: 宋體;font-size:

VFP，當移動鼠標到表格某一個單元格時如何獲取表格當前值

com obi windows 移動 pla 5% mob mp3 hang Windows10Mobile%E6%AD%A3%E5%BC%8F%E7%89%88%E6%8E%A8%E9%80%81%EF%BC%81 http://zhangmen.baidu.cn/so

js 表格合並單元格

als pan else == 包括 In sta tex HR 5列 根據需要可添加 或 刪除 strOneTemp strTwoTemp strThreeTemp strFourTemp strFiveTemp //合並單元格 this.

實例：表格的相關操作：添加行，刪除行，編輯單元格

solid att align button 點擊 btn eat create lur html代碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

elementUI表格合併單元格

相信你肯定看了 ElementUI 官方文件了，沒看的話先去看下錶格各個屬性的意義，方便下文閱讀：傳送門 但你會發現此例過於簡單，死資料，但我們開發的時候往往都是後臺傳遞過來的資料，導致我們 rowspan 的引數需要自己做判斷，根據資料的相同行（或列