Question

我想通过单击按钮来对参数进行排序：id，薪水和年龄。假设我必须动态清理我的表（deleteRow），进行排序，然后再次显示数据。但是，似乎很难。有人可以帮我吗？有更好的方法吗？

JavaScript：

const butt = document.getElementById('button');
const swTable = document.getElementById('table').getElementsByTagName('tbody')[0];
const url = 'http://dummy.restapiexample.com/api/v1/employees';

function fetchFromUrl(url) {
  return fetch(url).then(function(resp) {
    return resp.json()
  });
}

function createElement(nameOfTag, text) {
  const element = document.createElement(nameOfTag);
  const content = document.createTextNode(text);
  element.appendChild(content);
  return element;
}

function createTable(data) {
  const table = document.createElement('tr');
  const {
    id,
    employee_name,
    employee_salary,
    employee_age
  } = data;

  table.appendChild(createElement('td', id))
  table.appendChild(createElement('td', employee_name))
  table.appendChild(createElement('td', employee_salary))
  table.appendChild(createElement('td', employee_age))
  return table;
}

fetchFromUrl('http://dummy.restapiexample.com/api/v1/employees')
  .then(data => {
    data.forEach(result => {
      const row = createTable(result);
      swTable.appendChild(row);
    })
  });

<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JS</title>

  <body>
    <table id=table>
      <thead>
        <th><button id=id> id </button> </th>
        <th><button id=name> employee name </button> </th>
        <th><button id=salary> employee salary </button> </th>
        <th><button id=age>  employee age </button> </th>
        </tr>
      </thead>
      <tbody>

      </tbody>

    </table>

    <script type="module" src='main.js' type="text/javascript">
    </script>
  </body>

</html>

Answer 1

使用普通的JavaScript，您可以使用用于对data数组进行排序的函数，然后将旧的tbody替换为新的数组。

例如：

function sortByField(field) {
  if (field == 'id') {
    data.sort((a,b) => (Number(a.id) > Number(b.id)) ? 1 : ((Number(b.id) > Number(a.id)) ? -1 : 0)); 
  } else if (field == 'name') {
    data.sort((a,b) => (a.employee_name > b.employee_name) ? 1 : ((b.employee_name > a.employee_name) ? -1 : 0)); 
  } else if (field == 'salary') {
    data.sort((a,b) => (Number(a.employee_salary) > Number(b.employee_salary)) ? 1 : ((Number(b.employee_salary) > Number(a.employee_salary)) ? -1 : 0)); 
  } else if (field == 'age') {
    data.sort((a,b) => (Number(a.employee_age) > Number(b.employee_age)) ? 1 : ((Number(b.employee_age) > Number(a.employee_age)) ? -1 : 0)); 
  }

  var old_tbody = document.getElementById('tbody');
  var new_tbody = document.createElement('tbody');
  new_tbody.setAttribute('id', 'tbody');
  data.forEach(result => {
    const row = createTable(result);
    new_tbody.appendChild(row);
  });
  old_tbody.parentNode.replaceChild(new_tbody, old_tbody);
}

并在按钮上添加onclick事件处理程序：

onclick="sortByField('id')"

Here，您可以找到一个有效的示例。

请注意，我在排序时使用Number将字符串转换为数字。

当然，您可以使用Underscore library进行排序，使用JQuery库选择html元素等。

并以here的方式来对对象数组进行排序。

按网址对click API数据进行排序

1 个答案: