I have a simple html page with a html table. I have complied the codes to show real time search result in the table format. I am just wondering if it is possible to show the table data in separate boxes? Like forms? I have 11 columns in My html table and few of them has very long data so text wrapping looks ugly.
Please guide me how can the data be filtered and displayed in scrollable boxes instead of normal table.
here is my code.
function myFunction1() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput1");
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";
}
}
}
}
function myFunction2() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput2");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
* {
box-sizing: border-box;
}
#myTable tbody {
height: 600px;
display: inline-block;
width: 100%;
overflow: auto;
}
#myInput1 {
background-image: url("res/searchicon.png");
background-position: 10px 10px;
background-repeat: no-repeat;
width: 26%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myInput2 {
background-image: url("res/searchicon.png");
background-position: 10px 10px;
background-repeat: no-repeat;
width: 26%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font: 15px arial, sans-serif;
}
tr:nth-child(even) {
background-color: #eff1f4;
}
#myTable th, #myTable td {
table-layout: fixed;
text-align: left;
padding: 10px;
width: 100%;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #DEC4BC;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="res/eGo.png" style="width:250px;height:150px;">
<h2><font face="Arial" color="#c11919">eGO Web</font></h2>
<input type="text" id="myInput1" onkeyup="myFunction1()" placeholder="Search for customer names" title="Type in a customer name">
<input type="text" id="myInput2" onkeyup="myFunction2()" placeholder="Search for Customer Number" title="Type in a Customer Number">
<br>
<font size="2"face="Arial" color="#c11919">last updated on - July 2019</font>
<br>
<br>
<table id="myTable" style="display:visible;">
<tr class="header">
<th style="width:10%; ">Customer Name</th>
<th style="width:10%;">Account Number</th>
<th style="width:10%;">Collector Name</th>
<th style="width:10%;">Statement Email</th>
<th style="width:10%;">Customer Contacts</th>
<th style="width:10%;">Internal Contacts</th>
<th style="width:10%;">3rd Party Payments</th>
<th style="width:10%;">Remarks/ Customer Profile</th>
<th style="width:10%;">Historical Activities</th>
<th style="width:10%;">Portal/ Invoicing Method</th>
<th style="width:10%;">Statement Required</th>
</tr>
<--! Here is table data -->
</table>
<br>
<font size="1"face="Arial" color="#c11919">To report issues Click Here or send email to pratik.kumar#company.com</font>
</body>
</html>
Writing as an answer as not allowed to comment yet. You could set the following styles:
tr,td {
overflow: auto;
}
This will allow scrolling in cells of table when texts overflow or are more than specified size of boxes.
More on overflow here: https://www.w3schools.com/cssref/pr_pos_overflow.asp
Yes, table cells can contain another elements, and you can insert div with limited dimensions into and set overflows for scrolling. For example:
<table>
<tr>
<td>One cell</td>
<td>second cell
<div style="width: 100px; height: 100px; overflow: auto">
very long text goex here and scroll bar will appear
very long text goex here and scroll bar will appear
very long text goex here and scroll bar will appearvery long text goex here and scroll bar will appear
very long text goex here and scroll bar will appear
</div>
</td>
<td>Third cell</td>
</tr>
</table>
Related
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#mylist {
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>dish filter</h2>
<select id="mylist" onchange="myFunction()" class='form-control'>
<option value="">ALL</option>
<option value="fish">fish</option>
<option value="chicken">chicken</option>
</select>
<h2>receiver filter</h2>
<select id="mylist1" onchange="namefilter()" class='form-control'>
<option value="">ALL</option>
<option value="receiver1">receiver1</option>
<option value="receiver2">receiver2</option>
<option value="receiver3">receiver3</option>
</select>
<table id="myTable">
<tr class="header">
<th style="width:60%;">receiver</th>
<th style="width:40%;">dish</th>
</tr>
<tr>
<td>receiver1</td>
<td>fish</td>
</tr>
<tr>
<td>receiver1</td>
<td>fish</td>
</tr>
<tr>
<td>receiver2</td>
<td>chicken</td>
</tr>
<tr>
<td>receiver2</td>
<td>chicken</td>
</tr>
<tr>
<td>receiver3</td>
<td>fish</td>
</tr>
<tr>
<td>receiver3</td>
<td>chicken</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("mylist");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
if (td.innerHTML.toUpperCase() === filter) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
function namefilter() {
var input, filter, table, tr, td, i;
input = document.getElementById("mylist1");
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() === filter) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
Description
In the above program I have been trying to filter with multiple dropdown but after i select fish from dish filter it showing receiver1,reciver2 in name filter column but if i select receiver3 in receiver filter it showing receiver 3 I only need to filter what's displaying row instead of invisible rows
In short i need to use multiple filters to filter html table
I need some help! I use flask to create a website with data table, I tried many different methods but I don't manage to fix the table head and when I search the table head collapsed also. How can I solve it in my code please?
my table
HTML:
<div>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Country">
</div>
<table id="myTable">
<thead>
<tr>
<th>Country</th>
<th>Total Cases</th>
<th>Today Cases</th>
<th>Total Deaths</td>
<th>Today Deaths</th>
<td>Total Recovered</td>
<td>Active</td>
<td>Critical</td>
<td>Cases Per One Million</td>
<td>Deaths Per One Million</td>
<td>Total Tests</td>
<td>Tests Per One Million</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
CSS:
#myTable {
border-collapse: collapse;
/* Collapse borders */
width: 100%;
/* Full-width */
border: 1px solid #ddd;
/* Add a grey border */
font-size: 18px;
/* Increase font-size */
}
#myTable th,
#myTable td {
text-align: left;
/* Left-align text */
padding: 12px;
/* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
JavaScript:
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
I'm using a responsive table style that will collapse for smaller screen sizes and display the table header before each cell.
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
color: red;
background-color:#000;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
table td:first-child{
color:white;
background: #000;
}
}
<table>
<caption>Statement Summary</caption>
<thead>
<tr>
<th scope="col">Account</th>
<th scope="col">Estimated arrival date</th>
<th scope="col">Amount</th>
<th scope="col">Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Account">Visa - 3412</td>
<td data-label="Really freaking long div magic">04/01/2016</td>
<td data-label="Amount">$1,190</td>
<td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Visa - 6076</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$2,443</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
</tr>
<tr>
<td scope="row" data-label="Account">Corporate AMEX</td>
<td data-label="Due Date">03/01/2016</td>
<td data-label="Amount">$1,181</td>
<td data-label="Period">02/01/2016 - 02/29/2016</td>
</tr>
</tbody>
</table>
The column header is represented using the data-label attribute on each corresponding table cell. In the CSS, it's called with content: attr(data-label). I'm applying this style to some pretty large tables and I don't want to have to write the data-label for every single cell in the HTML. Is there a way to pull the th into the data-label attribute using Javascript?
Do you want the table to go from this:
| Account | Estimated arrival date | Amount | Period |
| ------- | ---------------------- | ------ | ------ |
| 1234 | 03/15/2001 | $1.00 | 3rd |
| 1235 | 04/21/2002 | $12.00 | 4th |
| 4594 | 11/11/2011 | $45.00 | 2nd |
To this?:
-----------
Account: 1234
Estimated Arrival Date: 03/15/2001
Amount: $1.00
Period: 3rd
-----------
Account: 1235
Estimated Arrival Date: 04/21/2002
Amount: $12.00
Period: 4th
-----------
Account: 4594
Estimated Arrival Date: 11/11/2011
Amount: $45.00
Period: 2nd
-----------
UPDATE
Try this code:
function toggle() {
var table = document.querySelector('.my-table');
table.classList.toggle('show-thin');
}
.table {
border-collapse: collapse;
display: inline-table;
}
.tr {
display: table-row;
}
.th, .td {
display: table-cell;
border: 1px solid #555;
padding: 3px 6px;
}
.th {
background-color: #ddd;
font-weight: bold;
text-align: center;
}
.td {
text-align: right;
}
.my-table.show-thin {
display: block;
}
.show-thin .tr {
border-bottom: 1px solid black;
display: block;
margin-bottom: 2px;
padding-bottom: 2px;
}
.show-thin .td {
border: none;
display: block;
padding: 0;
text-align: left;
}
.show-thin .td:before {
content: attr(title) ':';
display: inline-block;
font-weight: bold;
padding-right: 5px;
}
.show-thin .thin-hide {
display: none;
}
<button onclick="toggle()">Toggle</button>
<hr/>
<div class="my-table">
<div class="tr thin-hide">
<span class="th">Account</span>
<span class="th">Estimated arrival date</span>
<span class="th">Amount</span>
<span class="th">Period</span>
</div>
<div class="tr">
<span class="td" title="Account">1234</span>
<span class="td" title="Estimated Arrival Date">03/15/2001</span>
<span class="td" title="Amount">$1.00</span>
<span class="td" title="Period">3rd</span>
</div>
<div class="tr">
<span class="td" title="Account">1235</span>
<span class="td" title="Estimated Arrival Date">04/21/2002</span>
<span class="td" title="Amount">$12.00</span>
<span class="td" title="Period">4th</span>
</div>
<div class="tr">
<span class="td" title="Account">4594</span>
<span class="td" title="Estimated Arrival Date">11/11/2011</span>
<span class="td" title="Amount">$45.50</span>
<span class="td" title="Period">2nd</span>
</div>
</div>
My example used a class to change the values from a tabular format to a lined format. But it can be done using a media query as well. This was just easier to demo.
The trick is in placing the title attribute on every cell. Then using CSS to show the title when in thin mode.
This shows what the table looks like in wide mode
And this shows what it is like in thin mode
When you look at the two images you will see that the standard table format uses the term "Estimated arrival date" with on the first work capitalized. The thin version uses "Estimated Arrival Date" with all words capitalized. This is to show that the values come from different places.
In the wide mode the header comes from here:
<div class="tr thin-hide">
<span class="th">Account</span>
<span class="th">Estimated arrival date</span>
<span class="th">Amount</span>
<span class="th">Period</span>
</div>
And in thin mode it comes from the title attribute.
This does not work if you try to use <table>, <tr>, <th> and <td> tags.
This small code jQuery copy attr "data-label" TH to TD
$('table th').each(function(i,elem) {
var num = i + 1;
$('table td:nth-child(' + num + ')').attr('data-label', $(elem).text());
});
My solution with jQuery, seems to work (optional: I skip over any table cells with colspans):
$('.myDiv table').each(function (index, value) {
var headerCount = $(this).find('thead th').length;
for (i = 0; i <= headerCount; i++) {
var headerLabel = $(this).find('thead th:nth-child(' + i + ')').text();
$(this).find('tr td:not([colspan]):nth-child(' + i + ')').replaceWith(
function () {
return $('<td data-label="' + headerLabel + '">').append($(this).contents());
}
);
}
});
function searchFunction(){
let tabel, filter, input, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
tabel = document.getElementById("myTable");
tr = document.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";
}
}
}
}
.search_input {
background-image: url(search_icon.png);
background-position: 3px 9px;
background-repeat: no-repeat;
background-size: 12px 12px;
width: 15%;
height: 31px;
padding: 12px 8px 9px 26px;
border: 1px solid #ddd;
margin: 12px 0 12px 0;
border-radius: 7px;
}
.my_tabel {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 13px;
}
.my_tabel th, .my_tabel td {
text-align: left;
padding: 12px;
}
.my_tabeltr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
table, .line{
border: 1px solid;
}
thead
{
background-color: #93B6D2;
}
<!DOCTYPE html>
<html>
<head>
<title>Assingment 3</title>
<link rel="stylesheet" href="js-assingment.css" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="js_module.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form name="searching_tabel" id="searching_tabel">
<div class="container">
<span>Search</span>
<input type="text" id="myInput" onkeyup="searchFunction()" class="search_input">
<table class="table table-bordered my_tabel" id="myTable">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Date</th>
<th>Courses</th>
<th>UserGuid</th>
<th>License</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark Scheid</td>
<td>mscgei#wgu.edu</td>
<td>06-jan-15</td>
<td>PK0-003-Project+</td>
<td>03ocb</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Kenneth Nagle</td>
<td>knagle#wgu.edu</td>
<td>06-jan-15</td>
<td>N10-005 CompTIA Network+</td>
<td>02Oki</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Kenneth</td>
<td>matt.bearce#verizonwireless.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-802(Course & Lab)</td>
<td>030c8</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Rafael Moreno</td>
<td>rmoren4#wgu.edu</td>
<td>06-jan-15</td>
<td>N10-005 CompTIA Network+</td>
<td>030c7</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Paul Doyle</td>
<td>doylepaul#gmail.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-801(Course & Lab)</td>
<td>030c6</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Paul Doyle</td>
<td>esmally#gmail.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-801(Course & Lab)</td>
<td>030bb</td>
<td>Course</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
I created a search/filter in html table. When I write a related alphabet in search input, it searches and shows information. But when I write a numbers in my search, no result are found.
As others mention you can use Jquery Datatable which offers a lot of in-built functionalities.
But if you still want to use pure javascript then use the below function to search through all the columns.
function searchFunction() {
let tabel, filter, input, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
tabel = document.getElementById("myTable");
tr = document.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
if (tr[i].textContent.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
Also add onsubmit="return false;" to the form tag, so that the page doesn't reload when enter is pressed.
I may mess up a bit with explaining the problem.
I have a table, if I press my table column name, it will expand and show the input and also a button. The problem begins with showing all the buttons in each column in the beginning of the page, also buttons appear closing/opening while expanding.
What I would like to do, is instead of showing all the buttons in each column, I want to display only one button in the column that got expanded (clicked) and also in one row.
$(document).ready(
function() {
$('th input').slideUp();
$('th a').click(
function() {
var clicks = $(this).data('clicks');
if (clicks) {
$(this).closest(".butt").hide();
} else {
$(this).closest(".butt").show();
}
$(this).data("clicks", !clicks);
$(this).closest('th').find('input').slideToggle();
}
);
}
);
button {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: rgba(1, 1, 1, 0.1);
height: 30px;
width: 70px;
}
table {
display: block;
width: 400px;
font-family: Helvetica, Arial, sans-serif;
border-spacing: 0;
max-height: 400px;
overflow: auto;
}
.naitamine2 table {
position: fixed;
width: 700px;
height: ;
font-family: Helvetica, Arial, sans-serif;
border-spacing: 0;
overflow: auto;
}
#table table {
position: fixed;
width: 500px;
font-family: Helvetica, Arial, sans-serif;
border-spacing: 0;
}
tr,
th {
border: 1px solid #CCC;
background-color: white;
}
th {
background: #F3F3F3;
font-weight: bold;
}
tr:nth-child(even) th {
background: #4DAF7C;
}
tr:nth-child(odd) th {
background: #FFA400;
}
tr th:hover {
background: #666;
color: #FFF;
}
.butt {
margin-left: 5px;
margin-top: -10px;
height: 10px;
}
table.scroll {
width: 100%;
/* Optional */
/* border-collapse: collapse; */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td,
thead th {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="scroll">
<thead>
<tr>
<th>Name</th>
<th>Product</th>
<th>Price</th>
<th>Avaible</th>
</tr>
</thead>
<tbody class='av'>
<tr>
<form method='POST'>
<input type='hidden' name='id' value='$id'></input>
<th><a>Nimi</a>
<input name='namem' placeholder='Name'>
<button type='submit' name='button' class='butt' value='+'></button>
</input>
</th>
<th><a>JUra</a>
<input name='productm' placeholder='Product'></input>
</th>
<th><a>Asi</a>
<input name='pricem' type='number' step='1.00' placeholder='Price'></input>
</th>
<th><a>Ei</a>
<input name='avaiblem' placeholder='Avaible'></input>
</th>
</form>
</tr>
</tbody>
<tbody class='av'>
<tr>
<form method='POST'>
<input type='hidden' name='id' value='$id'></input>
<th><a>Nimi</a>
<input name='namem' placeholder='Name'>
<button type='submit' name='button' class='butt' value='+'></button>
</input>
</th>
<th><a>JUra</a>
<input name='productm' placeholder='Product'></input>
</th>
<th><a>Asi</a>
<input name='pricem' type='number' step='1.00' placeholder='Price'></input>
</th>
<th><a>Ei</a>
<input name='avaiblem' placeholder='Avaible'></input>
</th>
</form>
</tr>
</tbody>
<tbody class='av'>
<tr>
<form method='POST'>
<input type='hidden' name='id' value='$id'></input>
<th><a>Nimi</a>
<input name='namem' placeholder='Name'>
<button type='submit' name='button' class='butt' value='+'></button>
</input>
</th>
<th><a>JUra</a>
<input name='productm' placeholder='Product'></input>
</th>
<th><a>Asi</a>
<input name='pricem' type='number' step='1.00' placeholder='Price'></input>
</th>
<th><a>Ei</a>
<input name='avaiblem' placeholder='Avaible'></input>
</th>
</form>
</tr>
</tbody>
<table>
$(document).ready( function() {
$('th input').slideUp();
$('th a').click( function() {
$('th input').slideUp();
var clicks = $(this).data('clicks');
if (clicks) {
$(this).closest(".butt").hide();
} else {
$(this).closest(".butt").show();
}
$(this).data("clicks", !clicks);
$(this).closest('th').find('input').slideToggle();
});
});
Not sure if i got your requirement right. But this would show only one button for the column you clicked. Right?
That did not fix my problem, It still shows all the buttons in each column. And also, slide up in click function is soo wrong, because I cant hide my input when I press the column cell again.
I also changed all the table header cells to standard cells.