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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動態生成表格</title>
    <script type="text/javascript"></script>
</head>
<body 
>
行:<input type="text" id="h"/>&nbsp;
列:<input type="text" id="l"/><br/>
<input type="button" value="生成" onclick="addTable();"/>
<div id="div1">

</div>
<script type="text/javascript">
    function addTable() {
        var row1=document.getElementById("h").value;//獲取屬性值 

        var col1=document.getElementById("l").value;//獲取屬性值
        var div1=document.getElementById("div1");
        var tab="<table border='1' bordercolor='blue' width='200' height='10'>";
        //迴圈行
        for(var i=1;i<=row1;i++)
        {
            tab+="<tr>";
            //迴圈列
            for 
(var j=1;j<=col1;j++)
            {
                tab+="<td>單元格j</td>";
            }
            tab+="</tr>";
        }
        tab+="</table>"
         div1.innerHTML=tab;
    }
</script>
</body>
</html>

二、生成合並單元格樣式的表格，專案中遇到的，我是通過後臺介面拼出json串來展現表格的，下面只顯示頁面的東東，後臺暫時忽略：

//appendStr為表格HTML字串，"rowspan": 1, "colspan": 1為合併單元格的引數
var appendStr ='<div class="dashedDiv" id=' + block.id + ' showorder='+block.showOrder+' style="width:100%;">'
        + '<div class="row clearfix">'
        + '<div class="col-md-8 column">'
        + '<table class="columnTable table table-bordered">';
//json為js定義的一個json物件
var json = [{
            "rowindex": 0,
            "collist": [{"row_index": 0, "col_index": 0, "rowspan": 1, "colspan": 1,"correlation_value":"dfd"}, {
                "row_index": 0,
                "col_index": 1,
                "rowspan": 1,
                "colspan": 1, "correlation_value":"dfd"
            }, {"row_index": 0, "col_index": 2, "rowspan": 1, "colspan": 1,"correlation_value":"dfd"}]
        },
            {
                "rowindex": 1,
                "collist": [{"row_index": 1, "col_index": 0, "rowspan": 2, "colspan": 1,"correlation_value":"dfd"}, {
                    "row_index": 1,
                    "col_index": 1,
                    "rowspan": 1,
                    "colspan": 1,"correlation_value":"dfd"
                }, {"row_index": 1, "col_index": 2, "rowspan": 1, "colspan": 1,"correlation_value":"dfd"}]
            },
            {
                "rowindex": 2,
                "collist": [{"row_index": 2, "col_index": 1, "rowspan": 1, "colspan": 1,"correlation_value":"dfd"}, {
                    "row_index": 2,
                    "col_index": 2,
                    "rowspan": 1,
                    "colspan": 1,"correlation_value":"dfd"
                }]
            }];
            for (var i = 0; i < json.length; i++) {
            appendStr += "<tr>";
            //迴圈列
            for (var j = 0; j < json[i].colList.length; j++) {
                appendStr += "<td rowspan='" + json[i].colList[j].rowspan + "'>" + json[i].colList[j].correlationValue+ "</td>";
            }
            appendStr += "</tr>";
        }
        appendStr += '</table>'
                + '     </div>'
                + '     <div class="col-md-4 column">'
                + '     </div>'
                + ' </div>'
                + '</div>';
       //div_content為頁面div，存放table用
       $("#div_content").append(appendStr);

效果圖如下：
合併單元格的表格

—-第一次發博，大家可以多多溝通交流，提出寶貴意見哈~~~~~

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

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

jx-xlsx和handsontable顯示excel表格中的合併單元格

1、首先，使用js-xlsx讀取xlsx檔案：const XLSX = require('xlsx');var workbook = XLSX.readFile(files[0]);2、將workbook轉化為二重陣列在hansontable顯示var sheetArr =

JS生成表格，合併單元格

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

JS生成動態表格併為每個單元格新增單擊事件的方法

<html> <head> <title>Demo</title> <script> function getColumn

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

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

Js--動態生成表格

aaaaa tel 一個 click inpu document NPU UNC b+ <div> <h1>動態生成表格</h1> <div id="table1"> 行：&l

初學js---動態生成表格

tle innerhtml rip ont link -s oct ref 操作動態生成表格並封裝函數： 1.動態創建表頭　　*通過createElement(‘table‘)創建一個表格標簽——>通過createElement(‘thead‘)創建表頭——&g

js動態生成表格

htm round get test rem words contex .com cli 下面用js實現可以生成用戶所需行數的表格。 1.首先在body中填入下列代碼，獲取用戶填入的行數值 1 <table> 2 <tr> 3

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

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

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

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

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字尾，複製到載入

js動態生成html表格

剛在論壇上面逛的時候看到有人問html表格怎麼動態生成，我回了一下發現有好多小夥伴追問- - 看來還是有很多人不會的啊，於是決定寫個博來解救萬千小夥伴於水火之中（mdzz）首先我們要在html裡面有如下程式碼： <table>

2017-05-17 js動態生成輪播圖小圓點

輪播圖鼠標 borde images author eight 復習 innerhtml pad 從今天開始，把自己做的筆記轉移到博客園：今晚復習了一下動態創建輪播圖小圓點做了一下小的筆記： 1 <!DOCTYPE html> 2 <html l

elementUI表格合併單元格

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

Easyui datagrid 動態合併單元格實現

最近在頁面開發商遇到了一個新需求，要求在datagrid中實現同名單元格縱向合併效果，類似這樣官方demo中用的是死資料，不符合實際要求。通過對檢視API，確定datagrid的合併單元格通過提供起始位置（index），合併長度（rowspan）以及合併欄位名（field）。於是

AsposeWords操作表格合併單元格(word已經有的table 列合併指定兩個單元格既可以橫向合併也可以縱向合併)-http://www.xiaoguo123.com/p/aspose_w

20180725 親測可以 xjh 強大的AsposeWords for java不僅支援建立表格，還支援合併單元格。今天就簡明扼要記錄下如何實現合併單元格。大家可以完全套用本文提供的程式碼，只需要提供開始和結束的單元格即可實現合併，無需理解複雜的過程，真是簡潔好用啊。此

scrapy利用scrapy-splash爬取JS動態生成的標籤

1 引言 scrapy處理爬取靜態頁面，可以說是很好的工具，但是隨著技術的發展，現在很多頁面都不再是靜態頁面了，都是通過AJAX非同步載入資料動態生成的，我們如何去解決問題呢？今天給大家介紹一種方法：scrapy-splash 2 準備工作首先需要安裝一下幾個工具（1）

爬取JS動態生成的URL

愛卡汽車論壇搜尋結果頁面：想要python爬取搜尋結果連結：a標籤中的href，但是這個url是動態生成的。網頁原始碼：用普通方式解析： import urllib.request url = "http://search.xcar.com.cn/metasea

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

相關推薦