在Javascript中對動態表進行排序

我以 json 檔案的形式接收物件陣列，并使用 ajax 在表中顯示某些鍵值對。我的下一步是對呈現的表格進行排序，但我不確定如何進行。

<div id="data-table">
    <table id="html-data-table">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </table>    
</div>

創建表的 Javascript 代碼：

newData.map(row => {
        let newRow = document.createElement("tr"); // new row is created
        Object.values(row).map((value) => {
            //console.log(value);
            let cell = document.createElement("td"); // new data for the row is added
            cell.innerText = value;
            newRow.appendChild(cell);
        })
        mytable.appendChild(newRow);
    });

我想分別對這兩列進行排序。我可以使用什么方法？

uj5u.com熱心網友回復：

您可以使用Array.sort()對資料進行排序，在此示例中，我添加了兩個按鈕來處理按name和排序age：

const newData = [
  { name: "dave", age: 22 },
  { name: "charlie", age: 32 },
  { name: "eve", age: 19 },
  { name: "alice", age: 27 },
  { name: "bob", age: 20 }
]

const mytable = document.querySelector("#html-data-table tbody")
const btnSortName = document.getElementById("sortName")
const btnSortAge = document.getElementById("sortAge")


// RENDER UNSORTED TABLE
renderTable(newData)


btnSortName.addEventListener('click', (e) => {
  const sorted = newData.sort((a,b) => a.name.localeCompare(b.name))
  renderTable(sorted)
})


btnSortAge.addEventListener('click', (e) => {
  const sorted = newData.sort((a,b) => a.age - b.age)
  renderTable(sorted)
})



function renderTable(data) {
  mytable.innerHTML = ''
  
  data.map(row => {
    let newRow = document.createElement("tr"); // new row is created
    Object.values(row).map((value) => {
      //console.log(value);
      let cell = document.createElement("td"); // new data for the row is added
      cell.innerText = value;
      newRow.appendChild(cell);
    })
    mytable.appendChild(newRow);
  });
}

<div id="data-table">
  <table id="html-data-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>


<button id="sortName">Sort by Name</button>
<button id="sortAge">Sort by Age</button>

uj5u.com熱心網友回復：

這是一種對表進行就地排序的方法，與任何生成的資料結構無關。唯一需要的額外資訊是sortmode指定特定列是否需要文本排序或數字排序的陣列。

const data=[{name:"Harry",age:32, height:183},{name:"Hermione",age:30, height:175},{name:"Ron",age:31,height:187},{name:"Hagrid",age:53,height:180},{name:"Ginny",age:27,height:170},{name:"Dumbledore",age:273,height:185}],
  sortmode=[0,1,1]; // 0: text, 1: numeric
  mytable=document.querySelector("#data-table tbody");

// fill table: code from OP
data.map(row => {
 let newRow = document.createElement("tr"); // new row is created
 Object.values(row).map((value) => {
  //console.log(value);
  let cell = document.createElement("td"); // new data for the row is added
  cell.innerText = value;
  newRow.appendChild(cell);
 })
 mytable.appendChild(newRow);
});

// sorting: my code
document.querySelector("#data-table thead").onclick=ev=>{
 let col=[...ev.target.parentNode.children].indexOf(ev.target);
 [...mytable.children]
  .sort((a,b)=>
    sortmode[col]
     ? a.children[col].textContent - b.children[col].textContent
     : a.children[col].textContent.localeCompare(b.children[col].textContent)
   )
  .forEach(tr=>mytable.append(tr))

}

td:nth-child(n 2) {text-align:right}

<div id="data-table">
Please click on the column headings to sort the table:
<table id="html-data-table">
   <thead>
    <tr><th>Name</th><th>Age</th><th>Height</th></tr>
   </thead><tbody></tbody>
</table>    
</div>

標籤：javascripthtmljQuerycss阿贾克斯

上一篇：pubspec.yaml有版本解決問題。HTML、SVG、RANDOMAVTAR插件有版本問題

下一篇：為什么不能使用*ngIf有條件地隱藏cdkDropList元素？有解決方法嗎？