时间戳

首页 > 解决方案 > 仅使用 javascript 对 HTML 表格进行排序，忽略文章（“a”、“an”、“the”）

javascript - 仅使用 javascript 对 HTML 表格进行排序，忽略文章（“a”、“an”、“the”）

问题描述

我整理了一个 HTML 表格，我需要排序忽略“a”、“an”和“the”。我还需要忽略引号之类的非字母数字字符（例如，如果标题类似于 ["Boo": A Collection of Horror Stories]）。

我找到了一些如何从字符串中整理文章的示例。但是我的表格数据被硬编码到 HTML 中。对于上下文，我在 CMS 中工作，不能使用 JSON 或 JQUERY。

这是片段。

<style>
table.sash-table {
}

table.sash-table th {
  cursor: pointer;
  position: sticky;
  top: 0px;
  background: white;
}

table.sash-table th, td {
  text-align: left;
  padding: 16px;
}

table.sash-table tr:nth-child(even) {
  background-color: #f2f2f2
}

  
table.sash-table th:hover {
color:lightgray;
}

</style>

<script>
function sortTable(n) {
const closestTable = event.target.closest("table");
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById(closestTable.id);
  switching = true;
  // Set the sorting direction to ascending:
  dir = "asc";
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // Start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /* Loop through all table rows (except the
    first, which contains table headers): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Start by saying there should be no switching:
      shouldSwitch = false;
      /* Get the two elements you want to compare,
      one from current row and one from the next: */
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Check if the two rows should switch place,
      based on the direction, asc or desc: */
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* If a switch has been marked, make the switch
      and mark that a switch has been done: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Each time a switch is done, increase this count by 1:
      switchcount ++;
    } else {
      /* If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

    
</script>
<html>
<table id="table-1906-1988" class="sash-table">
    <tbody style="height: 500px; display: block; overflow-y: auto;">
        <tr>
            <th class="year" onclick="sortTable(0)">Year</th>
            <th class="title" onclick="sortTable(1)">Title</th>
            <th class="authors" onclick="sortTable(2)">Author(s)</th>
        </tr>
        <tr>
            <td>1906</td>
            <td>Salt Glazed Stoneware Germany, Flanders, England and the United States</td>
            <td>Barber, Edwin Atlee</td>
        </tr>
    
        <tr>
            <td>1906</td>
            <td>Tin Enameled Potter: Maiolica, Delft and Other Stanniferous Faience</td>
            <td>Barber, Edwin Atlee</td>
        </tr>
    
        <tr>
            <td>1907</td>
            <td>Lead glazed pottery, part first (common clays) plain glazed, sgraffito and slip-decorated wares</td>
            <td>Barber, Edwin Atlee</td>
        </tr>
    
        <tr>
            <td>1907</td>
            <td>Artificial Soft Paste Porcelain: France, Italy, Spain and England</td>
            <td>Barber, Edwin Atlee</td>

    
        <tr>
            <td>1908</td>
            <td>The Maiolica of Mexico</td>
            <td>Barber, Edwin Atlee</td>
        </tr>
    
        <tr>
            <td>1910</td>
            <td>Hard Paste Porcelain (Oriental): China, Japan, Siam, Korea</td>
            <td>Barber, Edwin Atlee</td>
        
        </tr>
    
        <tr>
            <td>1913</td>
            <td>Catalogue of a collection of paintings and some art objects (John G. Johnson Collection - Vol. I-III)</td>
            <td>Johnson, John Graver</td>

        </tr>
    
        <tr>
            <td>1913</td>
            <td>The W.P. Wilstach Collection</td>
            <td>Bye, Arthur Edwin</td>
        </tr>
  </table>

非常感谢！

标签： javascripthtmlsorting

解决方案

const removedString = string.replace(/^(a|an|the)(\s)/i, '');

这将删除字符串开头的任何 a、an、the。

编辑这部分代码

/* Get the two elements you want to compare,
   one from current row and one from the next: */
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];

/* Check if the two rows should switch place,
  based on the direction, asc or desc: */
const xValue = x.innerHTML.replace(/^(a|an|the)(\s)/i, '').toLowerCase();
const yValue = y.innerHTML.replace(/^(a|an|the)(\s)/i, '').toLowerCase();

  if (dir == "asc") {
    if (xValue > yValue) {
      // If so, mark as a switch and break the loop:
      shouldSwitch = true;
      break;
    }
  } else if (dir == "desc") {
    if (xValue < yValue) {
      // If so, mark as a switch and break the loop:
      shouldSwitch = true;
      break;
    }
  }


<style>
table.sash-table {
}

table.sash-table th {
  cursor: pointer;
  position: sticky;
  top: 0px;
  background: white;
}

table.sash-table th, td {
  text-align: left;
  padding: 16px;
}

table.sash-table tr:nth-child(even) {
  background-color: #f2f2f2
}

table.sash-table .year {
    width:5%;
}
  
  }
table.sash-table .authors {
  width:17.5%;
}

table.sash-table .title {
  width:38.5%;
}
 
table.sash-table .catalog {
width:12.5%;
}

table.sash-table .fulltext {
width:13.5%;
}

table.sash-table .genre {
width:12.5%;
}

table.sash-table th:hover {
color:lightgray;
}

</style>

<script>
function sortTable(n) {
const closestTable = event.target.closest("table");
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById(closestTable.id);
  switching = true;
  // Set the sorting direction to ascending:
  dir = "asc";
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    // Start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /* Loop through all table rows (except the
    first, which contains table headers): */
    for (i = 1; i < (rows.length - 1); i++) {
      // Start by saying there should be no switching:
      shouldSwitch = false;
      /* Get the two elements you want to compare,
      one from current row and one from the next: */
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /* Check if the two rows should switch place,
      based on the direction, asc or desc: */
      const xValue = x.innerHTML.replace(/^(a|an|the)(\s)/i, '').toLowerCase();
      const yValue = y.innerHTML.replace(/^(a|an|the)(\s)/i, '').toLowerCase();
  
      if (dir == "asc") {
        if (xValue > yValue) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (xValue < yValue) {
          // If so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* If a switch has been marked, make the switch
      and mark that a switch has been done: */
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      // Each time a switch is done, increase this count by 1:
      switchcount ++;
    } else {
      /* If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

    
</script>
<html>
<table id="table-1906-1988" class="sash-table">
    <tbody style="height: 500px; display: block; overflow-y: auto;">
        <tr>
            <th class="year" onclick="sortTable(0)">Year</th>
            <th class="title" onclick="sortTable(1)">Title</th>
            <th class="authors" onclick="sortTable(2)">Author(s)</th>
        </tr>
        <tr>
            <td>1906</td>
            <td>Salt Glazed Stoneware Germany, Flanders, England and the United States</td>
            <td>Barber, Edwin Atlee</td>
        </tr>
    
        <tr>
            <td>1906</td>
            <td>Tin Enameled Potter: Maiolica, Delft and Other Stanniferous Faience</td>
            <td>Barber, Edwin Atlee</td>
        </tr>
    
        <tr>
            <td>1907</td>
            <td>Lead glazed pottery, part first (common clays) plain glazed, sgraffito and slip-decorated wares</td>
            <td>Barber, Edwin Atlee</td>
        </tr>
    
        <tr>
            <td>1907</td>
            <td>Artificial Soft Paste Porcelain: France, Italy, Spain and England</td>
            <td>Barber, Edwin Atlee</td>

    
        <tr>
            <td>1908</td>
            <td>The Maiolica of Mexico</td>
            <td>Barber, Edwin Atlee</td>
        </tr>
    
        <tr>
            <td>1910</td>
            <td>Hard Paste Porcelain (Oriental): China, Japan, Siam, Korea</td>
            <td>Barber, Edwin Atlee</td>
        
        </tr>
    
        <tr>
            <td>1913</td>
            <td>Catalogue of a collection of paintings and some art objects (John G. Johnson Collection - Vol. I-III)</td>
            <td>Johnson, John Graver</td>

        </tr>
    
        <tr>
            <td>1913</td>
            <td>The W.P. Wilstach Collection</td>
            <td>Bye, Arthur Edwin</td>
        </tr>
  </table>

推荐阅读