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

作业：用表格写一个课程表

您的项目需求