Question

我不知道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

注意：任何标签都没有属性。我不知道如何使用标签索引来写

Answer 1

这是您问题的答案：

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);
});

Answer 2

输入关键字，然后按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>

Answer 3

执行此操作的方法很多，这里是一种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());

Answer 4

香草溶液...

在此解决方案中，我将所有行（tr）放入特定表（#myTable）中，然后过滤其中包含所需文本的行，此过滤器将返回一个新数组，我将其加入并附加到结果中div。

obs：includes在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>

Answer 5

借口在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函数，这将迭代到表中的所有行。并在搜索框中显示与输入的单词匹配的行。

在要访问对象时放置数组的索引。

如何从Web表中获取包含特定单元格值的整行

5 个答案: