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

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

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 个解决方案

解决方案1
1 已采纳 2018-07-25 06:20:53

解决方案2
0 2018-07-25 06:18:41

解决方案3
0 2018-07-25 06:25:04

解决方案4
0 2018-07-25 06:55:26

解决方案5
0 2018-07-25 11:30:26

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

问题描述

5 个解决方案

解决方案1 1 已采纳 2018-07-25 06:20:53

解决方案2 0 2018-07-25 06:18:41

解决方案3 0 2018-07-25 06:25:04

解决方案4 0 2018-07-25 06:55:26

解决方案5 0 2018-07-25 11:30:26

解决方案1
1 已采纳 2018-07-25 06:20:53

解决方案2
0 2018-07-25 06:18:41

解决方案3
0 2018-07-25 06:25:04

解决方案4
0 2018-07-25 06:55:26

解决方案5
0 2018-07-25 11:30:26