I want to hide a html class when button clicked.
The html structure is like this:
<thead>
<tr class="employee-list">
<th>
<button class="show-emp">Show Employee</button>
</th>
</tr>
</thead>
<tbody class="emp">
<tr class="employee-list">
<td style="width: 300px" class="text-center">Employee 1</td>
</tr>
<tr class="employee-list-last">
<td style="width: 300px" class="text-center">Employee 2</td>
</tr>
</tbody>
<tbody class="emp">
<tr class="employee-list">
<td style="width: 300px" class="text-center">Employee 1</td>
</tr>
<tr class="employee-list-last">
<td style="width: 300px" class="text-center">Employee 2</td>
</tr>
</tbody>
Also I can have more than one .emp class.
I've tried something like code bellow, but still not working (it hide all element with .emp class)
$('.show-emp').click(function() {
$(this).closest(".emp").hide();
});
The ilustration how it works is like this:
When show button clicked, it will only hide/show the employee list bellow it.
.closest() finds the closest parent element that matches the selector, but .emp isn't a parent of .show-emp.
You want to go up to the thead, then find the first sibling after it that matches the selector.
.nextAll() will find all the following siblings that match. Use .first() to get the first one.
$('.show-emp').click(function() {
$(this).closest("thead").nextAll(".emp").first().toggle();
$(this).text(function(i, text) {
return text == 'Show Employee' ? 'Hide Employee' : 'Show Employee';
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr class="employee-list">
<th>
<button class="show-emp">Hide Employee</button>
</th>
</tr>
</thead>
<tbody class="emp">
<tr class="employee-list">
<td style="width: 300px" class="text-center">Employee 1</td>
</tr>
<tr class="employee-list-last">
<td style="width: 300px" class="text-center">Employee 2</td>
</tr>
</tbody>
<tbody class="emp">
<tr class="employee-list">
<td style="width: 300px" class="text-center">Employee 3</td>
</tr>
<tr class="employee-list-last">
<td style="width: 300px" class="text-center">Employee 4</td>
</tr>
</tbody>
</table>
First of all correct your markup and jquery properly.
check your <button tag
Jquery code here ('.show-emp')
You can achieve it many way. one of the below way.
$('.show-emp').click(function() {
$(this).parents().siblings('.emp').first().hide();
// to hide only first sibling then use //first()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr class="employee-list">
<th>
<button class="show-emp"> Btn </button>
</th>
</tr>
</thead>
<tbody class="emp">
<tr class="employee-list">
<th style="width: 300px" class="text-center">Employee 1</th>
</tr>
<tr class="employee-list-last">
<th style="width: 300px" class="text-center">Employee 2</th>
</tr>
</tbody>
</table>
Related
Info: I want to make nested draggable table using sortable js. This is like a tree table.
The .detail-view tr is a child of previous tr or which have Parent data. I want If user Drag the parent tr the child(.detail-view) also dragged along with it. each parent tr have there separate zone with there child table.
The childs are not shared able with other childs or parents.
https://jsfiddle.net/47r95hbs/
<table class="table" id="mytable">
<thead>
<tr>
<th>Sortable Table</th>
</tr>
</thead>
<tbody id="ptable">
<tr>
<td>Parent subject 1</td>
</tr>
<tr class="detail-view" data-subject="1">
<td>
<table class="table detail-table">
<tbody>
<tr data-id="1">
<td>Subject 1 child</td>
</tr>
<tr data-id="2">
<td>Subject 1 child</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Parent subject 2</td>
</tr>
<tr class="detail-view" data-subject="2">
<td>
<table class="table detail-table">
<tbody>
<tr data-id="1">
<td>Subject 2 child</td>
</tr>
<tr data-id="2">
<td>Subject 2 child</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Parent subject 3</td>
</tr>
<tr class="detail-view" data-subject="2">
<td>
<table class="table detail-table">
<tbody>
<tr data-id="1">
<td>Subject 3 child</td>
</tr>
<tr data-id="2">
<td>Subject 3 child</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I used jQuery DataTable to show some data.
Here is my code.
I tried to add collapse/expand using bootstrap collapse functionality.
So I made two rows.
But if you see console it throws an javascript error so code below it not running.
How can I fix this?
Here is html code:
<table id="taskTable">
<thead class="bg-light text-capitalize">
<tr>
<th>Subject</th>
<th>Name</th>
<th>Duration</th>
<th>User</th>
</tr>
<tr style="display:none;">
<th></th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo1">
<td>Subject1</td>
<td>Name1</td>
<td>Duration1</td>
<td>User1</td>
</tr>
<tr id="demo1">
<td>aaa</td>
</tr>
<tr data-toggle="collapse" data-target="#demo2">
<td>Subject2</td>
<td>Name2</td>
<td>Duration2</td>
<td>User2</td>
</tr>
<tr id="demo2">
<td>aaa</td>
</tr>
</tbody>
</table>
Not feeling good using this approach:
Because of search, the sort, etc will break the concept of <tr> as header and it's next <tr> as content.
Maybe you can achieve the same thing using a different approach, like you can have child rows like here. But you can also fix the above problem as below:
JS Fiddle
HTML
<table id="taskTable">
<thead class="bg-light text-capitalize">
<tr>
<th>Subject</th>
<th>Name</th>
<th>Duration</th>
<th>User</th>
</tr>
<tr style="display:none;">
<th colspan="4"></th>
</tr>
</thead>
<tbody>
<tr data-toggle="collapse" data-target="#demo1">
<td>Subject1</td>
<td>Name1</td>
<td>Duration1</td>
<td>User1</td>
</tr>
<tr id="demo1">
<td colspan="4">aaa</td>
<td style="display: none;"></td>
<td style="display: none;"></td>
<td style="display: none;"></td>
</tr>
<tr data-toggle="collapse" data-target="#demo2">
<td>Subject2</td>
<td>Name2</td>
<td>Duration2</td>
<td>User2</td>
</tr>
<tr id="demo2">
<td colspan="4">aa2</td>
<td style="display: none;"></td>
<td style="display: none;"></td>
<td style="display: none;"></td>
</tr>
</tbody>
</table>
JS
$("#taskTable").dataTable({
"ordering": false
});
I have a table with buttons on each row. I am trying to click on a button on a particular and it picks the value .claim_value field of the same row and put the value in the td opposite it .vet_value.
Here's my code
<table id="tasks" class="col-md-12 table">
<thead>
<tr>
<td>Service</td>
<td>Key notes</td>
<td>Claim Amount</td>
<td>Vetted Amount</td>
</tr>
</thead>
<tbody>
<tr class="therow">
<td class="claim_value">hey</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">you</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">me</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
<tr class="therow">
<td class="claim_value">them</td>
<td class="vet_value"></td>
<button class="button">button</button>
</tr>
</tbody>
</table>
so i want to be able to click on class="button"
$(".button").click(function(){
(".claim_value").val() of this same row goes into (".vet_value").val()
});
Just call parent() to access the parent <tr> element and modify <td> from there
$(".button").click(function(){
var $parent=$(this).parent();
var claimValue=$parent.find(".claim_value").text();
$parent.find(".vet_value").text(claimValue);
});
you don't need to use .val() unless the element is input or textarea
with td use .text() also you need to use $(this) to refer to the button you clicked and closest('tr') to select the closest row then .find() to find the element with class you want
$(".button").click(function(){
var claim_value = $(this).closest('tr').find(".claim_value").text();
$(this).closest('tr').find(".vet_value").text(claim_value);
});
Use html() that is not val(). Insert td inside which has to be the direct child of tr. As val() only comes for input and textarea.
$(".button").click(function(){
alert($(this).closest('tr').find(".claim_value").html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tasks" class="col-md-12 table">
<thead>
<tr>
<td>Service</td>
<td>Key notes</td>
<td>Claim Amount</td>
<td>Vetted Amount</td>
</tr>
</thead>
<tbody>
<tr class="therow">
<td class="claim_value">hey</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">you</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">me</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
<tr class="therow">
<td class="claim_value">them</td>
<td class="vet_value"></td>
<td>
<button class="button">button</button>
</td>
</tr>
</tbody>
</table>
i want to start the colspan from the second column i mean from the name:
<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<td style="width: 30px;"></td>
<td><p>Name</p></td>
<td><p>ID</p></td>
<td><p>GPS date</p></td>
<td><p>Adresse</p></td>
<td><p>Company</p></td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="device in MyDeviceObject">
<td>
<button ng-if="device.expanded" ng-click="device.expanded = false">-</button>
<button ng-if="!device.expanded" ng-click="device.expanded = true">+</button>
</td>
<td><p>{{device.name}}</p></td>
<td><p>{{device.uniqueid}}</p></td>
<td><p>{{device.devicetime}}</p></td>
<td><p>{{device.adress}}</p></td>
<td><p>{{device.company}}</p></td>
</tr>
<tr ng-if="device.expanded" ng-repeat-end="">
<td colspan="6">gfhgfjhfjtjrtkjy</td>
</tr>
</tbody>
please can anyone tell me how i can colspan from the name??
It seems all you need is to add a <td> to the row. You have :
<tr ng-if="device.expanded" ng-repeat-end="">
<td colspan="6">gfhgfjhfjtjrtkjy</td>
</tr>
Change it to:
<tr ng-if="device.expanded" ng-repeat-end="">
<td style="width: 30px;"></td>
<td colspan="5">gfhgfjhfjtjrtkjy</td>
</tr>
This should add a <td> beneath the plus/minus icon. Additionally, you can style this <td> if you do not intent it to be appear as a column ( which I think is your intent).
Hope that helps.
<table width="100%">
<thead style="background-color: lightgray;">
<tr>
<td style="width: 30px;"></td>
<td><p>Name</p></td>
<td><p>ID</p></td>
<td><p>GPS date</p></td>
<td><p>Adresse</p></td>
<td><p>Company</p></td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="device in MyDeviceObject">
<td>
<button ng-if="device.expanded" ng-click="device.expanded = false">-</button>
<button ng-if="!device.expanded" ng-click="device.expanded = true">+</button>
</td>
<td><p>{{device.name}}</p></td>
<td><p>{{device.uniqueid}}</p></td>
<td><p>{{device.devicetime}}</p></td>
<td><p>{{device.adress}}</p></td>
<td><p>{{device.company}}</p></td>
</tr>
<tr ng-if="device.expanded" ng-repeat-end="">
<td colspan="6">gfhgfjhfjtjrtkjy</td>
</tr>
<tr ng-repeat-start="device in MyDeviceObject">
<td>
<button ng-if="device.expanded" ng-click="device.expanded = false">-</button>
<button ng-if="!device.expanded" ng-click="device.expanded = true">+</button>
</td>
<td colspan="2" align="center"><p>{{device.name}}</p></td>
<td><p>{{device.devicetime}}</p></td>
<td><p>{{device.adress}}</p></td>
<td><p>{{device.company}}</p></td>
</tr>
The basic structure is a table with a few rows. I would like the top half of the table showing and the bottom half collapsed until a user clicks on the READ MORE cell. I have that functionality working but I can't get the JQuery right that selects all of the ".collapseThis" rows and hides them on page load.
Here is the table
<div id="tables">
<table class="expandableTable">
<tr>
<td></td>
<td></td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td></td>
<td></td>
</tr>
</table>
<table class="expandableTable">
<tr>
<td></td>
<td></td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td></td>
<td></td>
</tr>
</table>
</div>
Here is the JQuery.
$(document).ready(function () {
function getCollapsable($row) {
var children = [];
while ($row.next().hasClass('collapseThis')) {
children.push($row.next());
$row = $row.next();
}
return children;
}
function hideTableRows($row) {
children = getCollapsable($row);
$.each(children, function () {
$(this).toggle();
});
}
$('#tables').each($('expandableTable'), function () {
hideTableRows($(this).children().hasClass('.accordion'));
});
You can just use css to set the display value, there is no need to use jQuery to set the initial state.
If you want to use jQuery, use a simple selector like $('#tables .expandableTable .collapseThis').hide().
$(document).ready(function() {
//if you don't want to use css
//$('#tables .expandableTable .collapseThis').hide();
});
#tables .expandableTable .collapseThis {
display: none;
}
<div id="tables">
<table class="expandableTable">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<table class="expandableTable">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<table class="expandableTable">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
</div>