javascript html表过滤器、数组和忽略html

rjee0c15 于 2023-03-28 发布在 Java

关注(0)|答案(1)|浏览(157)

我使用以下JavaScript来过滤表内容（所有列），但我面临一些问题：
1-我想为字母添加一个数组，这样它就可以显示一些带有“法语重音符号”的单词(e = ë, è, é, ê)-(c = ç)..等。
2-如何忽略内部的html标签，如“href，隐藏链接，样式..等”，因为现在当我过滤href或.com（在html代码中）时，它显示为结果。
3-是否可以忽略整个列？（如果我有5列，我可以忽略列3的所有内容吗？

以下是当前工作代码：

const myFunction = () => {
  const trs = document.querySelectorAll('#myTable tr:not(.header)')
  const filter = document.querySelector('#myInput').value
  const regex = new RegExp(filter, 'i')
  const isFoundInTds = td => regex.test(td.innerHTML)
  const isFound = childrenArr => childrenArr.some(isFoundInTds)
  const setTrStyleDisplay = ({ style, children }) => {
    style.display = isFound([
      ...children // <-- All columns
    ]) ? '' : 'none' 
  }
  
  trs.forEach(setTrStyleDisplay)
}

<input 
  type="text" 
  id="myInput" 
  onkeyup="myFunction()" 
  placeholder="search.." 
  title="search">
<br>

<div align="center">
    <table border="1" id="myTable" >
        <tr>
            <td>cédille</td>
            <td><a href="google.com">book</a></td>
        </tr>
        <tr>
            <td>Le tréma</td>
            <td>accent </td>
        </tr>
        <tr>
            <td>garçon </td>
            <td>accept</td>
        </tr>
    </table>
</div>

JavaScript

来源：https://stackoverflow.com/questions/75843454/html-table-filter-array-and-ignore-html

1条答案

按热度按时间

enyaitl31#

1.搜索前可以remove the accents from the content
1.使用innerText代替innerHTML
1.过滤掉不需要的列索引

const removeAccents = str => str.normalize("NFD").replace(/\p{Diacritic}/gu, "");

const myFunction = () => {
  const trs = document.querySelectorAll('#myTable tr:not(.header)')
  const filter = document.querySelector('#myInput').value
  const regex = new RegExp(filter, 'i')
  const isFoundInTds = td => regex.test(removeAccents(td.innerText))
  const isFound = childrenArr => childrenArr.some(isFoundInTds)
  const setTrStyleDisplay = ({ style, children }) => {
    style.display = isFound(
      [...children].filter((_, i) => i !== 2) // <-- All columns except the 3rd (index 2)
    ) ? '' : 'none' 
  }
  
  trs.forEach(setTrStyleDisplay)
}

<input 
  type="text" 
  id="myInput" 
  onkeyup="myFunction()" 
  placeholder="search.." 
  title="search">
<br>

<div align="center">
    <table border="1" id="myTable" >
        <tr>
            <td>cédille</td>
            <td><a href="google.com">book</a></td>
            <td>ignored</td>
            <td>included</td>
        </tr>
        <tr>
            <td>Le tréma</td>
            <td>accent </td>
            <td>ignored1</td>
            <td>included1</td>
        </tr>
        <tr>
            <td>garçon </td>
            <td>accept</td>
            <td>ignored2</td>
            <td>included2</td>
        </tr>
    </table>
</div>

另外，以后要把你的问题单独贴出来

赞(0）回复(0）举报 2023-03-28

我来回答

javascript html表过滤器、数组和忽略html

1条答案

相关问题

热门标签

最新问答