整体代码实现了在页面中可以通过jQ进行将页面元素进行添加及移动等操作。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2017福布斯中国富豪排行榜</title>
<style type="text/css">
table,
th,
td {
border: 1px solid #333;
}
table {
border-collapse: collapse;
text-align: center;
width: 90%;
margin: 50px auto;
box-shadow: 3px 3px 3px #888;
background-repeat: no-repeat;
background-size: cover;
}
table caption {
font-size: 1.6em;
font-weight: bolder;
margin-bottom: 30px;
}
th,
td {
padding: 10px;
}
td img {
width: 50px;
border-radius: 50%;
box-shadow: 2px 2px 2px #888;
}
th {
background-color: rgba(155, 155, 0, 0.3);
color: brown;
}
.box {
margin: auto;
width: 90%;
}
</style>
</head>
<body>
<table>
<caption>2017福布斯中国富豪排行榜</caption>
<tr>
<th>序号</th>
<th>名称</th>
<th>照片</th>
<th>职务</th>
<th>公司名称</th>
<th>行业</th>
<th>省市</th>
<th>地区</th>
<th>福布斯中国富豪榜排行</th>
<th>财富（人民币）</th>
</tr>
<tr>
<td>1</td>
<td>马云</td>
<td><img src="images/1.jpg" alt="马云" width="50"></td>
<td>董事局主席</td>
<td>阿里巴巴</td>
<td>电子商务</td>
<td>浙江省</td>
<td>杭州市</td>
<td>3</td>
<td>2555.3亿元</td>
</tr>
<tr>
<td>2</td>
<td>马化腾</td>
<td><img src="images/2.jpg" alt="马化腾" width="50"></td>
<td>董事会主席兼首席执行官</td>
<td>腾讯</td>
<td>互联网</td>
<td>广东省</td>
<td>汕头市</td>
<td>2</td>
<td>2581.8</td>
</tr>
<tr>
<td>3</td>
<td>王健林</td>
<td><img src="images/3.jpg" alt="王健林" width="50"></td>
<td>董事长</td>
<td>万达集团</td>
<td>商业地产</td>
<td>辽宁省</td>
<td>大连市</td>
<td>4</td>
<td>1668.2</td>
</tr>
<tr>
<td>4</td>
<td>雷军</td>
<td><img src="images/4.jpg" alt="雷军" width="50"></td>
<td>董事长</td>
<td>小米科技</td>
<td>互联网</td>
<td>北京市</td>
<td>海淀区</td>
<td>25</td>
<td>450.2</td>
</tr>
<tr>
<td>5</td>
<td>许家印</td>
<td><img src="images/9.jpg" alt="许家印" width="50"></td>
<td>董事局主席</td>
<td>中国恒大集团</td>
<td>房地产</td>
<td>广东省</td>
<td>广州市</td>
<td>1</td>
<td>2813.5</td>
</tr>
<tr>
<td>6</td>
<td>董明珠</td>
<td><img src="images/5.jpg" alt="董明珠" width="50"></td>
<td>董事长</td>
<td>珠海格力电器</td>
<td>制造</td>
<td>广东省</td>
<td>珠海市</td>
<td>100</td>
<td>0</td>
</tr>
<tr>
<td>7</td>
<td>刘强东</td>
<td><img src="images/6.jpg" alt="刘强东" width="50"></td>
<td>董事局主席兼执行官</td>
<td>京东集团</td>
<td>电商</td>
<td>北京市</td>
<td>朝阳区</td>
<td>18</td>
<td>622.3</td>
</tr>
<tr>
<td>8</td>
<td>丁磊</td>
<td><img src="images/7.png" alt="丁磊" width="50"></td>
<td>董事局主席兼首席执行官</td>
<td>网易公司</td>
<td>互联网</td>
<td>广东省</td>
<td>广州市</td>
<td>9</td>
<td>1118.8</td>
</tr>
<tr>
<td>9</td>
<td>何享健</td>
<td><img src="images/8.jpg" alt="何享健" width="50"></td>
<td>董事长</td>
<td>美的集团</td>
<td>家电</td>
<td>广东省</td>
<td>佛山市</td>
<td>7</td>
<td>1237.9</td>
</tr>
</table>
<p style="background-color: orange;width: 300px;">我是要被appendTo()移动的节点1</li>
<p style="background-color: orange;width: 300px;">我是中国大富豪</li>
<p style="background-color: orange;width: 300px;">我是要被insertAfter()移动的节点3</li>
<p style="background-color: orange;width: 300px;">我是要被insertBefore()移动到马云的网络大亨</li>
<div class="box">
<button>appendTo()(插入新的)</button>
<button>appendTo()(排名移动)</button>
<button>prependTo()(插入新的节点)</button>
<button>prependTo()(移动到指定标签后)</button>
<button>insertAfter()添加新内容</button>
<button>insertAfter()移动操作</button>
<button>insertBefore()添加新内容</button>
<button>insertBefore()移动操作</button>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</body>
<script type="text/javascript">
$('button').eq(0).on('click',function(){
var tr = $('<tr colspan="10">').css({'background-color':'#FD020C','align':'center'}).html('他们都是富豪')
tr.appendTo($('table'))
})
$('button').eq(1).on('click',function(){
$('tr:eq(5)').appendTo($('table')).css('background-color','red')
})
$('button').eq(2).on('click',function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var tr = $('<td>').css({'background-color':'#FD020C','align':'center'}).html('他是中国最大的富豪')
// 将新节点插入到的许家印前面
tr.prependTo($('tr:eq(5)'))
//2.移动操作(请将添加操作的代码注释掉)
//移动到第3个<li>之前
// $('tr:eq(6)').prependTo($('li:eq(2)'))
})
$('button').eq(3).on('click',function(){
//2.移动操作(请将添加操作的代码注释掉)
//移动到第3个<li>之前
$('p:eq(1)').prependTo($('td:eq(41)'))
})
$('button').eq(4).on('click',function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var tr = $('<tr>').css('background-color','lightgreen').html('我是insertAfter()在页面生成的')
//第二点: 将新节点插入到目标节点的后面
tr.insertAfter($('table'))
})
$('button').eq(5).on('click',function(){
//2.移动操作(请将添加操作的代码注释掉)
$('tr:eq(5)').insertAfter($('tr:eq(0)'))
})
$('button').eq(6).on('click',function(){
//1. 添加操作
//第一步: 生成节点元素,添加内容,并设置样式
var tr = $('<tr>').css('background-color','lightgreen').html('我就是一个大富豪')
//第二点: 将新节点插入到目标节点的后面
//插入到第5个<li>之前
tr.insertBefore($('tr:eq(5)'))
})
$('button').eq(7).on('click',function(){
//2.移动操作(请将添加操作的代码注释掉)
//移动到<ul>之前
// $('p:eq(3)').insertBefore($('ul'))
//移动到第3个<li>之前
$('p:eq(3)').insertBefore($('tr:eq(2)'))
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
功能图片
总结：
这个功能可以在网站开发中实现使用jQ实现自定义排序功能
