用js写一个价格升序降序，有两个按钮一个是升序，一个是降序

HTML代码：

<button id="sort-asc">价格升序</button>
<button id="sort-desc">价格降序</button>

<table id="product-list">
  <tr>
    <th>商品名称</th>
    <th>价格</th>
  </tr>
  <tr>
    <td>商品1</td>
    <td>50</td>
  </tr>
  <tr>
    <td>商品2</td>
    <td>30</td>
  </tr>
  <tr>
    <td>商品3</td>
    <td>100</td>
  </tr>
  <tr>
    <td>商品4</td>
    <td>20</td>
  </tr>
</table>

JavaScript代码：

const productList = document.getElementById("product-list");
const sortAscBtn = document.getElementById("sort-asc");
const sortDescBtn = document.getElementById("sort-desc");

sortAscBtn.addEventListener("click", () => {
  sortTable(1, "asc");
});

sortDescBtn.addEventListener("click", () => {
  sortTable(1, "desc");
});

function sortTable(columnIndex, order) {
  const rows = Array.from(productList.rows);
  const sortedRows = rows.slice(1).sort((rowA, rowB) => {
    const cellA = rowA.cells[columnIndex];
    const cellB = rowB.cells[columnIndex];
    const valueA = parseFloat(cellA.textContent);
    const valueB = parseFloat(cellB.textContent);
    if (order === "asc") {
      return valueA - valueB;
    } else {
      return valueB - valueA;
    }
  });
  sortedRows.forEach((row) => {
    productList.appendChild(row);
  });
}

说明：

1. 首先获取商品列表、升序按钮和降序按钮的DOM元素。
2. 给升序按钮和降序按钮分别添加点击事件监听器，在点击时调用`sortTable`函数进行排序。
3. `sortTable`函数接收两个参数，`columnIndex`表示要排序的列的索引，`order`表示排序的顺序，是字符串类型，取值为"asc"或"desc"。
4. 首先将商品列表的所有行转换成数组，并去除表头行，然后对这个数组进行排序。
5. 排序时比较每一行的`columnIndex`列的值，将其转换成数字后进行比较，如果是升序则返回`valueA - valueB`，否则返回`valueB - valueA`。
6. 将排序后的行按顺序添加回商品列表中，这样就完成了排序。