How to get an entire row from a web table which contains a specific cell value
Question
I do not know JavaScript, but i need to find a solution for this with tampermonkey. Please help me on this.
I have a webpage. I give an input into a text field on that page which results a web table with too many rows. I want only rows matching with specific text value.
For Example: "Format" is the text. I want the entire row/rows matching to be displayed and want to append result to the same webpage.
<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>
My OUTPUT Should be like
Format x Format y
Format z Format q
Note : There is no attributes for any of the tags. I do not know how to write using index of the tags
5 answers
solution1
1 ACCPTED 2018-07-25 06:20:53
Here is the answer of your question :
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);
});
solution2
0 2018-07-25 06:18:41
Enter the keyword and press 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>
solution3
0 2018-07-25 06:25:04
there are many ways to do this and here is one 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());
solution4
0 2018-07-25 06:55:26
Vanilla solution...
In this solution, I'm taking all lines ( tr ) inside a specific table ( #myTable ) and then filtering which ones has the wanted text inside, this filter will return a new array which I join and append in the result div.
obs: includes doesn't work on IE, so use a pollyfil or 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>
solution5
0 2018-07-25 11:30:26
Excuse for writing js( script tags ) inside HTML
Have added a snippet for your code, give a try.
<!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>
Have used onkeyup() for calling JS function on each keystrokes in search box, which will iterate to all rows in table. and display that row that matches the entered word in search box.
Place the index of the array as you want to access the objects.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.