[英]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.