day37—the operation application of javascript to the table (2)

Change career development, code 100 days - 2018-04-22

 

Yesterday, I learned the basic operations of JavaScript on table, including table creation, table element acquisition, interlaced color change and mouse actions. Today, I mainly learn table search query and sorting operations.

 

1. Search Queries

The core of the search query is to match the content to be queried with the content of the table.

The search query methods include: direct query, fuzzy query, multi-keyword query, etc., and the processing methods are all processing strings.

 

Direct query: txt1 == txt2

Case-insensitive query: txt1.toLowerCase() = txt2.toLowerCase();//Convert to lowercase

Fuzzy search: txt1.search(txt2);

Multi-keyword query: txt1.split(' '); txt.search(txt2);

 The following table:

姓名：<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>Age</td>
            <td>操作</td>
        </thead>
        <tbody>
             <tr>
                <td>1</td>
                <td>Zhang Wei</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>Zhang San</td>
                <td>23</td>
                <td></td>
             </tr>
            <tr>
                <td>4</td>
                <td>Li Si</td>
                <td>22</td>
                <td></td>
            </tr>
        </tbody>
    
    </table>

JavaScript implements query

1. Direct inquiry

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";
              }
          }
         }
        };

 

 

The content of each matching character must be exactly the same.

Obviously, this method increases the requirements for input conditions, and is not feasible in practical applications, so the requirements for query conditions need to be relaxed. At this time, the content of the query needs to be processed.

mainly includes:

1>. Weak capitalization requirements:

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>. Weak character integrity requirements: search method - fuzzy query method

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) // fuzzy search 
              {
                  oTab.tBodies[0].rows[i].style.background = "green";
              }else oTab.tBodies[0].rows[i].style.background ="";

3. Multi-keyword query: split segmentation

    // Multi-keyword query 
              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";
                  }
              }

That is, the multi-keyword query content is sorted into a string by the split method

Through the loop, find the item with the query content in each row, combined with the fuzzy query search method.

 

 2. table sorting