选择器补充,主要针对表格操作(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>
相关文章推荐
- jquery基本过滤选择器:first :last :not(.myclass) :even :odd :eq(1) :gt(5) :lt(1) :header :animated :focus
- Jquery 过滤器(first,last,not,even,odd)的使用
- jquery过滤器(first,last,not,even,odd简单应用)
- Jquery 过滤器(first,last,not,even,odd)的使用
- jQuery——jQuery基础方法first()/last()/not(CSS选择器)/even/odd/eq(index)/gt(index)/lt(index)
- Jquery 过滤器(first,last,not,even,odd)应用
- CSS3选择器:属性、:root、:not、:empty、:target、first-child、last-child....
- 针对Excel表格文件操作的编程实现
- first-child first-of-type last-child last-of-type 伪类选择器总结
- 【CSS3】---结构性伪类选择器-first-child+last-child
- jquery笔记:筛选 eq,first,last,filter,is,has, not, children,closest, nextUntil,parents,parentsUntil.....
- Ext Js 3.2中表格的常见操作,主要是对表格属性的修改
- jquery 的:first-child 和:last-child 选择器实例
- 针对Excel表格文件操作的编程实现
- AngularJS 使用 even 和 odd 表格
- JFileChooser+FileNameExtensionFilter 文件选择器+过滤器------上传图片功能 表格内部操作
- 针对Excel表格文件操作的编程实现(编译:徐景周)(转)
- jQuery :first :last选择器
- RX操作符之过滤操作二(firstOrDefault、single、elementAt、sample、throttleFirst、throwttleLast、throttleWithTimeout)
- 知识点七:jQuery 遍历 - 过滤first(), last() 和 eq(),filter() 和 not()