How to write a table in javascript

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.

1. Creation and modification of basic tables

The table is composed of HTML tags f5d188ed2c074f8b944552db028f98a1, ae20bdd317918ca68efdc799512a9b39, 92cee25da80fac49f6fb6eec5fd2c22a, 06669983c3badb677f993a8c29d18845, < ;tr>, b4d429308760b6c2d20d6300079ed38e and b6c5a531a458a2e790c1fd6421739d1c. If you want to create a table dynamically, you can generate the table by adding these tags.

The following is a simple example:

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

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

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

2. 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);

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.

3. 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;
      }
    }
  }
}

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.

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

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!