主页 / 问题 / 1393013
Accepted
Leks
Asked:2022-08-24 03:04:49 +0800 CST2022-08-24 03:04:49 +0800 CST

表未迭代

  • 772

let arr = Array.from(document.querySelector('#grid').rows)
document.querySelector('#grid').addEventListener('click', event =>{
   if(event.target.dataset.type == 'number'){
      arr.forEach( item => {
         if(item.rowIndex > 0){
           
            arr.sort(() => {
               item.cells[0].firstChild.data > item.cells[0].firstChild.data
            })
            
         }
      }) 
   }
})
table {
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 4px;
  }
  th {
    cursor: pointer;
  }
  th:hover {
    background: yellow;
  }
  <table id="grid">
    <thead>
      <tr>
        <th data-type="number">Возраст</th>
        <th data-type="string">Имя</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>5</td>
        <td>Вася</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Петя</td>
      </tr>
      <tr>
        <td>12</td>
        <td>Женя</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Маша</td>
      </tr>
      <tr>
        <td>1</td>
        <td>Илья</td>
      </tr>
    </tbody>
  </table>

  1. 如何使其按年龄从小到大，按名称从 A 到 Z 格式化？
javascript

1 个回答

  1. Best Answer

    方向是正确的。要成功解决问题，我们需要：

    1. 不要忘记删除带有标题的第一行
    2. 定义一个函数来重建 DOM 中表的行元素
    3. 点击表头时，确定表格列的索引
    4. 根据列类型调用相应的排序函数
    5. 重建 DOM

    要比较字符串，最好使用localeCompare返回 -1、1 或 0 的方法。我们以经典方式比较数字。

    let gridElement = document.querySelector('#grid');
let arr = Array.from(gridElement.rows);

arr.shift();

const rearrange = () => {
  for (var i = 0; i < arr.length; i++) arr[i].parentNode.appendChild(arr[i])
};

gridElement.addEventListener('click', event => {

  let cellIndex = event.target.cellIndex;

  if (event.target.dataset.type == 'number') {
    arr.sort((e1, e2) => {
      let a = parseFloat(e1.cells[cellIndex].innerText);
      let b = parseFloat(e2.cells[cellIndex].innerText);

      return a - b;
    });
  } else {
    arr.sort((e1, e2) => {
      let a = e1.cells[cellIndex].innerText.toLowerCase();
      let b = e2.cells[cellIndex].innerText.toLowerCase();

      return a.localeCompare(b);
    });
  }

  rearrange();
})
    table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 4px;
}

th {
  cursor: pointer;
}

th:hover {
  background: yellow;
}
    <table id="grid">
  <thead>
    <tr>
      <th data-type="number">Возраст</th>
      <th data-type="string">Имя</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>5</td>
      <td>Вася</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Петя</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Женя</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Маша</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Илья</td>
    </tr>
  </tbody>
</table>

    可以改进代码以避免无意义的排序/重建。

    • 1

相关问题