javascript實現點擊標題列可以對表單進行排序

javascript實現點擊標題列可以對表單進行排序效果

不久做項目要實現一種功能就是點擊表格的標題列對其內容進行按點中的列進行排序效果，今天就來說說如何實現該效果：

先上效果圖：

點擊標題可以對列表的內容進行升降序

代碼展示：

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列表在網站頁面中使用的是相當廣泛。如上圖的網站導航欄，就是使用了列表實現的，再比如說，一個欄目的文章列表等等，都是使用了列表功能，根據我今天學到的內容，我總結了一下，總共三大知識點：

一、HTML列表分為三種：

1.無序列表：

無序列表是由標簽<ul>和<li>組成的；
<ul>標簽是聲明無序列表的，<li>標簽作為列表中每一項的起始項。

可以在<ul>標簽中使用type屬性來控制每一項前面的圓點的樣式:

1.disc 默認值，每一項前面的圓點為黑色實心圓。
2.square 每一項前面的圓點為實體方心。
3.circle 每一項前面的圓點為空心圓。

<h3>商品列表</h3>
<ul start="2">
    <li>iPhone 12</li>
    <li>MacBook Air</li>
    <li>AirPods Pro</li>
</ul>

效果如圖：

2.有序列表：

與無序列表有區別的是有序列表，他的每一項都是由它是有先后順序進行排列的，并且會用數字依次進行標記；
有序列表由標簽<ol>和<li>組成。

<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值有五種：

1 默認值，以數字樣式標記；
A 以大寫字母作為每一項前面的標記；
a 以小寫字母作為每一項前面的標記；
I 以大寫的羅馬數字作為標記；
i 以小寫的羅馬數字作為標記。

不過我個人感覺，這個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:郵箱地址】的格式可以快速拉起發送郵件的軟件。

發送郵件

不過我不知道這個的兼容性怎么樣，如果有知道的大佬，可以在評論區指導一下，跪謝！

二、HTML表格：

<table>標簽定義一個HTML表格；
一個HTML表格由table以及一個或多個tr、th或者td組成
tr元素定義表格行，th元素定義表頭，td元素定義表格單元格。

一個表格的基本結構：

<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>

總結：
1.一個表格允許有多個<tbody>，但是有且只能有一個<thead>；
2.添加表格數據的時候必須先添加一行；
3.所有的數據必須填充到<td>或者<th>標簽中；
4.th是td元素的一個加強版，<th>比<td>多了個加粗和居中的效果。

Excel里的表格可以進行行與列的合并，單元格直接也能合并，那么HTML表格也是可以的，可以使用colspan進行列合并，rowspan進行行的合并。利用這兩個屬性，我們可以使用<table>標簽寫一個課程表。

三、HTML表單與常用控件

HTML表單是用于搜集用戶輸入的不同類型數據的，它包含了不同類型的<input>元素，如:文本框、單選框、復選框、提交按鈕等等。因此可以看出，<input>元素是表單中最重要的元素。

表單的基本格式：

<form action="" method="POST" class="register">
    <!-- 這里面可以放input元素 -->
</form>

action：處理表單的程序，通知表單往何處發送數據；
method：表單數據提交類型，有兩個值：
- GET：數據直接顯示在url地址中；
- POST：表單數據在請求頭體中。

根據我學習的成果，我總結出了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>元素至少包含有三個屬性：

type 控件的類型；
name 相當于變量名稱，用于后端服務器接收時使用；
value 控件的值。

除了上述的<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

下拉列表/下拉框

注意：
如果option里有label值，label屬性的優先級于option里的內容。因此，上述列表第5項應該顯示“老司機”。
HTML5中新屬性：
multiple multiple可以選擇多個選項
size 數值，如：3，下拉框里可見的選項數量

<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>

文件域與隱藏域

上傳文件需要注意兩點：

請求類型必須為POST類型；
form表單必須有enctype屬性，并且數據編碼設置為：enctype=”multipart/form-data”；

<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個值：

application/x-www-form-urlencoded 默認值，在發送前對所有字符進行編碼；
multipart/form-data 使用上傳文件空間時必須用該值；
text/plain 將空格轉換為“+”，但不對特殊字符編碼。

四、表單的form屬性

<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表單的外部，則該控件需要使用form屬性：form=”表單的id值”，才可以在表單提交時傳該控件的值，否則無法進行傳值。

例如：以下情況就是沒有在空間中寫form屬性的情況，我們可以看到，在瀏覽器里沒有獲取到密碼password的值，只獲取到了username和email的值：

沒有獲取到password的值

我個人的理解是：如果不把表單控件寫到form內部，這樣會方便js獲取表單元素的值，但是這樣寫會容易影響布局，造成布局混亂，建議還是按照標準的寫法，把所有的控件都寫到form表單內部。

至于什么時候使用GET方法，什么時候使用POST方法呢？通過今天的學習，我做了如下總結：

GET方法傳輸的數據相對于POST要小的很多，并且是明文傳輸的，是直接將參數放在應用程序的URL中傳輸的，一眼就能看見，因此對于小一些的表單，對安全性要求不高的，可以使用GET方法。
POST方法可以發送大文件，并且在請求的URL中看不到發送的數據，安全性高，因此建議使用POST方法。當然這個安全性也是相對來說的，對于一些網絡黑客高手，還是有辦法獲取這些傳輸內容，至于怎么獲取的，我也不清楚，畢竟咱還是小白。
還有一點就是在上傳文件的時候必須使用POST方法，因為文件一般都比較大，GET方法最大大概只能發送32K的數據，POST方法可以達到1G。

作業：用表格寫一個課程表

<!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表格寫一個課程表

個人總結：為了學習這些表單知識，真真的是看了一天，頭都懵了，還有不少內容沒有記住，還是需要多寫多練，其中我認為比較坑的幾個地方是：

表格的行與列的合并，colspan、rowspan，如果能熟練的用好這兩個屬性，相信寫出上面課程表實例也不難；
表單的屬性太多了，一時半會真的是記不住；
上傳文件需要注意的兩點：請求類型必須為POST；form表單加上enctype=”multipart/form-data”；
表單控件的form屬性，這個可能是因為我還是個小白，才接觸這些東西，不知道這些知識點，不知道今后的工作中用到這個屬性的情況多不多。

在看視頻教程的過程中，我看到好多大佬在用VS Code的時候都是使用了快捷鍵，后來網上搜了一下，原來官方給的就有一個PDF文檔，從VS里就可以進去，在工具的頂部導航欄幫助里，如下圖：

快捷鍵

為了方便大家快速找到，我把官方地址貼出來吧，VS Code快捷鍵PDF文檔：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

VS Code快捷鍵

在線咨詢

上一篇：3個免費的無損圖片放大工具，放大的圖片跟原圖一樣清晰
下一篇：深入理解CSS選擇器優先級

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

javascript實現點擊標題列可以對表單進行排序

一、HTML列表分為三種：

二、HTML表格：

三、HTML表單與常用控件

下拉列表/下拉框

文本域（多行文本框）

文件域與隱藏域

四、表單的form屬性

作業：用表格寫一個課程表

您的項目需求