您的位置:首页 > 其它

选择器补充,主要针对表格操作(not、even、odd、last、first)

2020-08-21 15:17 274 查看

1:表格的增加

使用for循环+jQuery+append

2:表格的奇数/偶数行区分

$(’#tb tr:even’).addClass(‘row-0’)
$(’#tb tr:odd’).addClass(‘row-1’)

3、除了第一行,表格中的其他行都选中(not 伪标签、first伪标签)

$(‘tr:not(#first-tr)>td’).text(’’)       //将表格内容清空

$(‘tr:not(#first-tr):last’).remove()       //将表格中的最后一行删除

4、隐藏标签

隐藏表格:

function hideTable(){
// $('#top').hide(1000)
$('#top').slideUp()
}

显示表格:

function showTable(){
// $('#top').show(1000)
$('#top').slideDown()
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}

#top{
width: 600px;

}
#top>p{
text-align: center;
}
#top>table{
background-color: black;
width: 100%;
text-align: center;
}
tr{
background-color: white;
/* text-align: center; */
height: 40px;
}

.row-0{
background-color: lavender;
}
.row-1{
background-color: #5F9EA0;
}
#first-tr{
background-color: white;
font-weight: 600;
}

#bottom{
margin-top: 10px;
}
</style>
</head>
<body>
<div id="top">
<p>数据统计表</p>
<table cellspacing="1" id="tb">
<tr id="first-tr">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>身高</td>
<td>体重</td>
</tr>

</table>
</div>
<div id="bottom">
<button type="button" onclick="changeColor()">隔行换色</button>
<button type="button" onclick="clearData()">清除数据</button>
<button type="button" onclick="deleteRow()">删除单元格</button>
<button type="button" onclick="hideTable()">隐藏表格</button>
<button type="button" onclick="showTable()">显示表格</button>
</div>

<script type="text/javascript">
// 1.创建表格
// 自调用函数:(匿名函数)(实参列表)
(function(){
var row = 6
var col = 5
for (let r=0;r<row;r++) {
var html = ''
for(let c=1; c<=col;c++){
html += `<td>Item${c}</td>`
}
html = `<tr>${html}</tr>`
var tr = $(html)
$('#tb').append(tr)
}
})()

// 2.隔行换色
function changeColor(){
$('#tb tr:even').addClass('row-0')
$('#tb tr:odd').addClass('row-1')
}

// 3.清除数据
function clearData(){
$('tr:not(#first-tr)>td').text('')
}

// 4.删除行
function deleteRow(){
$('tr:not(#first-tr):last').remove()
}

// 5.隐藏表格
function hideTable(){
// $('#top').hide(1000)
$('#top').slideUp()
}

function showTable(){
// $('#top').show(1000)
$('#top').slideDown()
}

</script>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: