簡體   English   中英

如何從Web表中獲取包含特定單元格值的整行

[英]How to get an entire row from a web table which contains a specific cell value

我不知道JavaScript,但是我需要使用tampermonkey找到解決方案。 請幫我。

我有一個網頁。 我在該頁面上的文本字段中輸入內容,這導致Web表中的行過多。 我只需要與特定文本值匹配的行。
例如: “格式”是文本。 我希望顯示所有匹配的行/行,並將結果附加到同一網頁。

<HTML>
<BODY>
<table>
</table>
<Table>
    <Tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>Format</td>
        <td>x</td>
        <td>Format</td>
        <td>y</td>
    </tr>
    <tr>
        <td>Format</td>
        <td>z</td>
        <td>Format</td>
        <td>q</td>
    </tr>
    </Tbody>
</Table>
</BODY>
</HTML>

我的輸出應該像

格式x格式y
格式z格式q

注意 :任何標簽都沒有屬性。 我不知道如何使用標簽索引來編寫

這是您問題的答案:

var a=$.find('td');

var str="";

a.forEach(function(td) {
   if(td.textContent=='Format') {
      // here you can change the text or append the text
      str += td.parentElement.textContent;  
   }
   console.log(str);
});

輸入關鍵字,然后按Enter。

 (function($) { $('#keyword').on('keydown', function(e) { var keyword = $(this).val(); if (e.which == 13) { $('table tbody tr').show(0); if (keyword == '') return; $('table tbody tr').each(function() { var match = false; $(this).children('td').each(function() { var text = $(this).text(); if (text.indexOf(keyword) > -1) { match = true; } }); if (!match) { $(this).hide(0); } }); } }); })(jQuery); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <HTML> <BODY> <input type="text" id="keyword"> <table> </table> <Table> <Tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>Format </td> <td>x</td> <td>Format</td> <td>y</td> </tr> <tr> <td>Format </td> <td>z</td> <td>Format</td> <td>q</td> </tr> </Tbody> </Table> </BODY> </HTML> 

有很多方法可以做到這一點,這是一個https://jsfiddle.net/ut20zsr7/15/

function findFormat() {
  var bFormat = false;
  var result = [];

  $("table tr").each(function(i, tr) {
    $(tr).find("td").each(function(j, td) {
      if (bFormat) {
        result.push($(td).text().trim());
        bFormat = false;
      } else if (j % 2 === 0 && $(td).text().trim() === "Format") {
        result.push("Format");
        bFormat = true;
      } else {
        result = [];
      }
    });
  });
  if (result.length > 0) {
    return result.join(" ");
  }
  return "";

}

console.log(findFormat());

香草溶液...

在此解決方案中,我將所有行(tr)放入特定表(#myTable)中,然后過濾其中包含所需文本的行,此過濾器將返回一個新數組,我將其加入並附加到結果div中。

obs:include不適用於IE,因此請使用pollyfil或indexOf

  const table = document.querySelector("#myTable"); const rows = Array.from(table.querySelectorAll("tr")); const rowsFiltered = rows.filter((row) => row.innerText.includes("Format")); document.querySelector("#result").innerHTML = rowsFiltered.map((row) => { return row.innerHTML; }).join('<hr>'); 
 <HTML> <body> <table id="myTable"> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>Format </td> <td>x</td> <td>Format</td> <td>y</td> </tr> <tr> <td>Format </td> <td>z</td> <td>Format</td> <td>q</td> </tr> </tbody> </table> <h3>Result</h3> <div id="result" style="border: 2px solid black; margin: 10px 0px;"></div> </body> </HTML> 

在HTML內編寫js(腳本標簽)的借口

為您的代碼添加了代碼段,請嘗試一下。

 <!DOCTYPE html> <html> <body> <input type="text" id="myInput" onkeyup="myFunction()"> <table id="myTable"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td>format</td> <td>x</td> <td>format</td> <td>y</td> </tr> <tr> <td>format</td> <td>z</td> <td>format</td> <td>q</td> </tr> </table> <script> function myFunction() { var input, filter, table, tr, td, i; 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) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } </script> </body> </html> 

已使用onkeyup()在搜索框中的每次擊鍵上調用JS函數,這將迭代到表中的所有行。 並在搜索框中顯示與輸入的單詞匹配的行。

放置數組索引以訪問對象。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM