如何从包含特定单元格值的网络 table 中获取整行

Question

我不知道 JavaScript，但我需要使用 tampermonkey 找到解决方案。请帮我解决这个问题。

我有一个网页。我在该页面上的文本字段中输入了一个文本字段，这导致 Web table 的行过多。我只想要与特定文本值匹配的行。
例如： "Format" 为正文。我希望显示整个 row/rows 匹配项，并希望将结果附加到同一网页。

<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>

我的输出应该像

Format x Format y
Format z Format q

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

Answer 1

输入关键字并回车。

(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 2

这是您问题的答案：

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 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

香草溶液...

在这个解决方案中，我在特定 table ( #myTable ) 中获取所有行 ( tr )，然后过滤其中包含所需文本的行，此过滤器将 return a我加入并附加到结果中的新数组 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

Excuse for writing js( script tags ) inside HTML

已为您的代码添加了一个片段，试试看。

<!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 函数，它将迭代到 table 中的所有行。并在搜索框中显示与输入的词相匹配的行。

Place the index of the array as you want to access the objects.

如何从包含特定单元格值的网络 table 中获取整行

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

html

javascript

tampermonkey