TableHeader 對象
TableHeader 對象表示一個 HTML <th> 元素。
訪問 TableHeader 對象
您可以使用 getElementById() 來訪問 <th> 元素:
var x=document.getElementById("myTh");
提示:您也可以通過搜索表單的 cells 集合來訪問 TableHeader 對象。
創(chuàng)建 TableHeader 對象
您可以使用 document.createElement() 方法來創(chuàng)建 <th> 元素:
var x=document.createElement("TH");
TableHeader 對象屬性
屬性 | 描述 |
---|---|
abbr | 設(shè)置或返回 abbr 屬性的值。 |
align | HTML5 中不支持。使用 style.textAlign 替代。設(shè)置或返回數(shù)據(jù)單元格中內(nèi)容的水平對齊方式。 |
axis | HTML5 中不支持。設(shè)置或返回一個用逗號分隔的相關(guān)數(shù)據(jù)單元格的列表。 |
background | HTML5 中不支持。使用 style.background 替代。設(shè)置或返回數(shù)據(jù)單元格的背景圖像。 |
bgColor | HTML5 中不支持。使用 style.backgroundColor 替代。設(shè)置或返回表格的背景顏色。 |
ch | HTML5 中不支持。設(shè)置或返回數(shù)據(jù)單元格根據(jù)的對齊字符。 |
chOff | HTML5 中不支持。 設(shè)置或返回 ch 屬性的水平偏移。 |
colSpan | 設(shè)置或返回 colspan 屬性的值。 |
headers | 設(shè)置或返回 headers 屬性的值。 |
height | HTML5 中不支持。使用 style.height 替代。設(shè)置或返回數(shù)據(jù)單元格的高度。 |
noWrap | HTML5 中不支持。使用 style.whiteSpace 替代。設(shè)置或返回單元格中的內(nèi)容是否折行。 |
rowSpan | 設(shè)置或返回 rowspan 屬性的值。 |
vAlign | HTML5 中不支持。使用 style.verticalAlign 替代。設(shè)置或返回單元格中內(nèi)容的垂直對齊方式。 |
width | HTML5 中不支持。使用 style.width 替代。設(shè)置或返回數(shù)據(jù)單元格的寬度。 |
標準屬性和事件
TableHeader 對象同樣支持標準 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
們繼續(xù)往下講述,關(guān)于a標簽的跳轉(zhuǎn),我們用到的是href屬性,href里面對應(yīng)的就是我們需要跳轉(zhuǎn)的地址,可以是本地文件的跳轉(zhuǎn),也可以是網(wǎng)絡(luò)地址的跳轉(zhuǎn),這個很簡單了,就不過多做贅述了。
大家有沒有發(fā)現(xiàn),在上述的例子中,我們點擊a標簽后,跳轉(zhuǎn)的頁面都是在當前窗口打開的,在實際的開發(fā)中,如果說在新的窗口打開呢?那么我就需要a標簽的另一個屬性“target”,target這個屬性,可以使得我們選擇在當前頁面或者新窗口進行打開,默認不寫或者target=“_self”,是當前窗口,target=“_blank”,是在新的窗口打開。
我們舉個例子:
目錄結(jié)構(gòu)
目前,零基礎(chǔ)這個文件夾里,有兩個文件,“a標簽.html”這個文件里的代碼如下:
代碼展示
跳轉(zhuǎn)地址為同目錄的“遠程圖片加載.html”文件,target屬性為_blank,在新的窗口打開,我們看下效果:
點擊
點擊后,打開新的窗口進行展示:
新窗口打開
上邊的例子,大家可以實際操作一下。
之前說過,a標簽,不僅僅可以是文字,也可以是圖片,比如我們給上邊的“遠程圖片加載.html”這個文件里的圖片,加上超鏈接,讓它跳轉(zhuǎn)到百度,代碼如下:
代碼
效果如下:
效果
點擊圖片后,跳轉(zhuǎn)到了百度
跳轉(zhuǎn)到百度
簡單吧,所以啊,老鐵們,網(wǎng)頁制作啊,沒什么好難的,輕輕松松都能學會。
3、表格標簽,table,tr,td
表格,對于我們來說,司空見慣,課程表啊,人員信息表啊,這些Excel我們經(jīng)常用,那么如何在網(wǎng)頁上來表示表格呢?這就不得不提到table系列標簽。
table表示一個表格,每一行由tr來表示,每一列由td來表示,舉個很簡單的例子,1行1列,代碼如下:
代碼
大家可以看到,代碼這里,為了大家能夠直觀,很清晰地看到,我自己做了格式化,這里大家作為了一個了解就可以了,因為從第三天開始,我們就要鳥槍換炮,采用IDE進行開發(fā),那簡直就是如虎添翼,開發(fā)起來,嗖嗖的,我們拭目以待。
好,我們看下代碼實現(xiàn)的效果,右鍵點擊打開方式為瀏覽器:
what?什么鬼?這就是表格,開玩笑的吧,沒開玩笑老鐵,這確確實實,就是上述代碼運行的效果,為什么和我們平常的表格不一樣,那是因為沒有添加屬性啊,來,上才藝,加上邊框,border,我們再來看下效果:
更改代碼如下:
上面的代碼,我們加上了表格的邊框,寬度為1,單位默認是像素,可帶可不帶,運行效果如下:
有的朋友看到上面的效果,可能就有疑問了,為什么會有兩個邊框呢?這是由于table標簽自帶的內(nèi)外邊距所導(dǎo)致呢,如何去掉呢,很簡單,使用
cellpadding和cellspacing屬性就可以搞定,代碼如下:
效果如下:
這里對兩個屬性,做一個解釋,cellpadding,指的是單元格內(nèi)容與其邊框之間的空白,我們來看個對比:
不設(shè)置cellpadding
代碼:
效果:
設(shè)置cellpadding為10:
代碼:
效果:
是不是很清晰地看到了,表格中的內(nèi)容距離邊框明顯遠了,這就是cellpadding的作用。
我們再來看cellspacing,它指的是單元格之間的距離,我們看下對比:
不設(shè)置cellspacing:
代碼:
效果:
設(shè)置cellspacing為10:
代碼:
效果:
cellpadding和cellspacing屬性,大家不要搞混淆了,一個是內(nèi)容到邊框的距離,一個單元格之間的距離。
來吧,實戰(zhàn)練習一下,下面這個表格呢,是我用畫圖工具畫的,對得不是很齊,將就著看哈,對于下面的表格,我們該如何實現(xiàn)呢?
首先呢,先分析,這個是很有必要的,即便以后,我們學有所成,做任何東西之前,也盡量要先分析,后寫代碼,通過上圖,我們可以看到,有有5行3列,那么對應(yīng)的tr,也就是行,就會有5個,每個tr里,有4列,也就是有4個td,ok,我們直接上代碼:
代碼有點多,其實都是重復(fù)的,莫害怕,不截圖了,直接代碼塊,大家盡量自己寫,千萬別復(fù)制啊:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格練習</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
<td>籍貫</td>
</tr>
<tr>
<td>小趙</td>
<td>12</td>
<td>男</td>
<td>北京</td>
</tr>
<tr>
<td>小王</td>
<td>23</td>
<td>女</td>
<td>上海</td>
</tr>
<tr>
<td>老李</td>
<td>36</td>
<td>男</td>
<td>鄭州</td>
</tr>
<tr>
<td>老王</td>
<td>68</td>
<td>男</td>
<td>廣州</td>
</tr>
</table>
</body>
</html>
效果如下圖:
雖然效果出來了,但是,是不是感覺很小啊,怎么解決?老鐵們,前邊我們是不是講過圖片是如何控制大小的,通過寬width和高height這兩個屬性是吧,同樣的,這兩個屬性,也可以用于表格,我們不妨給當前表格設(shè)置,寬為500,高為300。
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格練習</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="500" height="300">
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
<td>籍貫</td>
</tr>
<tr>
<td>小趙</td>
<td>12</td>
<td>男</td>
<td>北京</td>
</tr>
<tr>
<td>小王</td>
<td>23</td>
<td>女</td>
<td>上海</td>
</tr>
<tr>
<td>老李</td>
<td>36</td>
<td>男</td>
<td>鄭州</td>
</tr>
<tr>
<td>老王</td>
<td>68</td>
<td>男</td>
<td>廣州</td>
</tr>
</table>
</body>
</html>
效果如下:
效果明顯好轉(zhuǎn)了是吧,但是,問題來了,文字沒有居中,怎么搞?如果我們以后學了css樣式后,其實特別簡單,這里就先不擴展css的東西,還是先研究html,一點一點來,按部就班。文字居中,就需要用到align屬性,它有三個值,left,center,right,很明顯就是,左,中,右;來,我們設(shè)置居中:
這里呢,我們需要給每一個td,去添加這個屬性,這里我就不添加太多了,只給第一行添加了,大家練習的時候,可以都加上,我們看下效果:
因為,我只給第一行添加了居中,所以呈現(xiàn)出的效果就如上圖。
對于表格的練習,大家多練習練習,沒什么難的,分析好幾行幾列后,就用tr和td寫出來;上邊的表格,還差一個標題,標題如何去寫呢,之前已經(jīng)學過了h系列標簽,還有p標簽,這兩個都可以使用,這里我們再學一個局限于表格的標題標簽,caption,我們直接上代碼:
還是上邊的例子啊,代碼就不全粘貼了,這里只貼了部分代碼:
效果如下:
基本上常規(guī)的表格,我們已經(jīng)講述完了,我們再來看看,不常規(guī)的。
看到上圖,是一種什么感覺,是不是很直觀地發(fā)現(xiàn),有單元格的合并效果,這個在表格里面很常見,但在代碼里該如何體現(xiàn)呢?首先我們先來了解下table的另兩個屬性,rowspan和colspan。
rowspan
跨行,也就是行與行之間合并,用法,rowspan=“2”,值為幾,就是合并幾行。
colspan
跨列,也就是列與列之間合并,用法,colspan=“2”,值為幾,就是合并幾列。
舉個例子:
先看代碼:
效果:
其實就是一個兩行兩列的代碼,現(xiàn)在呢,我想要把1和2合并,也就是列與列之間合并,怎么合并,使用colspan屬性唄,來,看代碼:
效果展示:
有一點需要注意,你合并之后,一定要把多余的給去掉,大家可以看到,在代碼中,第一行中,只有一個td標簽,因為你要合并兩個表格成為1個表格,所以,多余的要刪除,合并3個,4個及多個,都是這樣處理。
好,我們把代碼還原,進行合并1和3,1和3是行之間的合并,進而要使用rowspan,代碼如下:
效果如下:
注意:同樣的,你合并時,也要記得,把多余的給刪除,可以直接看代碼,我的實現(xiàn)。
經(jīng)過簡單的練習后,那么我們直接實現(xiàn)剛開始的截圖效果吧,就是如下圖:
代碼實現(xiàn)
效果如下:
這里為了表格展示好看,我用了width屬性,具體大家可以看代碼,好了,table表格相關(guān)的,基本上就結(jié)束了,也給大家舉了很多例子,大家可以多寫寫,一定要掌握住哦。
4、文本格式化的使用
文本格式化,這個大家作為一個了解即可,所謂的文本格式,就是文本的樣式,比如,加粗,斜體,大號字,小號字,插入字,刪除字等。
我們找其中幾個簡單地展示一下,代碼如下:
效果如下:
文本格式,大家作為一個了解,因為這些內(nèi)容后期,大部分都被css所代替,不過大家能夠掌握的話,也是一件好事,說個比較有意思的標簽,就是pre,這個是預(yù)格式文本,也就說,它會保留你書寫的格式。
比如代碼如下:
效果:
5、總結(jié)及回顧
第二天的內(nèi)容比較多,總共分為了三篇文章進行講述,大家可以發(fā)現(xiàn),基本上都是特別的詳細,我可以這樣說,這是目前網(wǎng)上關(guān)于網(wǎng)頁制作教程中是最詳細的,哈哈,有點飄了啊,之所以詳細呢,就是為了照顧到零基礎(chǔ)的朋友。
今天的總結(jié)回顧呢,兩個掌握的知識點:
1、a標簽的使用,本地和遠程地址的跳轉(zhuǎn),新窗口的設(shè)置。
2、table標簽的使用,掌握住tr,td,設(shè)置內(nèi)外邊距及單元格之間的合并。
今天的作業(yè),就是把第二天當中所講的內(nèi)容,自己好好地敲上一遍,好了,就到這里吧,拜拜,我們第三天見。
文作者:HelloGitHub-kalifun
這是 HelloGitHub 推出的《講解開源項目》系列,今天給大家推薦一個基于 Bootstrap 和 jQuery 的表格插件:Bootstrap-Table
一、介紹
從項目名稱就可以知道,這是一款 Bootstrap 的表格插件。表格的展示的形式所有的前端幾乎在工作中都有涉及過,Bootstrap Table 提供了快速的建表、查詢、分頁、排序等一系列功能。
項目地址:https://github.com/wenzhixin/bootstrap-table
可能 Bootstrap 和 jQuery 技術(shù)有些過時了,但如果因為歷史的技術(shù)選型或者舊的項目還在用這兩個庫的話,那這個項目一定會讓你的嘴角慢慢上揚,拿下表格展示方面的需求易如反掌!
二、模式
Boostatrp Table 分為兩種模式:客戶端(client)模式、服務(wù)端(server)模式。
三、實戰(zhàn)操作
Tips: 解釋說明均在代碼中以注釋方式展示,請大家注意閱讀。
我們采用的是最簡單的 CDN 引入方式,代碼可直接運行。復(fù)制代碼并將配置好 json 文件的路徑即可看到效果。
3.1 快速上手
注釋中的星號表示該參數(shù)必寫,話不多說上代碼。示例代碼:
<!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 時觸發(fā) 'click .delete': function (e,value,row,index) { // 在 console 打印出整行數(shù)據(jù) console.log(row); } }; $('#tb_departments').bootstrapTable({ url: '/frontend/bootstrap-table/user.json', //請求后臺的 URL(*) method: 'get', //請求方式(*) // data: data, //當不使用上面的后臺請求時,使用data來接收數(shù)據(jù) toolbar: '#toolbar', //工具按鈕用哪個容器 striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存,默認為 true,所以一般情況下需要設(shè)置一下這個屬性(*) pagination: true, //是否顯示分頁(*) sortable: false, //是否啟用排序 sortOrder: "asc", //排序方式 sidePagination: "client", //分頁方式:client 客戶端分頁,server 服務(wù)端分頁(*) pageNumber:1, //初始化加載第一頁,默認第一頁 pageSize: 6, //每頁的記錄行數(shù)(*) pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(shù)(*) search: true, //是否顯示表格搜索,此搜索是客戶端搜索,不會進服務(wù)端,所以個人感覺意義不大 strictSearch: true, //啟用嚴格搜索。禁用比較檢查。 showColumns: true, //是否顯示所有的列 showRefresh: true, //是否顯示刷新按鈕 minimumCountColumns: 2, //最少允許的列數(shù) clickToSelect: true, //是否啟用點擊選中行 height: 500, //行高,如果沒有設(shè)置 height 屬性,表格自動根據(jù)記錄條數(shù)覺得表格高度 uniqueId: "ID", //每一行的唯一標識,一般為主鍵列 showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕 cardView: false, //是否顯示詳細視圖 detailView: false, //是否顯示父子表 showExport: true, //是否顯示導(dǎo)出 exportDataType: "basic", //basic', 'all', 'selected'. columns: [{ checkbox: true //復(fù)選框標題,就是我們看到可以通過復(fù)選框選擇整行。 }, { field: 'id', title: 'ID' //我們?nèi)son中id的值,并將表頭title設(shè)置為ID }, { field: 'username', title: '用戶名' //我們?nèi)?json 中 username 的值,并將表頭 title 設(shè)置為用戶名 },{ field: 'sex', title: '性別' //我們?nèi)?json 中 sex 的值,并將表頭 title 設(shè)置為性別 },{ field: 'city', title: '城市' //我們?nèi)?json 中 city 的值,并將表頭 title 設(shè)置為城市 },{ field: 'sign', title: '簽名' //我們?nèi)?json 中 sign 的值,并將表頭 title 設(shè)置為簽名 },{ field: 'classify', title: '分類' //我們?nèi)?json 中 classify 的值,并將表頭 title 設(shè)置為分類 },{ //ormatter:function(value,row,index) 對后臺傳入數(shù)據(jù) 進行操作 對數(shù)據(jù)重新賦值 返回 return 到前臺 // events 觸發(fā)事件 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 //在加載遠程數(shù)據(jù)之前,處理響應(yīng)數(shù)據(jù)格式. // 我們?nèi)〉闹翟赿ata字段中,所以需要先進行處理,這樣才能獲取我們想要的結(jié)果 } }); </script> </body> </html>
上面的代碼展示通過基本 API 實現(xiàn)基礎(chǔ)的功能,示例代碼并沒有羅列所有的 API。該庫還有很多好玩的功能等著大家去發(fā)現(xiàn),正所謂師父領(lǐng)進門修行靠個人~
3.2 拆解講解
下面對關(guān)鍵點進行闡述,為了更方便使用的小伙伴清楚插件的用法。
3.2.1 初始化部分
選擇需要初始化表格。 $('#tb_departments').bootstrapTable({}) 這個就像table的入口一樣。 <table id="tb_departments" data-filter-control="true" data-show-columns="true"></table>
3.2.2 閱讀數(shù)據(jù)部分
columns:[{field: 'Key', title: '文件路徑',formatter: function(value,row,index){} }]
3.2.3 事件觸發(fā)器
events:operateEvents window.operateEvents={ 'click .download': function (e,value,row,index) { console.log(row); } }
因為很多時候我們需要針對表格進行處理,所以事件觸發(fā)器是一個不錯的選擇。比如:它可以記錄我們的行數(shù)據(jù),可以利用觸發(fā)器進行定制函數(shù)的執(zhí)行等。
四、擴展
介紹幾個擴展可以讓我們便捷的實現(xiàn)更多的表格功能,而不需要自己造輪子讓我們的工作更加高效(也可以進入官網(wǎng)查看擴展的具體使用方法,官方已經(jīng)收集了大量的擴展)。老規(guī)矩直接上代碼:
4.1 表格導(dǎo)出
<script src="js/bootstrap-table-export.js"></script> showExport: true, //是否顯示導(dǎo)出 exportDataType: basic, //導(dǎo)出數(shù)據(jù)類型,支持:'基本','全部','選中' exportTypes:['json', 'xml', 'csv', 'txt', 'sql', 'excel'] //導(dǎo)出類型
4.2 自動刷新
<script src="extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script> autoRefresh: true, //設(shè)置 true 為啟用自動刷新插件。這并不意味著啟用自動刷新 autoRefreshStatus: true, //設(shè)置 true 為啟用自動刷新。這是表加載時狀態(tài)自動刷新 autoRefreshInterval: 60, //每次發(fā)生自動刷新的時間(以秒為單位) autoRefreshSilent: true //設(shè)置為靜默自動刷新
4.3 復(fù)制行
<script src="extensions/copy-rows/bootstrap-table-copy-rows.js"></script> showCopyRows: true, //設(shè)置 true 為顯示復(fù)制按鈕。此按鈕將所選行的內(nèi)容復(fù)制到剪貼板 copyWithHidden: true, //設(shè)置 true 為使用隱藏列進行復(fù)制 copyDelimiter: ', ', //復(fù)制時,此分隔符將插入列值之間 copyNewline: '\n' //復(fù)制時,此換行符將插入行值之間
五、總結(jié)
本篇文章只是簡單的闡述 Bootstrap-Table 如何使用,正在對表格功能實現(xiàn)而憂愁的小伙伴,可以使用 HelloGitHub 推薦的這款插件。你會發(fā)現(xiàn)網(wǎng)頁制作表格還可以如此快捷,期待小伙伴挖掘出更加有意思的功能哦。
注:上面 js 部分并沒有采用函數(shù)形式,建議在使用熟悉之后還是采用函數(shù)形式,這樣也方便復(fù)用及讓代碼看起來更加規(guī)范。
參考資料
[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/
『講解開源項目系列』——讓對開源項目感興趣的人不再畏懼、讓開源項目的發(fā)起者不再孤單。跟著我們的文章,你會發(fā)現(xiàn)編程的樂趣、使用和發(fā)現(xiàn)參與開源項目如此簡單。歡迎留言聯(lián)系我們、加入我們,讓更多人愛上開源、貢獻開源~
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。