多关键词搜索、高亮和筛选
<body>
姓名：<input type="text" id="name"><input type="button" value="搜索" id="btn">
<table border="1" id="table1" width="500">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>Blue</td>
<td>25</td>
</tr>
<tr>
<td>5</td>
<td>张昭仪</td>
<td>28</td>
</tr>
</tbody>
</table>
<script>
window.onload = function () {
var oTable = document.getElementById('table1');
var oName = document.getElementById('name')
var oBtn = document.getElementById('btn')
oBtn.onclick = function () {
for (var i = 0; i < oTable.tBodies[0].rows.length; i++) { //循环每一行
var oTd = oTable.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase()
var oInp = oName.value.toLowerCase()
var arr = oInp.split(' ') //将字符串分割成数组
//oTable.tBodies[0].rows[i].style.background = '' //将所有行的背景颜色清空
oTable.tBodies[0].rows[i].style.display = "none" //将所有行设为不显示
for (var j = 0; j < arr.length; j++) { //将数组里的每一个元素和比较列去对比
if (oTd.search(arr[j]) != -1) { //字符串中的search()，如果包含返回字符的位置、不包含返回 -1
//oTable.tBodies[0].rows[i].style.background = 'red'
oTable.tBodies[0].rows[i].style.display = "" //显示符合条件的行（筛选效果）
}
}
}
}
}
</script>
</body>li排序
li移动实例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#ul1{background:red;}
#ul2{background:yellow;}
</style>
</head>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<input type="button" value="移动" id="btn">
<ul id="ul2"></ul>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn')
var oUl1 = document.getElementById('ul1')
var oUl2 = document.getElementById('ul2')
oBtn.onclick = function(){
var oLi = oUl1.children[0];
oUl1.removeChild(oLi); //可以省略这一步，因为appendChild会先把元素从原有父级移除
oUl1.appendChild(oLi) //appendChild 1、先把元素从原有父级删掉 2、添加上新的父级上
}
}
</script>
</body>li移动实例2
<body>
<input type="button" value="移动" id="btn">
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn')
var oUl1 = document.getElementById('ul1')
oBtn.onclick = function(){
var oLi = oUl1.children[0];
oUl1.appendChild(oLi) //appendChild 1、先把元素从原有父级删掉 2、添加上新的父级上
}
}
</script>
</body>li排序实例
<body>
<input type="button" value="排序" id="btn">
<ul id="ul1">
<li>23</li>
<li>35</li>
<li>11</li>
<li>8</li>
</ul>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn')
var oUl1 = document.getElementById('ul1')
oBtn.onclick = function () {
var oLi = oUl1.getElementsByTagName('li');
//oLi.sort() oLi 是元素的集合，并不是 Array，sort 方法是数组特有的
var arr = []
for (var i = 0; i < oLi.length; i++) {
arr[i] = oLi[i] //将所有 li 存放到数组中
}
arr.sort(function (li1, li2) { //排序 li 数组
var n1 = li1.innerHTML //比较函数：比较 li 里的innerHTML
var n2 = li2.innerHTML
return n1 - n2
})
for (var n = 0; n < arr.length; n++) {
oUl1.appendChild(arr[n]) //然后将排序好的 li 依次 appendChild 到 ul 中
}
}
}
</script>
</body>表格排序
<body>
<input type="button" value="排序" id="btn">
<table border="1" id="table1" width="500">
<thead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>Blue</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>里斯</td>
<td>24</td>
</tr>
</tbody>
</table>
<script>
window.onload = function () {
var oTable = document.getElementById('table1');
var oBtn = document.getElementById('btn')
oBtn.onclick = function()
{
var arr = []
for(var i = 0; i < oTable.tBodies[0].rows.length; i++){ //将所有tr 存放到数组中
arr[i] = oTable.tBodies[0].rows[i]
}
arr.sort(function(tr1, tr2){ //排序 tr 数组
var n1 = parseInt(tr1.cells[0].innerHTML)
var n2 = parseInt(tr2.cells[0].innerHTML)
return n1 - n2 //根据每一行的 id 进行排序
})
for(var i = 0; i < arr.length; i++){ //将排好序的 tr 数组，依次插入 tbody 中
oTable.tBodies[0].appendChild(arr[i])
}
}
}
</script>
</body>