js实现表格美化，内容清除、删除和表格隐藏
2018-11-07 本文已影响0人
楠木cral
通过点击button，实现美化，清除。删除和隐藏表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#data {
border-collapse: collapse;
}
#data td, #data th {
width: 120px;
height: 40px;
text-align: center;
border: 1px solid black;
}
#buttons {
margin: 10px 0;
}
/*#data tr{
background-color: red;
}*/
</style>
</head>
<body>
<table id="data">
<caption>数据统计表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>身高</th>
<th>体重</th>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td><a>Item3</a></td>
<td>Item4</td>
<td>Item5</td>
</tr>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
<td>Item4</td>
<td><a>Item5</a></td>
</tr>
</table>
<div id="buttons">
<button id="pretty">美化表格</button>
<button id="clear">清除数据</button>
<button id="remove">删单元格</button>
<button id="hide">隐藏表格</button>
<script>
function changeColor(){
r = parseInt(Math.random()*256);
g = parseInt(Math.random()*256);
b = parseInt(Math.random()*256);
return 'rgb(' + r + ','+ g +','+ b + ')';
}
var pretty = document.getElementById('pretty');
var clear = document.getElementById('clear');
var remove = document.getElementById('remove');
var hide = document.getElementById('hide');
//美化表格
pretty.addEventListener('click',function(){
var trs = document.querySelectorAll('#data tr');
for(var i = 1;i < trs.length;i++){
trs[i].style.backgroundColor = changeColor();
}
});
//清除数据
clear.addEventListener('click',function(){
var tds = document.querySelectorAll('#data tr td');
for(var i = 0;i < tds.length;i++){
tds[i].textContent = '';
}
});
//删除单元格
remove.addEventListener('click',function(){
var trs = document.querySelectorAll('#data tr');
if(trs.length>1){
trs[0].parentNode.removeChild(trs[trs.length-1]);
}
});
//隐藏表格
hide.addEventListener('click',function(){
var data = document.getElementById('data');
if(data.style.display == 'none'){
data.style.display = '';
}else{
data.style.display = 'none';
}
});
</script>
</div>
</body>
</html>
image.png
