JS章节③ (下) DOM的高级应用

1.表格的应用

  • 隔行变色


    
    04-表格的应用
    

    


ID 姓名 年龄
1 Blue 27
2 张三 32
3 李四 17
4 王五 28
5 张伟 35
JS章节③ (下) DOM的高级应用_第1张图片
table的高级用法:隔行变色

2.表格的添加

表格的动态添加



    
    04-表格的添加 删除
    

    



姓名: 年龄:
ID 姓名 年龄
1 Blue 27
2 张三 32
3 李四 17
4 王五 28
5 张伟 35
JS章节③ (下) DOM的高级应用_第2张图片
表格的添加

3.表格的删除



    
    05-表格的添加 删除
    
    


姓名: 年龄:
ID 姓名 年龄 操作
1 Blue 27
2 张三 32
3 李四 17
4 王五 28
5 张伟 35
JS章节③ (下) DOM的高级应用_第3张图片
表格的删除

4.表格的搜索

忽略大小写 , 模糊搜索 , 多关键字搜索
toLowerCase() 把字符串转成全小写的形式;
模糊搜索 search 当找到的时候,返回位置;找不到,返回-1;



    
    06-表格的搜索
    

    



姓名:
ID 姓名 年龄 操作
1 Blue 27
2 张三 32
3 李四 17
4 王五 28
5 张伟 35
JS章节③ (下) DOM的高级应用_第4张图片
表格的搜索

5.排序

  • 1


    
    08-排序
    



  • 34
  • 25
  • 9
  • 88
  • 54
JS章节③ (下) DOM的高级应用_第5张图片
排序一
  • 2


    
    06-表格的排序
    
    


ID 姓名 年龄 操作
2 张三 32
4 王五 28
5 张伟 35
1 Blue 27
3 李四 17
JS章节③ (下) DOM的高级应用_第6张图片
排序二

你可能感兴趣的:(JS章节③ (下) DOM的高级应用)