How to write a table in javascript-Front-end Q&A-php.cn

In front-end development, tables are one of the most common elements. JavaScript can be used to dynamically generate tables, which facilitates our control and operation of tables. Here are some common methods and techniques to help you better write JavaScript tables.

Creation and modification of basic tables

The table is composed of HTML tags

, , , , < ;tr>,

and

. If you want to create a table dynamically, you can generate the table by adding these tags.

The following is a simple example:


  
    
      Name
      Age
      City
    
  
  
    
      John
      25
      New York
    
    
      Jane
      30
      Los Angeles

Copy after login

After creating the table, you can modify the table. For example, you can add new rows and columns:

var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "Bob";
cell2.innerHTML = "40";
cell3.innerHTML = "Chicago";

Copy after login

The above code adds a new row to the table and fills in the information in each cell.

Generate tables based on data

In actual development, we may need to dynamically generate tables based on some data. Suppose we have a JSON array that contains some student information, then we can dynamically generate a table by traversing the array.

The following is an example:

var students = [
  {name: "John", age: 25, city: "New York"},
  {name: "Jane", age: 30, city: "Los Angeles"},
  {name: "Bob", age: 40, city: "Chicago"}
];
var table = document.createElement("table");
var thead = document.createElement("thead");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
for (var key in students[0]) {
  var th = document.createElement("th");
  th.innerHTML = key.charAt(0).toUpperCase() + key.slice(1);
  tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);
for (var i = 0; i < students.length; i++) {
  var tr = document.createElement("tr");
  for (var key in students[i]) {
    var td = document.createElement("td");
    td.innerHTML = students[i][key];
    tr.appendChild(td);
  }
  tbody.appendChild(tr);
}
table.appendChild(tbody);
document.body.appendChild(table);

Copy after login

The above code first creates a DOM element containing a table, and then creates the table header and table body respectively. During the process of traversing the JSON array, elements are added row by row according to the format of the table header and table body.

It should be noted that the bold part in the code is used to capitalize the first letter of each key.

Table sorting

Table sorting is one of the most common operations. Table sorting can be achieved through JavaScript.

The following is an example:

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[n];
      y = rows[i + 1].getElementsByTagName("td")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

Copy after login

The above code implements a function that sorts by a certain column of the table. The parameter n passed in represents the number of columns to be sorted.

Table filtering

Table filtering is also a common operation. Data in the table can be filtered through JavaScript.

The following is an example:

function filterTable() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

Copy after login

The above code implements a function that filters table data based on the value in the input box. By getting the value in the user input box, and then traversing the content of each cell in the table, if the content contains the value entered by the user, the row of data is retained, otherwise it is hidden.

To sum up, the above are some commonly used JavaScript codes to help you control and operate tables more conveniently. Of course, in actual development, there are more techniques and methods, and I hope you can explore and try them more.

The above is the detailed content of How to write a table in javascript. For more information, please follow other related articles on the PHP Chinese website!

source：php.cn

Previous article：javascript can only run in the browser Next article：javascript prints division and remainder

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]