版权声明:转载请标明出处 https://blog.csdn.net/Ms_yjk/article/details/81985259
本文章主要是了解js制作表格,不过现在前端一般都是用div+CSS布局,所以有兴趣的可以了解一下这种思想。在我们现实生活中表格是非常普遍的,也是非常好用的,现在我们有Excel,Word,WPS也可以来制作表格。(为什么说table表格布局不好?)
制作表格:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<!--
作者:[email protected]
时间:2018-08-23
-->
<body>
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>5</td>
<td>张伟</td>
<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>
表格变色以及高亮(此代码加入script模块):
<script>
window.onload = function()
{
var oTab = document.getElementById('tab1');
var oldColor = ''; //事先存储一个颜色
//alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML); //查询某数据
//alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);// 与上面的功能一样
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{
oTab.tBodies[0].rows[i].onmouseover = function() //鼠标移入
{
oldColor = this.style.background;
this.style.background = 'blue';
};
oTab.tBodies[0].rows[i].onmouseout = function() //鼠标移出
{
this.style.background = oldColor;
};
//高亮
if(i%2){
oTab.tBodies[0].rows[i].style.background = "orange";
}
else{
oTab.tBodies[0].rows[i].style.background = "pink";
}
}
};
</script>
表格添加以及删除(先在HTML模块中加入属性):
Name: <input id = "name" type = "text" />
Age: <input id = "age" type = "text" />
<input id = "btn1"type="button" value="添加" />
表格添加以及删除(Javascript模块):
<script>
window.onload = function()
{
var oTab = document.getElementById('tab1');
var oBtn = document.getElementById('btn1');
var oName = document.getElementById('name');
var oAge = document.getElementById('age');
var id = oTab.tBodies[0].rows.length+1;
oBtn.onclick = function()
{
//创建元素列表
var oTr = document.createElement('tr');
var oTd = document.createElement('td');
oTd.innerHTML = id++;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = oName.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = oAge.value;
oTr.appendChild(oTd);
var oTd = document.createElement('td');
oTd.innerHTML = '<a href= "javascript:;">Delete</a>';
oTr.appendChild(oTd);
oTd.getElementsByTagName('a')[0].onclick=function ()
{
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
};
oTab.tBodies[0].appendChild(oTr);
};
};
</script>
添加运行结果:
删除之后ID不可能重复出现:
表格搜索(模糊搜索 关键词搜索功能)完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function()
{
var oTab = document.getElementById('tab1');
var oBtn = document.getElementById('btn1');
var oTxt = document.getElementById('name');
oBtn.onclick=function ()
{
for(var i=0;i<oTab.tBodies[0].rows.length;i++)
{//模糊搜索
var sTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
var sTxt = oTxt.value.toLowerCase();
//关键词搜索
var arr = sTxt.split(' ');
oTab.tBodies[0].rows[i].style.background='';
for(var j=0;j<arr.length;j++)
{
if(sTab.search(arr[j])!= -1)
{
//搜索到此数据高亮
oTab.tBodies[0].rows[i].style.background='yellow';
}
}
}
};
};
</script>
</head>
<body>
Name: <input id = "name" type = "text" />
<input id = "btn1"type="button" value="搜索" />
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>Name</td>
<td>Age</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jack</td>
<td>21</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Sum</td>
<td>15</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>Jason</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>Lily</td>
<td>19</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>Tom</td>
<td>29</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>Young</td>
<td>18</td>
<td></td>
</tr>
<tr>
<td>7</td>
<td>Ocean</td>
<td>22</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果:搜索j ly(模糊搜索 关键词分割搜索):