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

最新推荐文章于 2022-11-21 13:58:20 发布

苏格尼塞

最新推荐文章于 2022-11-21 13:58:20 发布

阅读量831

点赞数

文章标签： jquery js

本文链接：https://blog.csdn.net/qq_17495489/article/details/108144494

版权

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>

苏格尼塞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择器补充,主要针对表格操作（not、even、odd、last、first）

1:表格的增加使用for循环+jQuery+append2：表格的奇数/偶数行区分$(’#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()
复制链接

扫一扫