jQuery表格常用操作方法-增加，查询，删除，排序，移动，全选

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，简单设置页面元素的样式即可，代码如下：

form {
    margin: 10px 0;
}
td {
    text-align: center;
}

.color1{
	/*偶数*/
	background-color: pink;
}
.color2{
	/*奇数*/
	background-color:yellow;
}
.sel{
	/*点击*/
	background-color: green;
}
.hover{
	/*移入*/
	background-color: orange;
}

页面的body部分，分别设置好form表单和talbe表格的内容即可，代码如下：

<form id = 'form1'>
    <input type="text" name="username" value="名"/>
    <select name="sex">
        <option value="">请选择一个性别</option>
        <option selected="true" value="男">男</option>
        <option value="女">女</option>
    </select>
    <input type="text" name="age" value='100'/>
    <input type="button" class='formBnt' value="提交">	
<!--选做-->
	<p>
	    <select name="orderName">
	        <option value="">选择一个排序字段</option>
	        <option value="id">编号</option>
	        <option value="age">年龄</option>
	    </select>
	    <select name="orderBy">
	        <option value="">选择一个排序方式</option>
	        <option value="asc">升序</option>
	        <option value="desc">降序</option>
	    </select>
	    <input type="button" value="排序" id ='sort'>
	</p>
</form>
<table border="1" width="100%" id="tab1" >
    <thead>
	    <tr>
	        <th>全选 <input type="checkbox" name="checkAll" id ='checkAll'></th>
	        <th>编号</th>
	        <th>姓名</th>
	        <th>性别</th>
	        <th>年龄</th>
	        <th>操作</th>
	    </tr>
    </thead>
    <tbody id='tbody'></tbody>
</table>

页面的底部，需引入jQuery库和必要的JS文件，代码如下：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>