We Keep Coding

How can I only show the table when the filter is complete

I got a project in which in which i got some data in format of html table and asked to make a web page where you put in the phone number of a person and when you click the button you will get the result filtered out from the data. You will not be able to see someone's else data without knowing their phone number. I made it till here-
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search">
<table id="myTable">
<tr class="header">
<th>Phone</th>
<th>Name</th>
<th>DOB</th>
</tr>
<tr>
<td>1239832</td>
<td>Rhythm</td>
<td>Class 10</td>
</tr>
<tr>
<td>2198320</td>
<td>Rekha</td>
<td>Class 11</td>
</tr>
<tr>
<td>21397293</td>
<td>Arun</td>
<td>Class 11</td>
</tr>
</table>

Here is a much simplified version. You need to type or paste the complete number to see the information
Note that this is not safe if you want to hide the information from the user if they do not know the number because they can just look in the source code. If you need a safer lookup, you need to send the number to the server
const trs = document.querySelectorAll("#myTable tbody tr");
document.getElementById("myInput").addEventListener("input", function() {
const filter = this.value;
// Loop through all table rows, and hide those who don't match the search query
trs.forEach(tr => tr.hidden = filter && tr.querySelector("td").textContent !== filter)
})
</script>
<input type="text" id="myInput" placeholder="Search">
<table id="myTable">
<thead>
<tr class="header">
<th>Phone</th>
<th>Name</th>
<th>DOB</th>
</tr>
</thead>
<tbody>
<tr hidden>
<td>1239832</td>
<td>Rhythm</td>
<td>Class 10</td>
</tr>
<tr hidden>
<td>2198320</td>
<td>Rekha</td>
<td>Class 11</td>
</tr>
<tr hidden>
<td>21397293</td>
<td>Arun</td>
<td>Class 11</td>
</tr>
</tbody>
</table>

Populate a form text area on table row selection - Python Flask HTML

Need help with populating a text area based on html table row selection.
In the table below, I want to extract the content of the column 'Comments' for the selected row and write into the text area 'Comment' on the same page. I have only managed to create the table but nothing else.
Below is the code I have now created from this link. What is happening now is that only the currently selected cell gets put in the text box instead of just the 'Comment' column. I want to input only in the 'Comment' column into the box regardless of the cell clicked upon in the row.
<table id="table">
<tr>
<th>Name</th>
<th>Age</th>
<th>Comments</th>
</tr>
<tbody>
<tr>
<td>John</td>
<td>42</td>
<td>avery long comment</td>
</tr>
<tr>
<td>Peter</td>
<td>35</td>
<td>another very long comment</td>
</tr>
<tr>
<td>Mary</td>
<td>54</td>
<td>some comment</td>
</tr>
</tbody>
</table>
<script>
var table = document.getElementById('table');
var selected = table.getElementsByClassName('selected');
table.onclick = highlight;
function highlight(e) {
if (selected[0]) selected[0].className = '';
e.target.parentNode.className = 'selected';
var element = document.querySelectorAll('.selected');
if (element[0] !== undefined) { //it must be selected
document.getElementById("myTextbox").value = element[0].children[0].firstChild.data
}
}
</script>
<div >
<textarea class="form-control" id="myTextbox"></textarea>
</div>
Thanks for your help.

You're getting the first column but you can get the third column with the comment by changing the index of the child to 2 instead of 0.
document.getElementById("myTextbox").value = element[0].children[2].firstChild.data

Get table row value based on button click using Jquery/Javascript

I need to get the table row value from onclick event. Below the table, I am using
Group name|Manage group
Test 1 | Button
Test 2 | Button
If I click 'Button' from the table row, I need to get the respective group name value from the table row.
Below the script, I am trying. But it is printing only the first group name value "Test 1" for both buttons.
var table = document.getElementById("user_table");
var rows = table.rows;
for (var i = 1; i < rows.length; i++) {
rows[i].onclick = (function (e) {
var rowid = (this.cells[0].innerHTML);
var j = 0;
var td = e.target;
while( (td = td.previousElementSibling) != null )
j++;
alert(rows[1].cells[j].innerHTML);
});
}
alert(rows[1].cells[j].innerHTML) printing group name value Test 1 and if I click second row button it is showing Test 1 only.But I need to get Test 2 if I click second row button.
Html file
<table id="user_table" style='overflow-x:scroll;overflow-y:scroll;width:100%;height:auto' class="table table-bordered" >
<thead>
<tr class="info">
<th>Group Name</th>
<th>User Group</th>
</tr>
</thead>
<tbody id="table_body">
<br>
<% #array.each do |user| %>
<tr>
<td >
<%=user['group_name']%>
</td>
<td>
<button id='manageusrbtn' name="button" type="button" class="editbtn" onclick="manageUserGroups()" style="background-color: #008CBA; color: white; border-radius: 6px;" >Manage User Groups</button>
</td>
<% end %>
</tr>
</tbody>
</table>

I would suggest to attach the click event handler to the button and not to each cell.
For this you can use:
querySelectorAll
forEach
addEventListener
closest
The snippet:
var table = document.querySelectorAll('#user_table tr button');
table.forEach(function(ele) {
ele.addEventListener('click', function (e) {
var rowid = (this.closest('td').previousElementSibling.innerHTML);
console.log(rowid);
})
});
<table id="user_table">
<tr>
<th>Group name</th>
<th>Manage group</th>
</tr>
<tbody>
<tr>
<td>Test 1</td>
<td><button>Button</button></td>
</tr> <tr>
<td>Test 2</td>
<td><button>Button</button></td>
</tr>
</tbody>
</table>

How can I hide a table until filtered/input entered in search

I'm new to web developing but catching on fairly quickly. I'm developing a wiki page for my company and I have a filter table built but I want to hide the table until the filter function is applied when a user enters their search text. So this way it only shows the text input box and then when they type in their search the table results will THEN show.
I'm using this Javascript for the filtering:
function ContactsearchFX() {
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";
}
}
}
}
on a basic search table with this html code:
<input type="text" id="myInput" onkeyup="ContactsearchFX()" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Number</th>
</tr>
<tr>
<td>contact</td>
<td>number</td>
</tr>
<tr>
<td>contact</td>
<td>number</td>
</tr>
<tr>
<td>contact</td>
<td>number</td>
</tr>
....and so on.

window.onload = function() {
var rows = document.querySelectorAll('tr:not(.header)');
for (var i = 0; i < rows.length; i++) {
rows[i].style.display = 'none';
}
}
function ContactsearchFX() {
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";
}
}
}
var rows = document.querySelectorAll('tr:not(.header)');
if (input.value.length == 0) {
for (var i = 0; i < rows.length; i++) {
rows[i].style.display = 'none';
}
}
}
<input type="text" id="myInput" onkeyup="ContactsearchFX()" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Number</th>
</tr>
<tr>
<td>test 1</td>
<td>number</td>
</tr>
<tr>
<td>test 2</td>
<td>number</td>
</tr>
<tr>
<td>test 3</td>
<td>number</td>
</tr>
This seems to do the trick! On the load of the window, it loops through all the table rows which do now have the class of header. So your header, is always visible.
Then as your code originally did, it goes through the table and filters out the ones that are matching.
After this, I just added in another loop which then sets the rows back to display: none if there is nothing that is in the input box.
Hope this is what you were looking for.

You could give the table default styles that hide it so when it renders, its default state will be hidden.
<input type="text" id="myInput" onkeyup="ContactsearchFX()" placeholder="Search for names..">
<table id="myTable" style="display:none;">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Number</th>
</tr>
<tr>
<td>contact</td>
<td>number</td>
</tr>
<tr>
<td>contact</td>
<td>number</td>
</tr>
<tr>
<td>contact</td>
<td>number</td>
</tr>

I would suggest running the ContactsearchFX function on page load:
document.addEventListener('DOMContentLoaded', ContactsearchFX);
... and requiring that filter is not the empty string in the condition for displaying a row.
This has one particular advantage: some browsers remember the last text that was entered in the input box, and fill that text automatically again on page load. With this solution, the corresponding table rows will be filtered immediately.
For a more responsive effect, I would remove the onkeyup="ContactsearchFX()" HTML attribute, and instead add the following JavaScript:
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('myInput').addEventListener('input', ContactsearchFX);
});
Also consider using the rows and cells collections instead of getElementsByTagName
Probably you want to keep the header row out of the filtering process, and so your loop should start at 1 instead of 0.
document.addEventListener('DOMContentLoaded', function () {
ContactsearchFX();
document.getElementById('myInput').addEventListener('input', ContactsearchFX);
});
function ContactsearchFX() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.rows;
for (i = 1; i < tr.length; i++) {
td = tr[i].cells[0];
if (td) {
tr[i].style.display = filter && td.textContent.toUpperCase().indexOf(filter) > -1
? "" : "none";
}
}
}
<input type="text" id="myInput" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Number</th>
</tr>
<tr>
<td>test 1</td>
<td>number</td>
</tr>
<tr>
<td>test 2</td>
<td>number</td>
</tr>
<tr>
<td>test 3</td>
<td>number</td>
</tr>
</table>

Unable to get data from the second column of a table on clicking of the button in third column

I have a table which has four columns second being a paragraph field , the third being an input field and fourth being a button . What i want is on clicking of the button row the data from the paragraph column should be applied to the input field i.e third row .
Its not possible to select every row using each function as every row is different and theres only few rows like this . How can this be done
I have tried this but it didn't work
var or1 = $("#tab_logic button");
or1.each(function() {
$(this).click(function(){
alert("u");
var u = $(this).parent("tr").find('td:first').html();
alert(u);
});
});

Without knowing the exact HTML, I made this based on your explanation. If I understand correctly, this is what you want to achieve?
$("button").click(function() {
var row = $(this).closest("tr");
var name = row.find("p").html();
var input = row.find("input");
input.val(name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>ID</th>
<th>Name</th>
<th>Input</th>
<th>Button</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td><p>John Doe</p></td>
<td><input type="text" placeholder="Name"/></td>
<td><button type="button">Set name</button></td>
</tr>
<tr>
<td>1</td>
<td><p>Jane Doe</p></td>
<td><input type="text" placeholder="Name"/></td>
<td><button type="button">Set name</button></td>
</tr>
</tbody>
</table>

Another solution would be
var or1 = $("#tab_logic button");
or1.each(function() {
$(this).click(function() {
var text = $(this).closest('tr').children('td:eq(1)').children().first().html();
$(this).closest('tr').children('td:eq(2)').children().first().val(text);
});
});
#tab_logic td{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tab_logic">
<tr>
<td>one</td>
<td><p>I'm just a paragraph</p></td>
<td><input type="text"/></td>
<td><button>button</button></td>
</tr>
<tr>
<td>two</td>
<td><p>I'm just another paragraph</p></td>
<td><input type="text"/></td>
<td><button>button</button></td>
</tr>
</table>