整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript的動態生成表格怎么寫?

          JavaScript中,可以使用DOM操作來動態生成表格。以下是一個基本的示例代碼,展示了如何通過JavaScript動態生成一個簡單的表格:

          ```javascript

          // 創建一個二維數組,表示表格中的數據

          var data = [

          ["姓名", "年齡", "性別"],

          ["張三", 25, "男"],

          ["李四", 30, "男"],

          ["王五", 28, "女"]

          ];

          // 獲取要插入表格的父元素

          var tableContainer = document.getElementById("table-container");

          // 創建表格元素

          var table = document.createElement("table");

          // 遍歷數據數組,逐行創建表格行和單元格

          for (var i = 0; i < data.length; i++) {

          var row = document.createElement("tr"); // 創建表格行

          for (var j = 0; j < data[i].length; j++) {

          var cell = document.createElement(i === 0 ? "th" : "td"); // 第一行創建表頭<th>,其他行創建表格單元格<td>

          cell.textContent = data[i][j]; // 設置單元格的內容

          row.appendChild(cell); // 將單元格添加到行中

          }

          table.appendChild(row); // 將行添加到表格中

          }

          // 將表格添加到父元素中

          tableContainer.appendChild(table);

          ```

          在上述代碼中,我們首先定義一個二維數組 `data`,用于存儲表格中的數據。然后,使用 `getElementById` 方法獲取要插入表格的父元素。接下來,使用 `createElement` 方法創建 `<table>` 表格元素,并使用嵌套的 `for` 循環遍歷數據數組,逐行創建表格行和單元格。對于第一行,我們創建表頭元素 `<th>`,其他行則創建表格單元格元素 `<td>`。最后,將創建好的表格元素和行、單元格依次添加到父元素中。

          你可以根據需要進一步修改代碼,例如添加樣式、動態更新表格數據等。希望對你有所幫助!

          有天老板找我到辦公室跟我說要做一個商城,商城賣出去東西就有傭金可以拿。我聽著就頭大。老板打開電腦給我看了網站:你看一下這個網站,照著它的流程就可以擁有一個商城了。我靠過去一看,大概了解一下:原來是利用第三方工具就可以構建一個導購網站,只要消費者在網站領取優惠券就會自動跳轉到某bao的購買頁面,購買成功后就可以有傭金了。我看了一下覺得可以,只要不讓我敲代碼一切好說。于是我照著流程構建了一個網站,然后勾選了很多零食進行推廣,然后我就發現了一個問題:我只勾選了一些零食啊,商城怎么還有其它類型的商品?我思索了一下就明白了,這網站還是挺流氓的,還摻雜著其他人的推廣鏈接,我一想這樣不行,轉化率肯定低啊。果不其然,試用了一天就只有5個單子,因為公司的網站還是挺有流量的,所以這轉化率不可能這么低。老板看了一下,覺得沒什么用讓我把商城入口給關了,我只好照做,但是我心里對這流氓網站不服啊,于是我打算自己做一個導購網站。(最后還是要敲代碼(。?_?)/~~~)

          想法

          1. 在推廣平臺上下載一個商品清單的excel文檔,文檔的內容包含:商品的名稱、商品的主圖鏈接、商品分類、商品價格、商品推廣鏈接.....。
          2. 利用python讀取excel,獲得分類、商品信息的json文件。
          3. 創建一個html頁面讀取json文件,把分類和商品顯示出來,利用html中的錨點定位,點擊就會滾動到對應的分類商品,就可以選擇心儀的商品下單,從而達到推廣商品的作用了。

          行動

          1. 安裝xlrd

          cmd窗口: pip install xlrd
          

          2.創建index.py,導入模塊

          import xlrd
          

          3.打開Excel文件讀取數據

          wb= xlrd.open_workbook('文件路徑')
          

          4.獲取表格

          sheet1 = wb.sheet_by_index(0) #這里的excel文檔內只有一個表格,0代表第一個
          

          5.獲取表格的行數

          rows = sheet1.nrows
          

          6.獲取表格中的類目

          商品一級類目

          住宅家具

          影音電器

          影音電器

          美容護膚

          廚房電器

          運動服/休閑服裝

          餐飲具

          category0 = sheet1.col_values(4) #獲取列內容(類目),這里excel文檔的第四列是類目
          del category0[0] #刪除列表中的 "商品一級類目"
          category = sorted(set(category0),key=category0.index) #類目列表->去除重復
          

          7.整理數據

          [ 
           [
           分類名,
           [商品信息]
           ],
           [
           分類名,
           [商品信息]
           ]
          ]
          data = []
          for i,v in enumerate(category):
           data.append([v,[]])
          for i,v in enumerate(data):
           for x in range(rows):
           if v[0] == sheet1.cell(x,4).value:
           data[i][1].append(sheet1.row_values(x))
          

          8.導出json文件

          jsonData = json.dumps(data, ensure_ascii=False)
          with open('results.json', 'w',encoding="utf-8") as f:
           f.write(jsonData)
          

          9.運行index.py,獲得json文件

          cmd窗口:python index.py
          

          10.創建html頁面,并引用json文件

          <!DOCTYPE html>
          <html lang="en">
          <head>
           <meta charset="UTF-8">
           <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
           <script>//引用jquery
           $(function(){
          function color16(){//十六進制顏色隨機
           var r = Math.floor(Math.random()*256);
           var g = Math.floor(Math.random()*256);
           var b = Math.floor(Math.random()*256);
           var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
           return color;
           }
          var navo = '';//類目導航
          var info = '';//商品內容
          $.get('./results.json', function(data) {//請求json文件
           
           $.each(data, function(index, val) {
           navo+="<a href='#"+val[0]+"''>"+val[0]+"</a> "
           });//把json文件中的類目數組遍歷出來,并用錨定位
           $.each(data, function(index, val) {
           var div_title = "<div id='"+val[0]+"' style='float:left;'>";
           var div_content = "";
           $.each(val[1], function(index, val) {
           div_content+="<div style='background:"+color16()+"' onclick=\"location.href=\'"+val[21]+"\'\" class='pro_img'>"+val[1]+"<span class='money'>¥"+val[6]+"</span><\/div>"
           });
           var div_footer ="</div><br>";
           info+=div_title+div_content+div_footer
           });
          $('#nav').html(navo);//把導航顯示出來
          $('#content').html(info);//把商品顯示出來
           },'json');
           })
           
           </script>
           <style>
           #content{
           margin-top: 10px
           }
           .money{
           position: absolute;
           left: 0;
           bottom: 0;
           height: 30px;
           line-height: 30px;
           color: #e22a40;
           font-weight: 700
           }
           .pro_img{
           position: relative;
           float: left;
           width: 220px;
           height: 220px;
           line-height: 220px;
           text-align: center;
           border: 1px solid #eee;
           cursor: pointer;
           font-size: 30px;
           white-space:normal; 
           overflow:hidden; /*超過部分不顯示*/
                text-overflow:ellipsis; /*超過部分用點點表示*/
                white-space:nowrap;*//*不換行
           }
           </style>
          </head>
          <body>
          <div id="nav"></div>
          <div id="content"></div>
          </body>
          </html>
          

          效果

          https://fjxasdf.github.io/daogou (github比較卡)

          遺留問題

          1. 導購頁面沒有樣式,不夠美觀。
          2. 沒有顯示商品圖片,由于excel文檔中有1萬條商品信息,把一萬張圖片顯示出來太卡了。

          文作者:HelloGitHub-kalifun

          這是 HelloGitHub 推出的《講解開源項目》系列,今天給大家推薦一個基于 Bootstrap 和 jQuery 的表格插件:Bootstrap-Table

          一、介紹

          從項目名稱就可以知道,這是一款 Bootstrap 的表格插件。表格的展示的形式所有的前端幾乎在工作中都有涉及過,Bootstrap Table 提供了快速的建表、查詢、分頁、排序等一系列功能。

          項目地址:https://github.com/wenzhixin/bootstrap-table

          可能 Bootstrap 和 jQuery 技術有些過時了,但如果因為歷史的技術選型或者舊的項目還在用這兩個庫的話,那這個項目一定會讓你的嘴角慢慢上揚,拿下表格展示方面的需求易如反掌!

          二、模式

          Boostatrp Table 分為兩種模式:客戶端(client)模式、服務端(server)模式。

          • 客戶端:通過數據接口將服務器需要加載的數據一次性展現出來,然后裝換成 json 然后生成 table。我們可以自己定義顯示行數,分頁等,此時就不再會向服務器發送請求了。
          • 服務器:根據設定的每頁記錄數和當前顯示頁,發送數據到服務器進行查詢。

          三、實戰操作

          Tips: 解釋說明均在代碼中以注釋方式展示,請大家注意閱讀。

          我們采用的是最簡單的 CDN 引入方式,代碼可直接運行。復制代碼并將配置好 json 文件的路徑即可看到效果。

          3.1 快速上手

          注釋中的星號表示該參數必寫,話不多說上代碼。示例代碼:

          <!DOCTYPE html>
          <html lang="en">
          <head>
           <meta charset="UTF-8">
           <title>Hello, Bootstrap Table!</title>
           // 引入 css
           <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
           <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
           <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
          </head>
          <body>
           // 需要填充的表格
           <table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>
          // 引入js
          <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
          <script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
          <script>
           window.operateEvents = {
           // 當點擊 class=delete 時觸發
           'click .delete': function (e,value,row,index) {
           // 在 console 打印出整行數據
           console.log(row);
           }
           };
          
           $('#tb_departments').bootstrapTable({
           url: '/frontend/bootstrap-table/user.json', //請求后臺的 URL(*)
           method: 'get', //請求方式(*)
           // data: data, //當不使用上面的后臺請求時,使用data來接收數據
           toolbar: '#toolbar', //工具按鈕用哪個容器
           striped: true, //是否顯示行間隔色
           cache: false, //是否使用緩存,默認為 true,所以一般情況下需要設置一下這個屬性(*)
           pagination: true, //是否顯示分頁(*)
           sortable: false, //是否啟用排序
           sortOrder: "asc", //排序方式
           sidePagination: "client", //分頁方式:client 客戶端分頁,server 服務端分頁(*)
           pageNumber:1, //初始化加載第一頁,默認第一頁
           pageSize: 6, //每頁的記錄行數(*)
           pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(*)
           search: true, //是否顯示表格搜索,此搜索是客戶端搜索,不會進服務端,所以個人感覺意義不大
           strictSearch: true, //啟用嚴格搜索。禁用比較檢查。
           showColumns: true, //是否顯示所有的列
           showRefresh: true, //是否顯示刷新按鈕
           minimumCountColumns: 2, //最少允許的列數
           clickToSelect: true, //是否啟用點擊選中行
           height: 500, //行高,如果沒有設置 height 屬性,表格自動根據記錄條數覺得表格高度
           uniqueId: "ID", //每一行的唯一標識,一般為主鍵列
           showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕
           cardView: false, //是否顯示詳細視圖
           detailView: false, //是否顯示父子表
           showExport: true, //是否顯示導出
           exportDataType: "basic", //basic', 'all', 'selected'.
           columns: [{
           checkbox: true //復選框標題,就是我們看到可以通過復選框選擇整行。
           }, {
           field: 'id', title: 'ID' //我們取json中id的值,并將表頭title設置為ID
           }, {
           field: 'username', title: '用戶名' //我們取 json 中 username 的值,并將表頭 title 設置為用戶名
           },{
           field: 'sex', title: '性別' //我們取 json 中 sex 的值,并將表頭 title 設置為性別
           },{
           field: 'city', title: '城市' //我們取 json 中 city 的值,并將表頭 title 設置為城市
           },{
           field: 'sign', title: '簽名' //我們取 json 中 sign 的值,并將表頭 title 設置為簽名
           },{
           field: 'classify', title: '分類' //我們取 json 中 classify 的值,并將表頭 title 設置為分類
           },{
           //ormatter:function(value,row,index) 對后臺傳入數據 進行操作 對數據重新賦值 返回 return 到前臺
           // events 觸發事件
           field: 'Button',title:"操作",align: 'center',events:operateEvents,formatter:function(value,row,index){
           var del = '<button type="button" class="btn btn-danger delete">刪除</button>'
           return del;
           }
           }
           ],
           responseHandler: function (res) {
           return res.data //在加載遠程數據之前,處理響應數據格式.
           // 我們取的值在data字段中,所以需要先進行處理,這樣才能獲取我們想要的結果
           }
           });
          </script>
          </body>
          </html>

          上面的代碼展示通過基本 API 實現基礎的功能,示例代碼并沒有羅列所有的 API。該庫還有很多好玩的功能等著大家去發現,正所謂師父領進門修行靠個人~

          3.2 拆解講解

          下面對關鍵點進行闡述,為了更方便使用的小伙伴清楚插件的用法。

          3.2.1 初始化部分

          選擇需要初始化表格。
          $('#tb_departments').bootstrapTable({})
          這個就像table的入口一樣。
          <table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>

          3.2.2 閱讀數據部分

          columns:[{field: 'Key', title: '文件路徑',formatter: function(value,row,index){} }]
          • field json 中鍵值對中的 Key
          • title 是表格頭顯示的內容
          • formatter 是一個函數類型,當我們對數據內容需要修改時會用它。例:編碼轉換

          3.2.3 事件觸發器

          events:operateEvents
           window.operateEvents = {
           'click .download': function (e,value,row,index) {
           console.log(row);
           }
           }

          因為很多時候我們需要針對表格進行處理,所以事件觸發器是一個不錯的選擇。比如:它可以記錄我們的行數據,可以利用觸發器進行定制函數的執行等。

          四、擴展

          介紹幾個擴展可以讓我們便捷的實現更多的表格功能,而不需要自己造輪子讓我們的工作更加高效(也可以進入官網查看擴展的具體使用方法,官方已經收集了大量的擴展)。老規矩直接上代碼:

          4.1 表格導出

          <script src="js/bootstrap-table-export.js"></script> 
          showExport: true, //是否顯示導出
          exportDataType: basic,								 //導出數據類型,支持:'基本','全部','選中'
          exportTypes:['json', 'xml', 'csv', 'txt', 'sql', 'excel'] //導出類型

          4.2 自動刷新

          <script src="extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script>
          autoRefresh: true, 							 //設置 true 為啟用自動刷新插件。這并不意味著啟用自動刷新
          autoRefreshStatus: true,						//設置 true 為啟用自動刷新。這是表加載時狀態自動刷新
          autoRefreshInterval: 60,						//每次發生自動刷新的時間(以秒為單位)
          autoRefreshSilent: true							//設置為靜默自動刷新

          4.3 復制行

          <script src="extensions/copy-rows/bootstrap-table-copy-rows.js"></script>
          showCopyRows: true,									//設置 true 為顯示復制按鈕。此按鈕將所選行的內容復制到剪貼板
          copyWithHidden: true,								//設置 true 為使用隱藏列進行復制
          copyDelimiter: ', ',								//復制時,此分隔符將插入列值之間
          copyNewline: '\n'									//復制時,此換行符將插入行值之間

          五、總結

          本篇文章只是簡單的闡述 Bootstrap-Table 如何使用,正在對表格功能實現而憂愁的小伙伴,可以使用 HelloGitHub 推薦的這款插件。你會發現網頁制作表格還可以如此快捷,期待小伙伴挖掘出更加有意思的功能哦。

          注:上面 js 部分并沒有采用函數形式,建議在使用熟悉之后還是采用函數形式,這樣也方便復用及讓代碼看起來更加規范。

          參考資料

          [1]《講解開源項目》: https://github.com/HelloGitHub-Team/Article

          [2]Bootstrap-Table 項目地址: https://github.com/wenzhixin/bootstrap-table

          [3]Bootstrap-Table 官方文檔: https://bootstrap-table.com/docs/getting-started/introduction/

          『講解開源項目系列』——讓對開源項目感興趣的人不再畏懼、讓開源項目的發起者不再孤單。跟著我們的文章,你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎留言聯系我們、加入我們,讓更多人愛上開源、貢獻開源~


          主站蜘蛛池模板: 国产精品视频一区二区三区经| 中文乱码精品一区二区三区| 精品无码综合一区| 久久精品一区二区三区AV| 视频一区二区在线观看| 久久精品无码一区二区WWW| 亚洲一区二区三区在线观看精品中文| 亚洲日韩国产欧美一区二区三区 | 精品无码一区二区三区爱欲| 精品国产一区二区22| 日韩精品无码人妻一区二区三区 | 精品久久一区二区三区| 一本色道久久综合一区| 武侠古典一区二区三区中文| 免费高清av一区二区三区| 亚洲变态另类一区二区三区| 亚洲av日韩综合一区久热| 日本午夜精品一区二区三区电影| 国产一区在线视频| 亚洲一区二区三区自拍公司| 伦理一区二区三区| 消息称老熟妇乱视频一区二区| 中文字幕在线精品视频入口一区| 综合久久久久久中文字幕亚洲国产国产综合一区首 | 中文字幕一区一区三区| 国产精品久久久久一区二区三区| 亚洲一区二区三区不卡在线播放| 亚洲熟妇av一区| 亚洲AV无码一区二区三区电影| 欧美人妻一区黄a片| 亚洲国产AV一区二区三区四区| 成人一区专区在线观看| 国产一区二区三区国产精品| 精品成人av一区二区三区| 国产一区二区女内射| 亚洲一区二区三区不卡在线播放| 日韩免费视频一区| 国产综合无码一区二区辣椒| 国产福利91精品一区二区三区| 性色AV一区二区三区天美传媒| 国产AV天堂无码一区二区三区|