Hide/show some part of a table cell jquery - javascript

I have a table as follows:
A header
Another header
First (some-text-initially-hidden) click
row
which on "click" becomes
A header
Another header
First (some-text-should-be visible now) click
row
on "click" the text "some-text-initially-hidden" is not getting displayed after "click", i want to show and hide the text on "click"
I have a working table as seen here:jsfiddle
Code:
HTML:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="font-size: 13px;">
<th> header1</th>
<th> header2 </th>
<tbody>
<tr class="test">
<td>data-always-visible
<span class="complete">some-data-to hide and show</span>
<br>
<i class="fa fa-chevron-down" style="font-size: 9px;">Click for more details of </i>
</td>
<td> some data...</td>
</tr>
</tbody>
</table>
CSS:
.test~ .test2{
display: none;
}
.open .test~ .test2{
display: table-row;
}
.test {
cursor: pointer;
}
.complete{
display:none;
}
JS/JQuery:
$('table').on('click', 'tr.test .fa-chevron-down', function() {
$(this).closest('tbody').toggleClass('open');
$(this).closest('complete').show();
});
Thank you in advance.


You using wrong selector, it should be .complete and should use siblings instead of closest.
$(this).siblings('.complete').show();
https://jsfiddle.net/viethien/dbc349gm/6/
I updated code to show/hide your div
if(!$(this).siblings('.complete').is(":visible")){
$(this).siblings('.complete').show();
}else{
$(this).siblings('.complete').hide();
}


span.complete is a sibling of i.fa-chevron-down. $.closest only searches the supplied elements themselves and their ancestors.
You can use $.siblings instead.
$('table').on('click', 'tr.test .fa-chevron-down', function() {
$(this).closest('tbody').toggleClass('open');
$(this).siblings('.complete').show();
});
.test~ .test2{
display: none;
}
.open .test~ .test2{
display: table-row;
}
.test {
cursor: pointer;
}
.complete{
display:none;
}
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="font-size: 13px;">
<th> header1</th>
<th> header2 </th>
<tbody>
<tr class="test">
<td>data-always-visible
<span class="complete">some-data-to hide and show</span>
<br>
<i class="fa fa-chevron-down" style="font-size: 9px;">Click for more details of </i>
</td>
<td> some data...</td>
</tr>
<tr class="test2">
<td>data-always-visible</td>
<td> some data...</td>
</tr>
<tr class="test2">
<td>data-always-visible</td>
<td> some data...</td>
</tr>
</tbody>
</table>

Related

Creating Interactive Table - HTML, CSS, JavaScript

My goal is to have my table interactive, and all code within one doc. I don't want to reference JavaScript or CSS outside of the main document, and this may be where my issue is coming from.
It seems like JavaScript isn't working when the buttons are clicked, and I'm not sure what's going on.
Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>
<script>
$(function(){
var TABLE = $("table");
$(".table-add").click(function() {
console.log('adding');
var clone = TABLE
.find("tr.hide")
.clone(true)
.removeClass("hide table-line");
TABLE.append(clone);
});
$(".table-remove").click(function() {
$(this)
.parents("tr")
.detach();
});
$(".table-up").click(function() {
var $row = $(this).parents("tr");
if ($row.index() === 1) return;
$row.prev().before($row.get(0));
});
$(".table-down").click(function() {
var $row = $(this).parents("tr");
$row.next().after($row.get(0));
});
})
</script>
<style>
#import "compass/css3";
.table-editable {
position: relative;
.glyphicon {
font-size: 20px;
}
}
.table-remove {
color: #700;
cursor: pointer;
}
.table-up, .table-down {
color: #007;
cursor: pointer;
}
.table-add {
color: #070;
cursor: pointer;
position: absolute;
top: 8px;
right: 0;
}
</style>
<body>
<div class="container">
<h1>HTML5 Editable Table</h1>
<div id="table" class="table-editable">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table">
<tr>
<th>Outcomes</th>
<th>Implementation/Sensors</th>
<th>Alert Type</th>
<th>Responder/Contact Info</th>
</tr>
<tr>
<td contenteditable="true">Outcome</td>
<td contenteditable="true">Sensor</td>
<td contenteditable="true">Alert</td>
<td contenteditable="true">Contact</td>
<td>
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<!-- This is our clonable table line -->
<tr class="hide">
<td contenteditable="true">Outcome</td>
<td contenteditable="true">Sensor</td>
<td contenteditable="true">Alert</td>
<td contenteditable="true">Contact</td>
<td>
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
</table>
</div>
</div>
</body>

Needed to add a function to the tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"/>
<script>
$(function(){
var TABLE = $("table");
$(".table-add").click(function() {
console.log('adding');
var clone = TABLE
.find("tr.hide")
.clone(true)
.removeClass("hide table-line");
TABLE.append(clone);
});
$(".table-remove").click(function() {
$(this)
.parents("tr")
.detach();
});
$(".table-up").click(function() {
var $row = $(this).parents("tr");
if ($row.index() === 1) return;
$row.prev().before($row.get(0));
});
$(".table-down").click(function() {
var $row = $(this).parents("tr");
$row.next().after($row.get(0));
});
})
</script>
<style>
#import "compass/css3";
.table-editable {
position: relative;
.glyphicon {
font-size: 20px;
}
}
.table-remove {
color: #700;
cursor: pointer;
}
.table-up, .table-down {
color: #007;
cursor: pointer;
}
.table-add {
color: #070;
cursor: pointer;
position: absolute;
top: 8px;
right: 0;
}
</style>
<body>
<div class="container">
<h1>HTML5 Editable Table</h1>
<div id="table" class="table-editable">
<span class="table-add glyphicon glyphicon-plus"></span>
<table class="table">
<tr>
<th>Outcomes</th>
<th>Implementation/Sensors</th>
<th>Alert Type</th>
<th>Responder/Contact Info</th>
</tr>
<tr>
<td contenteditable="true">Outcome</td>
<td contenteditable="true">Sensor</td>
<td contenteditable="true">Alert</td>
<td contenteditable="true">Contact</td>
<td>
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
<!-- This is our clonable table line -->
<tr class="hide">
<td contenteditable="true">Outcome</td>
<td contenteditable="true">Sensor</td>
<td contenteditable="true">Alert</td>
<td contenteditable="true">Contact</td>
<td>
<span class="table-remove glyphicon glyphicon-remove"></span>
</td>
<td>
<span class="table-up glyphicon glyphicon-arrow-up"></span>
<span class="table-down glyphicon glyphicon-arrow-down"></span>
</td>
</tr>
</table>
</div>
</div>
</body>

How do I make whole table clickable and add color on click?

I have a table which is collapsible on click of a right angle caret >, so I want the collapse clickable action on the row instead of the angle only.
Secondly, I want the table color to be changed to #E1E2E2 on that same click.
The table is made using Bootstrap classes.
I need some desperate help. Can someone help here, please?
$(document).on("click",".option-tab",function(){
if($(this).children().hasClass("fa-angle-right")){
$(this).children().removeClass("fa-angle-right");
$(this).children().addClass("fa-angle-down");
}
else
{
$(this).children().removeClass("fa-angle-down");
$(this).children().addClass("fa-angle-right");
}
});
.table td,
.table th {
padding-left: 1.75rem;
}
.table-header {
background-color: #28283e;
color: #f9f9f9;
}
.accounts-table:hover{
background-color: #fafafa;
}
a.right-angle {
color: orange;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<table class="table">
<!-- Table Headings -->
<thead class="table-header">
<tr>
<th scope="col"></th>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
<th scope="col">Last Login</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<!-- Table Row 1 -->
<tr class="accounts-table">
<td>
<i class="fas fa-angle-right"></i>
</td>
<td>[0708]</td>
<td>Mark Jonas</td>
<td>Guest</td>
<td class="success">Active</td>
<td>22/11/2018</td>
<td><i class="fas fa-desktop"></i></td>
</tr>
<!-- Table Row 1 Collapse -->
<tr>
<td class="insert-here coll-bg" colspan="8">
<div class="collapse" id="AccountDetails">
<p>Hello World</p>
</div>
</td>
</tr>
<!-- Table Row 2 -->
<tr class="accounts-table">
<td><i class="fas fa-angle-right"></i></td>
<td>[2589]</td>
<td>John Smith</td>
<td>Guest</td>
<td class="danger">Disabled</td>
<td>N/A</td>
<td><i class="fas fa-desktop"></i></td>
</tr>
<!-- Table Row 3 -->
<tr class="solid-rows">
<td><i class="fas fa-angle-right"></i></td>
<td>[9147]</td>
<td>Murray Loius</td>
<td>Guest + Host</td>
<td class="warning">Pending Email</td>
<td>N/A</td>
<td><i class="fas fa-desktop"></i></td>
</tr>
</tbody><!-- END OF TABLE BODY -->
</table><!-- END OF TABLE -->

I want the collapse clickable action on the complete table instead of the angle only...
Secondly, I want the row color to be changed to #E1E2E2
Move data-toggle="collapse" data-target="#AccountDetails" from the anchor wrapping the angle icon to the tr... So the tr will toggle the hidden row using Bootstrap built-in feature. No need for additional code to do this.
But, you need some code to toggle the angle between right and down... And change the row color. See the snippet below.
// Whole table click handler
$(document).on("click", ".accounts-table", function(e) {
// Find this row angle
var angle = $(this).find(".option-tab i");
// Find all other angles
var other_angles = $(".option-tab i").not(angle);
// Reset all rows color to white
$(".accounts-table").css({"background-color":"white"});
// Set the "active" color on this row
$(this).css({"background-color": (angle.hasClass("fa-angle-right") ? "#E1E2E2" :"white") });
// Reset all other angles to right
other_angles.removeClass("fa-angle-down").addClass("fa-angle-right");
// Toggle this angle
angle.toggleClass("fa-angle-right fa-angle-down");
});
.table td,
.table th {
padding: 0 0.5rem 0 1.25rem !important; /* Changed the padding here */
}
.table-header {
background-color: #28283e;
color: #f9f9f9;
}
.accounts-table:hover {
background-color: #fafafa;
}
a.right-angle {
color: orange;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<table class="table">
<!-- Table Headings -->
<thead class="table-header">
<tr>
<th scope="col"></th>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
<th scope="col">Last Login</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<!-- Table Row 1 -->
<tr class="accounts-table" data-toggle="collapse" data-target="#AccountDetails1, .collapse.show">
<td>
</i>
</td>
<td>[0708]</td>
<td>Mark Jonas</td>
<td>Guest</td>
<td class="success">Active</td>
<td>22/11/2018</td>
<td><i class="fas fa-desktop"></i></td>
</tr>
<!-- Table Row 1 Collapse -->
<tr>
<td class="insert-here coll-bg" colspan="8">
<div class="collapse" id="AccountDetails1">
<p>Hello World</p>
</div>
</td>
</tr>
<!-- Table Row 2 -->
<tr class="accounts-table" data-toggle="collapse" data-target="#AccountDetails2, .collapse.show">
<td></i></td>
<td>[2589]</td>
<td>John Smith</td>
<td>Guest</td>
<td class="danger">Disabled</td>
<td>N/A</td>
<td><i class="fas fa-desktop"></i></td>
</tr>
<!-- Table Row 2 Collapse -->
<tr>
<td class="insert-here coll-bg" colspan="8">
<div class="collapse" id="AccountDetails2">
<p>Hello World</p>
</div>
</td>
</tr>
<!-- Table Row 3 -->
<tr class="accounts-table" data-toggle="collapse" data-target="#AccountDetails3, .collapse.show">
<td></i></td>
<td>[9147]</td>
<td>Murray Loius</td>
<td>Guest + Host</td>
<td class="warning">Pending Email</td>
<td>N/A</td>
<td><i class="fas fa-desktop"></i></td>
</tr>
<!-- Table Row 3 Collapse -->
<tr>
<td class="insert-here coll-bg" colspan="8">
<div class="collapse" id="AccountDetails3">
<p>Hello World</p>
</div>
</td>
</tr>
</tbody>
<!-- END OF TABLE BODY -->
</table>
<!-- END OF TABLE -->
EDIT
I added .collapse.show to the data-target attributes... So it will toggle (close) any shown collapsible row... That's the trick!
I removed the color toggling... So it leaves the color grey on close.
I also touched the CSS rule regarding the rows padding... It think it's cuter that way... But it only is a suggestion. ;)
Make sure to use unique id for the target to toggle.

One simple change will do the trick - but then you will also need a bit of jQuery to animate the icon, since you didn't click on it.
The magic of Bootstrap is that it matches-up the HTML attributes: data-toggle="collapse" and data-target="#AccountDetails" with the element that has those class/id values.
So, it matches this:
data-toggle="collapse" data-target="#AccountDetails"
With this:
<div class="collapse" id="AccountDetails">
All you need to do is to add data-toggle="collapse" data-target="#AccountDetails" to the <tr> element that you want to toggle collapse of the #AccountDetails div.
Since having those attributes on the <a> tag that contains the golden chevron is unnecessary now, I removed the attributes from that tag. However, it still works if you leave them there - but they are no longer needed as you can see.
To animate the > chevron to/from a down-arrow when the row (<TR>) is clicked, you can add this bit of jQuery code. (This is in addition to the code you already have that does the same thing when the golden chevron is clicked)
$(document).on("click","tr",function(){
let chev = $(this).find('td a i');
if (chev.length){
if (chev.hasClass('fa-angle-right')){
chev.removeClass('fa-angle-right').addClass('fa-angle-down');
}else{
chev.removeClass('fa-angle-down').addClass('fa-angle-right');
}
}
});
$(document).on("click","option-tab",function(){
if($(this).children().hasClass("fa-angle-right")){
$(this).children().removeClass("fa-angle-right");
$(this).children().addClass("fa-angle-down");
}
else
{
$(this).children().removeClass("fa-angle-down");
$(this).children().addClass("fa-angle-right");
}
});
$(document).on("click","tr",function(){
let chev = $(this).find('td a i');
if (chev.length){
if (chev.hasClass('fa-angle-right')){
chev.removeClass('fa-angle-right').addClass('fa-angle-down');
}else{
chev.removeClass('fa-angle-down').addClass('fa-angle-right');
}
}
});
.table td,
.table th {
padding-left: 1.75rem;
}
.table-header {
background-color: #28283e;
color: #f9f9f9;
}
.accounts-table:hover{
background-color: #fafafa;
}
a.right-angle {
color: orange;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<table class="table">
<!-- Table Headings -->
<thead class="table-header">
<tr>
<th scope="col"></th>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
<th scope="col">Last Login</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<!-- Table Row 1 -->
<tr class="accounts-table" data-toggle="collapse" data-target="#AccountDetails">
<td>
<i class="fas fa-angle-right"></i>
</td>
<td>[0708]</td>
<td>Mark Jonas</td>
<td>Guest</td>
<td class="success">Active</td>
<td>22/11/2018</td>
<td><i class="fas fa-desktop"></i></td>
</tr>
<!-- Table Row 1 Collapse -->
<tr>
<td class="insert-here coll-bg" colspan="8">
<div class="collapse" id="AccountDetails">
<p>Hello World</p>
</div>
</td>
</tr>
<!-- Table Row 2 -->
<tr class="accounts-table">
<td><i class="fas fa-angle-right"></i></td>
<td>[2589]</td>
<td>John Smith</td>
<td>Guest</td>
<td class="danger">Disabled</td>
<td>N/A</td>
<td><i class="fas fa-desktop"></i></td>
</tr>
<!-- Table Row 3 -->
<tr class="solid-rows">
<td><i class="fas fa-angle-right"></i></td>
<td>[9147]</td>
<td>Murray Loius</td>
<td>Guest + Host</td>
<td class="warning">Pending Email</td>
<td>N/A</td>
<td><i class="fas fa-desktop"></i></td>
</tr>
</tbody><!-- END OF TABLE BODY -->
</table><!-- END OF TABLE -->

If I understand right You need to make the arrow action also when the row is clicked ..
To do this you'll need to create another click handler for the row Then trigger the arrow click ..
Also to simplify your code you can use toggleClass() instead of add/removeClass
Example
$(document).on("click",".option-tab",function(e){ // add (e) for event here
e.stopPropagation(); //<<<<<<<<<<< add this here
$(this).children().toggleClass("fa-angle-down fa-angle-right");
});
$(document).on('click' , 'tr.accounts-table' , function(){
$(this).find('.option-tab').trigger('click'); // find the arrow then trigger the click .. you can also use `.click()` directly instead of `.trigger('click')`
});
.table td,
.table th {
padding-left: 1.75rem;
}
.table-header {
background-color: #28283e;
color: #f9f9f9;
}
.accounts-table:hover{
background-color: #fafafa;
}
a.right-angle {
color: orange;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<table class="table">
<!-- Table Headings -->
<thead class="table-header">
<tr>
<th scope="col"></th>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Status <span class="badge badge-danger profile-verification-noti">4</span></th>
<th scope="col">Last Login</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<!-- Table Row 1 -->
<tr class="accounts-table">
<td>
<i class="fas fa-angle-right"></i>
</td>
<td>[0708]</td>
<td>Mark Jonas</td>
<td>Guest</td>
<td class="success">Active</td>
<td>22/11/2018</td>
<td><i class="fas fa-desktop"></i></td>
</tr>
<!-- Table Row 1 Collapse -->
<tr>
<td class="insert-here coll-bg" colspan="8">
<div class="collapse" id="AccountDetails">
<p>Hello World</p>
</div>
</td>
</tr>
<!-- Table Row 2 -->
<tr class="accounts-table">
<td><i class="fas fa-angle-right"></i></td>
<td>[2589]</td>
<td>John Smith</td>
<td>Guest</td>
<td class="danger">Disabled</td>
<td>N/A</td>
<td><i class="fas fa-desktop"></i></td>
</tr>
<!-- Table Row 3 -->
<tr class="solid-rows">
<td><i class="fas fa-angle-right"></i></td>
<td>[9147]</td>
<td>Murray Loius</td>
<td>Guest + Host</td>
<td class="warning">Pending Email</td>
<td>N/A</td>
<td><i class="fas fa-desktop"></i></td>
</tr>
</tbody><!-- END OF TABLE BODY -->
</table><!-- END OF TABLE -->
Important Note while you set a click handler for the all row
You'll need to use e.stopPropagation() on each click event on any
element in the row like I mentioned in the comments inside the js code
e.stopPropagation() Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
But about table Color to be changed You need to specify the exact part to be colored .. table? rows? all .account-table rows? all rows except the clicked one? which one?

Input and two buttons side by side in table

I got an input and two icons (that work like buttons) and I want them to be side by side in a table.
Besides, when on click of the icons ("buttons"), I want it to get me the value of the input.
$(document).on("click", "#add", function() {
alert($("#add").closest());
});
.w3-table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
display: table;
}
#quantidade input {
width: 40%;
height: 40px;
}
#quantidade div {
font-size: 15pt;
display: grid;
padding-left: 10px;
}
#quantidade i {
padding: 0 3px;
}
#quantidade i:hover {
background-color: #0F292F;
cursor: pointer;
}
#quantidade {
padding-left: 80px;
}
table {
width: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<table class="w3-table">
<thead>
<tr>
<th colspan="3">
<h2>Lista das Compras</h2>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arroz</td>
<td id='quantidade' class='w3-right'>
<input type='text' class='w3-input w3-left' value='1'>
<div>
<i id='add' class='fa fa-angle-up'></i>
<i id='rem' class='fa fa-angle-down'></i>
</div>
</td>
</tr>
</tbody>
</table>
Demo

Try the following:
$(document).on("click", "#add", function(){
alert($("#add").closest('td').prev().find('input[type=text]').val());
});
.w3-table {
border-collapse:collapse;
border-spacing:0;
width:100%;
display:table;
}
#quantidade input {
width: 40%;
height: 40px;
}
#quantidade div {
font-size: 15pt;
display: grid;
padding-left: 10px;
}
#quantidade i {padding: 0 3px;}
#quantidade i:hover {
background-color: #0F292F;
cursor:pointer;
}
#quantidade {padding-left: 80px;}
table {width: 40%;}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="w3-table">
<thead>
<tr>
<th colspan="3"><h2>Lista das Compras</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td>Arroz</td>
<td>
<input type='text' id='button1' value='1'>
</td>
<td>
<div>
<span id='add' class='fa fa-angle-up'></span><br>
<span id='rem' class='fa fa-angle-down'></span>
</div>
</td>
</tr>
</tbody>
</table>

<tr>
<td>Arroz</td>
<td id='quantidade'>
<input type='text' id='button1' value='1'>
</td>
<td>
<div>
<span id='add' class='fa fa-angle-up'></span><br>
<span id='rem' class='fa fa-angle-down'></span>
</div>
</td>
</tr>
$(document).on("click", "#add", function(){
alert($("#button1").val());
});

Change your jquery code
$(document).on("click", "#add", function () {
alert($(this).parent().closest('div').prev('input').val());
});
As you said you have changed your table structure like this
<table class="w3-table">
<thead>
<tr>
<th colspan="3"><h2>Lista das Compras</h2></th>
</tr>
</thead>
<tbody>
<tr>
<td>Arroz</td>
<td>
<input type='text' id='button1' value='1'>
</td>
<td>
<div>
<span id='add' class='fa fa-angle-up'></span><br>
<span id='rem' class='fa fa-angle-down'></span>
</div>
</td>
</tr>
</tbody>
</table>
So code for new structure table will be
$(document).on("click", "#add", function () {
alert($(this).parent().closest('div').parent().prev('td').find('#button1').val());
});
Hope this will help you.

It works with this:
$(document).on("click", "#add", function(){
alert($(this).closest("tr").find('input').val());
});

how to change style of button on click and click on different button it should be change to default

I have numbers of buttons, i want to change style of button on click event, but after click on another button that button style should be change to default...
i am fetching buttons from DB like
<table class="table">
<thead>
<tr>
<th style="text-align: center;">Tables</th>
</tr>
</thead>
<tbody>
#foreach($tables as $table)
<tr id="table">
<td style="text-align: center;">
<button class="btn" >{{$table->table_no}} </button>
</td>
</tr>
#endforeach
</tbody>
</table>
my script is:
$('#table button').click(function(){
$(this).css('background-color','green');
});
problem is if i click different button background color of that button should be change to default, how can I get this?? plz help, than you.

IDs need to be unique so I removed the IDs from the rows.
I also moved the inline CSS to a stylesheet.
Your loop content should look like this now
<tr>
<td>
<button class="btn" >{{$table->table_no}} </button>
</td>
</tr>
Example code
$(function() {
$('#table button').on("click",function(e){
e.preventDefault();
$('#table button').removeClass("selected");
$(this).addClass("selected");
});
});
#table th,td { text-align: center; }
.selected { background-color:green }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table" class="table">
<thead>
<tr>
<th>Tables</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<button class="btn" >{{$table->table_no}} </button>
</td>
</tr>
<tr>
<td>
<button class="btn" >{{$table->table_no}} </button>
</td>
</tr>
<tr>
<td>
<button class="btn" >{{$table->table_no}} </button>
</td>
</tr>
<tr>
<td>
<button class="btn" >{{$table->table_no}} </button>
</td>
</tr>
</tbody>
</table>

use add class & remove class.
http://www.w3schools.com/jquery/html_addclass.asp
http://www.w3schools.com/jquery/html_removeclass.asp

You can do this only by CSS, add below into your style:
button {
background: grey;
}
button:active {
background: green;
}

Open div in current clicked TD

<table id="tab">
<tr><td class="click" id="111">111</td> <td id="222" class="click">222</td></tr>
<tr><td class="click" id="333">333</td> <td id="444" class="click">444</td></tr>
</table>
<div id="hidden">
text
</div>
#tab tr td {
padding: 10px;
border: solid 1px red;
}
#hidden {
background-color:green;
width: 40px;
height: 40px;
display: none;
}
$(".click").click(function(){
$("#hidden").show();
})
How to open div #hidden in current clicked TD? and if i click outside #hidden i would like hide this div.
Fiddle: http://jsfiddle.net/QyRnH/2/

Try something like below
$(".click").click(function(){
$("#hidden").show();
$("#hidden").offset($(this).offset());
});
To change left and top you can write something like
$("#hidden").offset({top: $(this).offset().top, left: $(this).offset().left+10});
To hide the div when clicked outside, please refer the answer posted by Krister Andersson

I'm not sure what you mean by "How to open div #hidden in current clicked TD", but to show and hide the #hidden div you could do like this: http://jsfiddle.net/QyRnH/7/
<table id="tab">
<tr>
<td class="click" id="111">1</td>
<td class="click" id="222">2</td>
</tr>
<tr>
<td class="click" id="333">3</td>
<td class="click" id="444">4</td>
</tr>
</table>
<div id="hidden">text</div>
$(".click").click(function(e){
$("#hidden").show();
$("#hidden").appendTo($(this));
e.stopPropagation();
});
$(document).click(function() {
$('#hidden').hide();
});

Here you go: http://jsfiddle.net/maniator/QyRnH/6/
HTML:
<table id="tab">
<tr>
<td class="click" id="111">
111
<div class="hidden">
text
</div>
</td>
<td id="222" class="click">
222
<div class="hidden">
text
</div>
</td>
</tr>
<tr>
<td class="click" id="333">
333
<div class="hidden">
text
</div>
</td>
<td id="444" class="click">
444
<div class="hidden">
text
</div>
</td>
</tr>
</table>
JS:
$(".click").click(function() {
$(".hidden").hide();
$(".hidden", this).toggle();
});

$(".click").click(function(){
$("#hidden").show();
$(this).append($("#hidden"));
})

Categories