css 搜索表的不同列

wlp8pajw 于 2023-02-14 发布在其他

关注(0)|答案(3)|浏览(95)

我正在尝试一种方法，你可以点击一个按钮，并在一个表中搜索不同的列。我可以找出按钮，并改变[0]到[1]搜索不同的列，但我如何使它更动态，使用javascript。我只想搜索1列一次，所以只搜索名字或只搜索国籍等...
这是一个基本的代码，我做了网络编程20年前，我试图恢复速度。

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (filter) {
        if (txtValue.toUpperCase() == filter) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      } else {
        tr[i].style.display = "";
      }
    }
  }
}

<div class="w3-container">
  <h2>All Information</h2>

  <div class="w3-bar">
    <button class="w3-button w3-black" style="width: 10%">#</button>
    <button class="w3-button w3-teal" style="width: 10%">First Name</button>
    <button class="w3-button w3-red" style="width: 10%">Last Name</button>
    <button class="w3-button w3-yellow" style="width: 10%">Address</button>
    <button class="w3-button w3-green" style="width: 10%">Age</button>
    <button class="w3-button w3-blue" style="width: 10%">Date of Birth</button>
    <button class="w3-button w3-purple" style="width: 10%">Nationality</button>
  </div>

  <input id="myInput" onkeyup="myFunction()" placeholder="Search by ID Number..." title="Type in a number" type="text">

  <table id="myTable">
    <tr class="header">
      <th class="w3-center" style="width: 2%;">#</th>
      <th style="text-align: left; width: 17%;">First Name</th>
      <th style="text-align: left; width: 17%;">Last Name</th>
      <th style="text-align: left; width: 16%;">Address</th>
      <th style="text-align: left; width: 16%;">Age</th>
      <th style="text-align: left; width: 16%;">Date of Birth</th>
      <th style="text-align: left; width: 16%;">Nationality</th>
    </tr>
    <tr>
      <td class="w3-center">1</td>
      <td>John</td>
      <td>Smith</td>
      <td>Pearse Street</td>
      <td>45</td>
      <td>01/10/1977</td>
      <td>English</td>
    </tr>
    <tr>
      <td class="w3-center">11</td>
      <td>Tim</td>
      <td>Green</td>
      <td>Rosedale Avenue</td>
      <td>23</td>
      <td>17/04/1999</td>
      <td>American</td>
    </tr>
    <tr>
      <td class="w3-center">114</td>
      <td>Tom</td>
      <td>Deane</td>
      <td>Greenwood Road</td>
      <td>42</td>
      <td>27/11/1980</td>
      <td>English</td>
    </tr>
    <tr>
      <td class="w3-center">208</td>
      <td>Anna</td>
      <td>Green</td>
      <td>Rosedale Avenue</td>
      <td>23</td>
      <td>11/06/1999</td>
      <td>Scottish</td>
    </tr>
    <tr>
      <td class="w3-center">259</td>
      <td>Rachel</td>
      <td>Waters</td>
      <td>Station Road</td>
      <td>87</td>
      <td>11/02/1936</td>
      <td>Irish</td>
    </tr>
    <tr>
      <td class="w3-center">1</td>
      <td>George</td>
      <td>Taylor</td>
      <td>Beach Avenue</td>
      <td>52</td>
      <td>30/07/1971</td>
      <td>South African</td>
    </tr>
    <tr>
      <td class="w3-center">1</td>
      <td>Neil</td>
      <td>Smyth</td>
      <td>Beach Road</td>
      <td>6</td>
      <td>15/12/2016</td>
      <td>Australian</td>
    </tr>
    <tr>
      <td class="w3-center">1</td>
      <td>Sarah</td>
      <td>Smyth</td>
      <td>Beach Road</td>
      <td>30</td>
      <td>06/01/1993</td>
      <td>Australian</td>
    </tr>
  </table>
</div>

css

来源：https://stackoverflow.com/questions/75418000/search-different-columns-of-table

3条答案

按热度按时间

e3bfsja21#

const column = 3
const searchFor = 'GRE'
for (const cell of document.querySelectorAll(`#myTable tr td:nth-child(${column})`))
  if (cell.textContent.toUpperCase().includes(searchFor))
    cell.style.background = 'lightgreen'

<table id="myTable">
  <tr class="header">
    <th class="w3-center" style="width: 2%;">#</th>
    <th style="text-align: left; width: 17%;">First Name</th>
    <th style="text-align: left; width: 17%;">Last Name</th>
    <th style="text-align: left; width: 16%;">Address</th>
    <th style="text-align: left; width: 16%;">Age</th>
    <th style="text-align: left; width: 16%;">Date of Birth</th>
    <th style="text-align: left; width: 16%;">Nationality</th>
  </tr>
  <tr>
    <td class="w3-center">1</td>
    <td>John</td>
    <td>Smith</td>
    <td>Pearse Street</td>
    <td>45</td>
    <td>01/10/1977</td>
    <td>English</td>
  </tr>
  <tr>
    <td class="w3-center">11</td>
    <td>Tim</td>
    <td>Green</td>
    <td>Rosedale Avenue</td>
    <td>23</td>
    <td>17/04/1999</td>
    <td>American</td>
  </tr>
  <tr>
    <td class="w3-center">114</td>
    <td>Tom</td>
    <td>Deane</td>
    <td>Greenwood Road</td>
    <td>42</td>
    <td>27/11/1980</td>
    <td>English</td>
  </tr>
  <tr>
    <td class="w3-center">208</td>
    <td>Anna</td>
    <td>Green</td>
    <td>Rosedale Avenue</td>
    <td>23</td>
    <td>11/06/1999</td>
    <td>Scottish</td>
  </tr>
  <tr>
    <td class="w3-center">259</td>
    <td>Rachel</td>
    <td>Waters</td>
    <td>Station Road</td>
    <td>87</td>
    <td>11/02/1936</td>
    <td>Irish</td>
  </tr>
  <tr>
    <td class="w3-center">1</td>
    <td>George</td>
    <td>Taylor</td>
    <td>Beach Avenue</td>
    <td>52</td>
    <td>30/07/1971</td>
    <td>South African</td>
  </tr>
  <tr>
    <td class="w3-center">1</td>
    <td>Neil</td>
    <td>Smyth</td>
    <td>Beach Road</td>
    <td>6</td>
    <td>15/12/2016</td>
    <td>Australian</td>
  </tr>
  <tr>
    <td class="w3-center">1</td>
    <td>Sarah</td>
    <td>Smyth</td>
    <td>Beach Road</td>
    <td>30</td>
    <td>06/01/1993</td>
    <td>Australian</td>
  </tr>
</table>

赞(0）回复(0）举报 2023-02-14

gmol16392#

寻找类似的东西？（第一版）

const
  btSearch     = document.querySelector('#bt-search')  
, txt2search   = document.querySelector('#txt-2-search')
, searchResult = document.querySelector('#search-result')
, myTable      = document.querySelector('#my-table')
  ;
btSearch.disabled = true
  ;
myTable.onclick = ({target:TH}) =>
  {
  if (!TH.matches('th')) return;

  clearFounds();
  btSearch.disabled = true;
  
  if (TH.classList.toggle('selec'))
    {
    btSearch.disabled = false;
    myTable.querySelectorAll('th.selec')
      .forEach(th => th.classList.toggle('selec',th===TH))
    }
  }
btSearch.onclick=()=>
  {
  clearFounds();
  let txt     = txt2search.value.trim()
    , Rtxt    = new RegExp(txt, 'i')
    , nCol    = 1 + myTable.querySelector('th.selec').cellIndex
    , counter = 0
    ; 
  if (txt==='')
    {
    searchResult.textContent = 'nothing to search...';
    return;
    }
  myTable.querySelectorAll(`tr td:nth-child(${nCol})`).forEach(td =>  
    {
    if(Rtxt.test(td.textContent))
      {
      counter++;
      td.classList.add('found');
      }  
    })
  searchResult.textContent = (counter===0) ? 'no result' : `${counter} element(s) found`;
  }
function clearFounds()
  {
  searchResult.textContent = '.';
  myTable.querySelectorAll('td.found')
    .forEach(td => td.classList.remove('found'));
  }

body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  margin      : 1rem;
  }
table {
  border-collapse  : separate;
  border-spacing   : 1px;
  background-color : lightslategrey;
  }
th { background: cadetblue;  padding: .3em .6em; cursor: pointer; }
td { background: whitesmoke; padding: .2em .5em; }
tr *:first-child { text-align: center; font-style: oblique; }
tr * { white-space: nowrap; }

th:not(.selec):hover { background: orange;     }
th.selec             { background: orangered   }
td.found             { background: aquamarine; }

caption {
  text-align : left;
  padding    : .4rem;
  font-size  : 1.2rem;
  background-color: #a0dbdd;
  }
#search-result {
  float     : right;
  font-size : .9rem;
  }

<table id="my-table">
  <caption> 
    Find :
    <input type="text" id="txt-2-search" placeholder="select a column first...">
    <button id="bt-search"> do search </button>
    <span id="search-result">0</span>
  </caption>
  <thead>
    <tr>
      <th>#</th><th>First Name</th><th>Last Name</th><th>Address</th><th>Age</th><th>Date of Birth</th><th>Nationality</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td><td>John</td><td>Smith</td><td>Pearse Street</td><td>45</td><td>01/10/1977</td><td>English</td>
    </tr>
    <tr>
      <td>11</td><td>Tim</td><td>Green</td><td>Rosedale Avenue</td><td>23</td><td>17/04/1999</td><td>American</td>
    </tr>
    <tr>
      <td>114</td><td>Tom</td><td>Deane</td><td>Greenwood Road</td><td>42</td><td>27/11/1980</td><td>English</td>
    </tr>
    <tr>
      <td>208</td><td>Anna</td><td>Green</td><td>Rosedale Avenue</td><td>23</td><td>11/06/1999</td><td>Scottish</td>
    </tr>
    <tr>
      <td>259</td><td>Rachel</td><td>Waters</td><td>Station Road</td><td>87</td><td>11/02/1936</td><td>Irish</td>
    </tr>
    <tr>
      <td>1</td><td>George</td><td>Taylor</td><td>Beach Avenue</td><td>52</td><td>30/07/1971</td><td>South African</td>
    </tr>
    <tr>
      <td>1</td><td>Neil</td><td>Smyth</td><td>Beach Road</td><td>6</td><td>15/12/2016</td><td>Australian</td>
    </tr>
    <tr>
      <td>1</td><td>Sarah</td><td>Smyth</td><td>Beach Road</td><td>30</td><td>06/01/1993</td><td>Australian</td>
    </tr>
  </tbody>
</table>

我对这个主题很感兴趣...
对不起，这里可能有太多的技术问题，但我已经花了太多的时间，我会回来解释和评论。如果有任何问题，我会尽我所能回答他们。
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

赞(0）回复(0）举报 2023-02-14

oyxsuwqo3#

这是我的看法，达尔。

//Define a column to look in
// const column = 4

//Get the value from the input
// const searchFor = document.getElementById('myInput').value

//Grab all the cells for the column
columnCells = Array.from(document.querySelectorAll(`#myTable tr td:nth-child(${column})`))

//Clear out previous matches
columnCells.forEach(cell=>cell.style.background = 'white')

//Filter the cells by the searchFor term
matchingCells = columnCells.filter(cell=>{
    return cell.textContent.toLowerCase().includes(searchFor.toLowerCase()) && searchFor != ""
})

//Color them
matchingCells.forEach(cell=>cell.style.background = 'yellow')

赞(0）回复(0）举报 2023-02-14

我来回答

css 搜索表的不同列

3条答案

相关问题

热门标签

最新问答