I created a table and I want to do a search for two columns (code and name) so when the user enters any letter or number of name, code columns it shows all row names containing that letter and I want to show the total rows of my table next to search box.

in HTML

 <input type="text"   onkeyup="searchrecords" id="searchtext" placeholder="Search" aria-label="Text input with dropdown button">
                                        <h6 >Total: </h6>
                                    </div>
                                </div>
                                <table  id="table1">
                                    <thead>
                                        <tr >
                                            <th>ID</th>
                                            <th>Employee Code</th>
                                            <th>Employee Name</th>
                                            <th>Email</th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for i in data_list %}
                                        <tr>
                                            <td>{{ forloop.counter }}</td>
                                            <td>{{i.employee_code}}</td>
                                            <td>{{i.employee_name}}</td>
                                            <td>{{i.email}}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>

In JS I did the search code but it does not work!

   function searchrecords()
   {
       var input,table,tr,td,filter;
       input=document.getElementById("searchtext");
       filter=input.value.toUpperCase();
       table=document.getElementById("table1");
       tr=table.getElementsByTagName("tr");
       for(i=0;i<tr.length;i  )
       {
           td=tr[i].getElementsByTagName("td")[0];
           if(td)
           {
               textdata=td.innerText;
               if(textdata.toUpperCase().indexOf(filter)>-1)
               {
                   tr[i].style.display="";
               }
               else
               {
                   tr[i].style.display="none";
               }
           }
       }
   }

CodePudding user response：

It looks as though your code loops through all the rows, then for each row checks the first cell in the row (td[0]) against the input field. It looks as though the first cell in the row contains a counter so presumably will not match the input text?

Try sticking in some console.log statements in your loop to check what is happening (or step through in a debugger)

It would be easier if you shared all of the relevant generated HTML (including 'searchtext' input). Assuming you are happy with the HTML that has been generated, then the final HTML will be more useful rather than the django markup.

You should probably remove the python and django tags from your question as it seems that your issue is purely with HTML/JS

CodePudding user response：

I made an example for you here. Mayb it helps.

const input = document.getElementById("searchtext");
const rowNum = document.getElementById("row-num");
const table = document.getElementById("table1");
const tr = Array.from(table.getElementsByTagName("tr"));

function renderRowNr() {
  rowNum.innerHTML = tr.filter((row) => row.style.display !== "none").length;
}

function resetRows() {
  tr.forEach((row) => (row.style.display = "inherit"));
}

function searchrecords() {
  resetRows();
  input.value &&
    tr
      .filter((row) => {
        return !Array.from(row.children)
          .map((cell) => {
            return cell.textContent
              .toUpperCase()
              .includes(input.value.toUpperCase());
          })
          .some((cell) => cell === true);
      })
      .forEach((row) => (row.style.display = "none"));
  renderRowNr();
}

function init() {
  resetRows();
  renderRowNr();
  input.addEventListener("change", () => searchrecords());
}

init();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <label>Filter: </label>
    <input id="searchtext" />
    <p>row number: <span id="row-num"></span></p>
    <table  id="table1">
      <tbody>
        <tr>
          <td>1</td>
          <td>abc</td>
          <td>Lokrum</td>
          <td>email1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>def</td>
          <td>Lara</td>
          <td>email2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>ghi</td>
          <td>Lora</td>
          <td>email3</td>
        </tr>
      </tbody>
    </table>
    <script src="app.js"></script>
  </body>
</html>