不久做項目要實現一種功能就是點擊表格的標題列對其內容進行按點中的列進行排序效果,今天就來說說如何實現該效果:
先上效果圖:
點擊標題可以對列表的內容進行升降序
代碼展示:
html:
js:
i列表排序
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style>
#ul1 {background:green;}
#ul2 {background:yellow;}
</style>
<script>
window.onload=function (){
var oUl1=document.getElementById('ul1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
var aLi=oUl1.getElementsByTagName('li');
//aLi.sort(); 此方法不可行,因為aLi是元素集合,不是數組,sort()只能用于數組排序
var arr=[];
for(var i=0;i<aLi.length;i++){
arr[i]=aLi[i]; //aLi元素集合轉換為數組
}
arr.sort(function (li1, li2){ //自定義排序函數
var n1=parseInt(li1.innerHTML); //將字符串轉換為整數
var n2=parseInt(li2.innerHTML);
return n1-n2;
});
//alert(arr[0].innerHTML);
for(var i=0;i<arr.length;i++){
//alert('該把'+arr[i].innerHTML+'插入到最后');
oUl1.appendChild(arr[i]);
}
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="排序" />
<ul id="ul1">
<li>34</li>
<li>25</li>
<li>9</li>
<li>88</li>
<li>54</li>
</ul>
</body>
</html>
appendChild()方法理解:
target.appendChild(newnode)
1.先把元素從原有父級上刪掉
2.添加到原有的父級元素下, 起到了移動子元素的作用。
們在瀏覽網頁的時候,可以看到頁面上有導航欄,逛商城的時候會看到商品的詳情頁里有商品的簡介,以及在注冊或者申請一個網站會員的時候會讓我們填寫各種各樣的信息,這些分別由列表、表格、表單來完成的,今天我學習了這些知識,下面我把我學到的知識梳理一下,以及在學習中遇到的坑總結一下,希望能給其他初學者一些幫助,同時,如有不足之處,也請各位大神指出來,我也好學習學習,提升自我。
網站導航欄
HTML列表在網站頁面中使用的是相當廣泛。如上圖的網站導航欄,就是使用了列表實現的,再比如說,一個欄目的文章列表等等,都是使用了列表功能,根據我今天學到的內容,我總結了一下,總共三大知識點:
1.無序列表:
可以在<ul>標簽中使用type屬性來控制每一項前面的圓點的樣式:
<h3>商品列表</h3>
<ul start="2">
<li>iPhone 12</li>
<li>MacBook Air</li>
<li>AirPods Pro</li>
</ul>
2.有序列表:
<h3>商品列表</h3>
<ol>
<li>iPhone 12</li>
<li>MacBook Air</li>
<li>AirPods Pro</li>
</ol>
有序列表
可以在<ol>標簽中使用start屬性來控制第一項數字起始值:
<h3>商品列表</h3>
<ol start="2">
<li>iPhone 12</li>
<li>MacBook Air</li>
<li>AirPods Pro</li>
</ol>
效果如圖:
start=2
可以使用type規定在列表中使用的標記類型,type值有五種:
不過我個人感覺,這個type屬性的作用貌似不多大,基本上都是以默認值,就是數字來作為每一項的標記了吧。
3.自定義列表:
<dl>
<dt>名稱:</dt>
<dd>小白學編程</dd>
<dt>地址:</dt>
<dd>河南省鄭州市二七區</dd>
<dt>聯系</dt>
<dd>電話:<a href="tel:189****1122">189****1122</a></dd>
<dd>郵箱:<a href="mailto:admin@admin.com">admin@admin.com</a></dd>
</dl>
自定義列表
備注:根據本小白查的文檔,a標簽的href屬性,不僅可以填寫鏈接,還可以用:
【tel:電話號碼】的格式點擊進行撥號,只不過是在電腦上需要有能撥號的軟件;
撥號
【mailto:郵箱地址】的格式可以快速拉起發送郵件的軟件。
發送郵件
不過我不知道這個的兼容性怎么樣,如果有知道的大佬,可以在評論區指導一下,跪謝!
一個表格的基本結構:
<table class="table">
<!-- caption:表格標題 -->
<caption>
商品信息表
</caption>
<!-- 表頭 -->
<thead>
<!-- 添加表格數據的時候必須先添加一行 -->
<tr>
<td>ID</td>
<td>商品名稱</td>
<td>單價</td>
<td>單位</td>
<td>數量</td>
<td>金額</td>
</tr>
</thead>
<!-- 一個表格可以有多個tbody,但是只能有一個thead -->
<tbody>
<tr>
<td>1</td>
<td>iPhone 12 mini</td>
<td>5499</td>
<td>部</td>
<td>100</td>
<td>549900</td>
</tr>
</tbody>
</table>
Excel里的表格可以進行行與列的合并,單元格直接也能合并,那么HTML表格也是可以的,可以使用colspan進行列合并,rowspan進行行的合并。利用這兩個屬性,我們可以使用<table>標簽寫一個課程表。
HTML表單是用于搜集用戶輸入的不同類型數據的,它包含了不同類型的<input>元素,如:文本框、單選框、復選框、提交按鈕等等。因此可以看出,<input>元素是表單中最重要的元素。
表單的基本格式:
<form action="" method="POST" class="register">
<!-- 這里面可以放input元素 -->
</form>
根據我學習的成果,我總結出了input元素的七種type類型并一一做了記錄:
1.type="text" 單行文本框
<label for="username">賬號:</label>
<input type="text" name="username" id="username" value="admin" required>
單行文本框
2.type="email" 郵箱型文本框
<label for="email">郵箱:</label>
<input type="email" name="email" id="email" value="html@html.cn" required>
郵箱型文本框還會對輸入的內容進行校驗,如果不符合郵件地址的格式會彈出如上圖提示。
3.type="password" 密碼型文本框/非明文
<label for="password">密碼:</label>
<input type="password" name="password" id="password" value="" placeholder="密碼不少于6位" required>
密碼型文本框
輸入內容
值得注意的是,密碼型文本框在輸入密碼的時候都是以小黑點進行替換的,并不會顯示我們輸入的內容。
4.type="radio" 單選框
<label for="">性別:</label>
<div>
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>
<input type="radio" name="gender" value="male" id="male">
<label for="female">女</label>
<input type="radio" name="gender" value="male" id="male" checked>
<label for="secret">保密</label>
</div>
單選框
單選框(radio)的name值必須都相同才能保證值的唯一性,默認選中使用checked屬性。
5.type="checkbox" 復選框
<label for="#">興趣:</label>
<div>
<input type="checkbox" name="hobby[]" value="basketball" id="basketball">
<label for="basketball">籃球</label>
<input type="checkbox" name="hobby[]" value="game" id="game">
<label for="game">游戲</label>
<input type="checkbox" name="hobby[]" value="travel" id="travel">
<label for="travel">旅游</label>
<input type="checkbox" name="hobby[]" value="program" id="program">
<label for="program">編程</label>
</div>
復選框
復選框的name值一定要用數組表示,否則,服務器在接收數據的時候不能獲取所有選中的值。
6.type="file" 文件域
<label for="user-pic">頭像:</label>
<input type="file" name="user_pic" id="user-pic" />
上傳文件
7.type="hidden" 隱藏域
<input type="hidden" name="MAX_FILE_ZIE" value="80000" />
隱藏域在頁面是看不到的,是服務器端進行處理的一項數據。
通過上述的七種<input>元素類型,我得出一個結論就是一個<input>元素至少包含有三個屬性:
除了上述的<input>元素的7種標簽類型,還有下拉列表、文本域這些常用的控件。
<label for="">學歷:</label>
<select name="edu" id="eud">
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3" selected>本科</option>
<option value="4">研究生</option>
<option value="5" label="老司機">博士</option>
</select
下拉列表/下拉框
<label for="">學歷:</label>
<select name="edu" id="eud">
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3" selected>本科</option>
<option value="4">研究生</option>
<option value="5" label="老司機">博士</option>
</select>
multiple、size用法
<label for="comment">備注:</label>
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>
上傳文件需要注意兩點:
<form action="" method="POST" class="register" enctype="multipart/form-data">
<label for="user-pic">頭像:</label>
<!-- 隱藏域在頁面是看不到的,是服務器端進行處理的一項數據。 -->
<input type="hidden" name="MAX_FILE_ZIE" value="80000" />
<input type="file" name="user_pic" id="user-pic" />
<div class="user-pic" style="grid-column: 2;"></div>
<button>提交</button>
</form>
enctype有3個值:
<form action="check.php" method="get" id="register">
<div class="box">
<label for="email">郵箱:</label>
<input type="email" form="register" name="email" id="email" placeholder="demo@email.com" />
<label for="password">密碼:</label>
<input type="password" form="register" name="password" id="password" placeholder="至少8位" />
<button form="register">提交</button>
</div>
</form>
<label for="username">帳號:</label>
<input type="text" name="username" id="username" placeholder="不能為空" />
注冊表單
例如:以下情況就是沒有在空間中寫form屬性的情況,我們可以看到,在瀏覽器里沒有獲取到密碼password的值,只獲取到了username和email的值:
沒有獲取到password的值
我個人的理解是:如果不把表單控件寫到form內部,這樣會方便js獲取表單元素的值,但是這樣寫會容易影響布局,造成布局混亂,建議還是按照標準的寫法,把所有的控件都寫到form表單內部。
至于什么時候使用GET方法,什么時候使用POST方法呢?通過今天的學習,我做了如下總結:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/table.css">
<title>表格:行與列的合并</title>
</head>
<body>
<table class="lesson">
<caption>
xxxx小學課程表
</caption>
<thead>
<tr>
<th colspan="2"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">上午</td>
<td>1</td>
<td>語文</td>
<td>數學</td>
<td>音樂</td>
<td>社會</td>
<td>科學</td>
</tr>
<tr>
<td>2</td>
<td>數學</td>
<td>語文</td>
<td>音樂</td>
<td>語文</td>
<td>數學</td>
</tr>
<tr>
<td>3</td>
<td>美術</td>
<td>音樂</td>
<td>音樂</td>
<td>數學</td>
<td>音樂</td>
</tr>
<tr>
<td>4</td>
<td>社會</td>
<td>體育</td>
<td>音樂</td>
<td>體育</td>
<td>語文</td>
</tr>
<tr class="rest">
<td colspan="7">中午休息</td>
</tr>
<tr>
<td rowspan="4">下午</td>
<td>5</td>
<td>語文</td>
<td>數學</td>
<td>音樂</td>
<td>社會</td>
<td>科學</td>
</tr>
<tr>
<td>6</td>
<td>數學</td>
<td>語文</td>
<td>音樂</td>
<td>語文</td>
<td>數學</td>
</tr>
<tr>
<td>7</td>
<td>課外活動:</td>
<td colspan="4">各班自行組織,自愿參加</td>
<td>數學</td>
<td>音樂</td> -->
</tr>
</tbody>
</table>
</body>
</html>
效果:
用HTML表格寫一個課程表
個人總結:為了學習這些表單知識,真真的是看了一天,頭都懵了,還有不少內容沒有記住,還是需要多寫多練,其中我認為比較坑的幾個地方是:
在看視頻教程的過程中,我看到好多大佬在用VS Code的時候都是使用了快捷鍵,后來網上搜了一下,原來官方給的就有一個PDF文檔,從VS里就可以進去,在工具的頂部導航欄幫助里,如下圖:
快捷鍵
為了方便大家快速找到,我把官方地址貼出來吧,VS Code快捷鍵PDF文檔:https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
VS Code快捷鍵
*請認真填寫需求信息,我們會在24小時內與您取得聯系。