day37—javascript对表格table的操作应用（二）

转行学开发，代码100天——2018-04-22

昨天学习了JavaScript对table的基本操作，包括表格的创建，表格元素的获取，隔行换色及鼠标动作等。今天主要学习table的搜索查询及排序操作。

一.搜索查询

搜索查询核心即是将要查询的内容与表格内容相匹配。

搜索查询的方式包括：直接查询、模糊查询、多关键字查询等，其处理方式均是对字符串的处理。

直接查询：txt1 == txt2

不区分大小写查询：txt1.toLowerCase() = txt2.toLowerCase();//转化成小写

模糊搜索：txt1.search(txt2);

多关键字查询：txt1.split（‘ ’）; txt.search(txt2);

如下表格：

姓名：<input id="name" type="text" name=""/>
    <input id="btn" type="button" value="搜索" />
        <table id="tab" border="1" width="400px">
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </thead>
        <tbody>
             <tr>
                <td>1</td>
                <td>张伟</td>
                <td>23</td>
                <td></td>
             </tr>
            <tr>
                <td>2</td>
                <td>Blue</td>
                <td>21</td>
                <td></td>
            </tr>
             <tr>
                <td>3</td>
                <td>张三</td>
                <td>23</td>
                <td></td>
             </tr>
            <tr>
                <td>4</td>
                <td>李四</td>
                <td>22</td>
                <td></td>
            </tr>
        </tbody>
    
    </table>

JavaScript实现查询

1.直接查询

window.onload = function(){
          var oBtn = document.getElementById('btn');
          var Name = document.getElementById('name');
          var oTab = document.getElementById('tab');

         oBtn.onclick = function(){
             for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
              var txt =oTab.tBodies[0].rows[i].cells[1].innerHTML;
              var oname =Name.value; 
              if (txt==oname) {
                  oTab.tBodies[0].rows[i].style.background ="yellow";
              }
          }
         }
        };

需要各个匹配字符内容，必须一模一样。

显然这种方式提高了对输入条件的要求，实际应用中也并不可行，因此需要放宽查询条件的要求。这时要对查询的内容进行处理。

主要包括：

1>.弱化大小写的要求：

txt.toLowerCase()

    var txt =oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
              var oname =Name.value.toLowerCase(); 
              if (txt==oname) {
                  oTab.tBodies[0].rows[i].style.background ="yellow";
              }

2>.弱化字符完整性要求：search方法——模糊查询方法

txt.search(oname)!=-1

    var txt =oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
              var oname =Name.value.toLowerCase(); 
              // if (txt==oname) {
              //     oTab.tBodies[0].rows[i].style.background ="yellow";
              // }

              if(txt.search(oname)!=-1) //模糊搜索
              {
                  oTab.tBodies[0].rows[i].style.background = "green";
              }else oTab.tBodies[0].rows[i].style.background ="";

3.多关键字查询：split分割

    //多关键字查询
              var arr = oname.split(' ');
              oTab.tBodies[0].rows[i].style.background ="";
              // alert(arr);
              for (var j = 0; j < arr.length; j++) {
                  if(txt.search(arr[j])!=-1) //多关键字查询
                  {
                      oTab.tBodies[0].rows[i].style.background = "green";
                  }
              }

即将多关键字查询内容通过split方法整理成一个字符串

通过循环，查找每一行中有带查询内容的项，结合了模糊查询search方法。

二.table 排序

day37—javascript对表格table的操作应用（二）

猜你喜欢