Create a search bar to search value from table in HTML - html

I am trying to create a search bar to search values from tables.
Below is my html table code. But I don't know how to create a search bar in html to search values. Please see picture what I am trying to achieve. Thank you
<!DOCTYPE html>
<html>
<body>
<h1>Customer Data</h1>
<table border="1">
<tr>
<th>Customer ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Phone</th>
<th>Email</th>
<th>Address</th>
<th>Zip</th>
<th>Date of Birth</th>
</tr>
<tr>
<td>C1121</td>
<td>James</td>
<td>Bill</d>
<td> Male </td>
<td>123456789</td>
<td>J#gmail.com</td>
<td></td>
<td> </td>
<td>09/02/1999</td>
</tr>
<tr>
<td>C54</td>
<td>Sarah</td>
<td>Sean</d>
<td> Female </td>
<td></td>
<td></td>
<td>abc street</td>
<td>00000</td>
<td>01/26/1992</td>
</tr>
</table>
</body>
</html>

You will need to use JavaScript to add filtering functionality via your search input. Unfortunately, there is no way to do what you want via HTML alone.
Here is a great link that details how to created a Filter/Search for HTML elements with some straightforward JavaScript and no additional libraries. It seems to be exactly what you are looking for, though you will have to make some slight changes since you are wanting to filter table elements, and your rows are not associated with each other, which will make your solution more complex. But it's a good place to start.

Related

Making a table responsive using CSS

I have a table to represent some data in html page.I'm trying to make this table as responsive by CSS.
<table>
<tr>
<thead>
<th>Name</th>
<th>Age</th>
<th>Tell</th>
</thead>
<tbody>
<tr>
<td>Maya</td>
<td>22</td>
<td>2222555666</td>
</tr>
</tbody>
</tr>
</table>
I used to to do that by this way:
table thead {display:none}
table tr, table td{display:block}
table td:nth-of-type(1)::before {content: "Name";}
There is a problem, this way can be helpful when I know there are how many <td></td> and what the content of <th></th> is , but in this case I do not know the number of <td></td> and also the content of <th></th>?
What can I do?

Text size is really big in one column of a table, really small in the others

My webpage does not have any css or text formatting, but the column text is coming out really huge, and in the worst place, too.
<table border="1">
<tr>
<th>Clinical Trials ID</th>
<th>Official Title</th>
<th>Contact Name</th>
<th>Affiliation</th>
<th>Phone</th>
<th>email</th>
</tr>
<tr>
<td>NCT01951326</td>
<td>A Randomized, Double Blind, Placebo-controlled, Multicenter, Parallel Group Study to Assess the Efficacy and Safety of Fixed-dose Combination RHB-104 in Subjects With Moderately to Severely Active Crohn's Disease</td>
<td> Ira N Kalfus, MD</td>
<td>RedHill Biopharma</td>
<td> </td>
<td></td>
</tr>
</table>
I can't post screenshots because I don't have enough rep
Thanks for your help
I have probably got your error.
Your code seems to be missing a meta tag. Add this to your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And you'll be good to go.
Hope it helps. Cheers!!
Set a width for your td otherwise it will take all the space it gets free to take.
<table border="1">
<tr>
<th>Clinical Trials ID</th>
<th>Official Title</th>
<th>Contact Name</th>
<th>Affiliation</th>
<th>Phone</th>
<th>email</th>
</tr>
<tr>
<td>NCT01951326</td>
<td width="40%">A Randomized, Double Blind, Placebo-controlled, Multicenter, Parallel Group Study to Assess the Efficacy and Safety of Fixed-dose Combination RHB-104 in Subjects With Moderately to Severely Active Crohn's Disease</td>
<td> Ira N Kalfus, MD</td>
<td>RedHill Biopharma</td>
<td> </td>
<td></td>
</tr>
</table>
A little bit of CSS can fix this problem. The calc function might be especially useful:
th{
width: calc(100%/6);
}
<table border="1">
<tr>
<th>Clinical Trials ID</th>
<th>Official Title</th>
<th>Contact Name</th>
<th>Affiliation</th>
<th>Phone</th>
<th>email</th>
</tr>
<tr>
<td>NCT01951326</td>
<td>A Randomized, Double Blind, Placebo-controlled, Multicenter, Parallel Group Study to Assess the Efficacy and Safety of Fixed-dose Combination RHB-104 in Subjects With Moderately to Severely Active Crohn's Disease</td>
<td> Ira N Kalfus, MD</td>
<td>RedHill Biopharma</td>
<td> </td>
<td></td>
</tr>
</table>

Adding flags into tables dynamically

I was wondering if it is possible to add flags to the table dynamically. The countries listed below are just for examples but I want them to come out of a list and it should add the country flags dynamically next to a 3 char country code.
<table>
<thead>
<tr>
<th>Flag</th>
<th>Country</th>
</thead>
<tbody>
<tr>
<td></td>
<td>USA</td>
</tr>
<tr>
<td></td>
<td>GER</td>
</tr>
<tr>
<td></td>
<td>CHI</td>
</tr>
</tbody>
</table>
If it is possible, can someone help me, point me in a direction from which I can find a solution to this?

Why do VoiceOver speaks out the first col of a html table-header?

Good evening clever people,
I have a html table with the following structure:
<thead>
<tr>
<th>title</th>
<th>title1</th>
<th>title2</th>
</tr>
</thead>
<tbody>
<tr>
<td>hello</td>
<td>hello1</td>
<td>hello2</td>
</tr>
</tbody>
When I try VoiceOver on this table in a WebView i become a strange result. If if click on the title2 column VoiceOver speaks out "title" and "title2". I don't know why but it reads out the first col of the header row too.
Can i avoid this?
Thank you & have a nice Day!

HTML Tables - can I have an additional tbody before the thead?

I need add to some elements on top of a table in line with the columns of the said table.
This table contains a <thead> (which is required due to jquery.tablesorter plugin). I assumed that if I put another <tbody> on top of the <thead> I would be able to keep these elements in line with the rest of the columns, but both chrome and firefox render every <tbody> below the <thead>.
Example:
<table>
<tbody>
<tr>
<td>1</td><td>1</td><td>1</td>
</tr>
</tbody>
<thead>
<tr>
<th>head</th><th>head</th><th>head</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td><td>2</td><td>2</td>
</tr>
<tr>
<td>3</td><td>3</td><td>3</td>
</tr>
<tr>
<td>4</td><td>4</td><td>4</td>
</tr>
</tbody>
</table>
Although I understand this, I still need to find a way to have these elements stay in line with specific columns.
You can use multiple rows in <thead> like this:-
<table>
<thead>
<tr> <td>1</td> <td>1</td> </tr>
<tr> <td>head</td> <td>head</td> </tr>
</thead>
</table>
I recommend that you use an id (#) marker to identify that part that you want the js to work off and have the js use that id.
With that, have the thead first and the tbody last.
The variations you are describing may work - in the browser you using now, on the OS you are ok - and may be compliant a certain version of the HTML spec- but putting things in an unusual order is (in my expereince) just the kind of thing to not work, or work the same, everywhere and to eventually be the cause of much frustration, especially as the site grows in complexity.
One solution is to use another table inside one tr, in your thead. Althought, this is a totally ugly solution.
You can also place a div above your table using CSS.
Correct table structure is:
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
<thead> will always be on the top and <tfoot> will always be at the bottom.
Using jQuery you can swap <thead> and <tbody> content by:
$(document).ready(function() {
$('#myTrigger').click(function() {
var top = $('thead').html();
var mid = $('tbody').html();
$('thead').html(mid);
$('tbody').html(top);
});
});