We Keep Coding

how to display additional rows on click of a icon in a table in angular 2?

on click of a (+) button in the first column of each row, other rows should be expanded. but, on click of (+) button am only able to expand upto one row. how can i expand multiple rows in a table on click of (+) button. thanks in advance.
<div>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Country</th>
<th scope="col">Vehicle Type</th>
</tr>
</thead>
<tbody>
<tr (click) = "check('car')">
<td scope="row">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExamplecar" aria-expanded="false" aria-controls="collapseExample">
(+)
</button>
</td>
<td>Germany</td>
<td>Car</td>
</tr>
<tr class="collapse" id="collapseExamplecar">
<td></td>
<td scope="row" >Germany</td>
<td>Check car</td>
</tr>
<tr class="collapse" id="collapseExamplecar">
<td></td>
<td scope="row" >Germany</td>
<td>Check car2</td>
</tr>
<tr >
<td scope="row">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExamplevan" aria-expanded="false" aria-controls="collapseExample">
(+)
</button>
</td>
<td scope="row" >Germany</td>
<td>Van</td>
</tr>
<tr class="collapse" id="collapseExamplevan">
<td></td>
<td scope="row" >Germany</td>
<td>Check Van</td>
</tr>
<tr (click) = "check('truck')">
<td scope="row">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExampletruck" aria-expanded="false" aria-controls="collapseExample">
(+)
</button>
</td>
<td scope="row">Germany</td>
<td>Truck</td>
</tr>
<tr class="collapse" id="collapseExampletruck">
<td></td>
<td scope="row" >Germany</td>
<td>Check truck</td>
</tr>
</tbody>
</table>
</div>
how can i expand multiple rows in a table on click of (+) button. thanks in advance.

You can use class instead of id for data-target attribute value. For example change
<button ... data-target="#collapseExamplecar" >
...
<tr class="collapse" id="collapseExamplecar">
...
<tr class="collapse" id="collapseExamplecar">
to
<button ... data-target=".collapseExamplecar">
...
<tr class="collapse collapseExamplecar">
...
<tr class="collapse collapseExamplecar">

How to colspan tr table from the start of the 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>

How to Move selected table tr's to another table?

I have got two tables mytable1 and mytable2
I am trying to move the checked tr rows (from table mytable1) to different table mytable2
I have tried as following
$(document).ready(function() {
$(document).on("click", ".movemultiple", function(event)
{
$('.mytable1 > tbody > tr').each(function() {
$(this).find('td:eq(0) .updatecheckboxvalueindb:checked')
});
});
});
.fa fa-check
{
background-color:red!importnt
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable1 table table-bordered table-hover" id="videosfromtagstable">
<thead>
<tr class="existingvideos">
<th>Action</th>
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
</tr>
</thead>
<tbody class="connectedSortable ui-sortable">
<tr video-id="37" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>crunches</td>
<td>ht4_970_979.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr video-id="38" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>Sit Ups</td>
<td>ht4_970_345.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
</tbody>
</table>
<br><br>
<button type="button" class="btn red default movemultiple">Move </button>
<br><br>
<table class="mytable2 table table-bordered table-hover" id="videosexistingtable">
<tbody class="connectedSortable ui-sortable">
<tr class="existingvideos">
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
<th>Action</th>
</tr>
<tr class="existingvideos" video-id="34">
<td>Push Ups</td>
<td>ht4_970_285.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td>
<i class="fa fa-check"></i>
</td>
<td class="deletevidetd"><a data-videoid="34" class="fa fa-trash remove-delete-icon deletevideo" title="Delete"></a></td>
</tr>
</tbody>
</table>
Could you please let me know how to do this ?
http://jsfiddle.net/o2gxgz9r/1879/

You could use jQuery .closest() to get the closest table row (or table cell) and jQuery .remove() to remove the table cell with the checkbox from DOM:
$(document).ready(function () {
$(document).on('click', '.movemultiple', function() {
var $myTable2Body = $('.mytable2 tbody');
$('.mytable1 .updatecheckboxvalueindb:checked').each(function(index, item) {
var $checkbox = $(item);
$myTable2Body.append($checkbox.closest('tr'));
$checkbox.closest('td').remove();
});
});
});
.fa fa-check
{
background-color:red!importnt
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable1 table table-bordered table-hover" id="videosfromtagstable">
<thead>
<tr class="existingvideos">
<th>Action</th>
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
</tr>
</thead>
<tbody class="connectedSortable ui-sortable">
<tr video-id="37" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>crunches</td>
<td>ht4_970_979.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr video-id="38" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>Sit Ups</td>
<td>ht4_970_345.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
</tbody>
</table>
<br><br>
<button type="button" class="btn red default movemultiple">Move </button>
<br><br>
<table class="mytable2 table table-bordered table-hover" id="videosexistingtable">
<tbody class="connectedSortable ui-sortable">
<tr class="existingvideos">
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
<th>Action</th>
</tr>
<tr class="existingvideos" video-id="34">
<td>Push Ups</td>
<td>ht4_970_285.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td>
<i class="fa fa-check"></i>
</td>
<td class="deletevidetd"><a data-videoid="34" class="fa fa-trash remove-delete-icon deletevideo" title="Delete"></a></td>
</tr>
</tbody>
</table>
JSFiddle

like this?
$(document).on("click", ".movemultiple", function(event){
$('.updatecheckboxvalueindb:checked').parents('tr').appendTo('.mytable2').find('.removecheckboxtd').remove();
});
check out the fiddle : http://jsfiddle.net/h9q8o340/

How to sort table tbodies in html with javascript?

I'm encountered this problem from my workplace and i kinda feel this table isn't common table for me. I want to sort this table like when i click one of the header, it got sorted from that header category. In example i have this html code:
<html>
<head>
</head>
<body>
<table id="AirflightDetail">
<thead>
<tr>
<th class="col-lg-2 text-center">Airline</th>
<th class="col-lg-2 text-center">Depart</th>
<th class="col-lg-2 text-center">Arrival</th>
<th class="col-lg-2 text-center">Duration</th>
<th class="col-lg-2 text-center">Price</th>
</tr>
</thead>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline X</span>
<br>
<p>AX-006</p>
</td>
<td class="text-center" min-width="100px">
<strong>13:10</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>14:25</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>1hour 15m</strong>
<br>
<span>Direct</span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$327</strong>
</td>
</tr>
</tbody>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline H</span>
<br>
<p>AH-999</p>
</td>
<td class="text-center" min-width="100px">
<strong>18:30</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>19:45</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>1hour 15m</strong>
<br>
<span>Direct </span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$273</strong>
</td>
</tr>
</tbody>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline K</span>
<br>
<p>AK-100</p>
</td>
<td class="text-center" min-width="100px">
<strong>12:05</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>14:20</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>2hour</strong>
<br>
<span>Direct </span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$273</strong>
</td>
</tr>
</tbody>
</table>
</body>
</html>
When i click the header title in example Airline, the table got sorted from the airline like:
<html>
<head>
</head>
<body>
<table id="AirflightDetail">
<thead>
<tr>
<th class="col-lg-2 text-center">Airline</th>
<th class="col-lg-2 text-center">Depart</th>
<th class="col-lg-2 text-center">Arrival</th>
<th class="col-lg-2 text-center">Duration</th>
<th class="col-lg-2 text-center">Price</th>
</tr>
</thead>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline H</span>
<br>
<p>AH-999</p>
</td>
<td class="text-center" min-width="100px">
<strong>18:30</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>19:45</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>1hour 15m</strong>
<br>
<span>Direct </span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$273</strong>
</td>
</tr>
</tbody>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline K</span>
<br>
<p>AK-100</p>
</td>
<td class="text-center" min-width="100px">
<strong>12:05</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>14:20</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>2hour</strong>
<br>
<span>Direct </span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$273</strong>
</td>
</tr>
</tbody>
<tbody class="table-result-list">
<tr>
<td class="text-center" min-width="87px">
<span>Airline X</span>
<br>
<p>AX-006</p>
</td>
<td class="text-center" min-width="100px">
<strong>13:10</strong>
<br>
<span>Singapore</span>
</td>
<td class="text-center" min-width="100px">
<strong>14:25</strong>
<br>
<span>Bangkok</span>
</td>
<td class="text-center" min-width="65px">
<strong>1hour 15m</strong>
<br>
<span>Direct</span>
</td>
<td class="text-right amount" min-width="77px">
<strong>$327</strong>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I've already seen many javascript sort the table but it only sort the element of tbody or but i never seen any javascript that can sorting the tbody. How can i do that with javascript and without jquery

There is a bunch of stuff involved on this one.
First of all you have to attach event listeners to all your thead th items so when they are clicked they'll perform the sort action.
var airFlightTable = document.querySelector("#AirflightDetail");
var tableHeaders = airFlightTable.querySelectorAll("thead tr th");
tableHeaders.forEach(function(tableHeader){
tableHeader.addEventListener("click", onTableHeaderClick);
});
When click happens you start the sort process by gathering all tbody tags and manipulate their DOM.
function onTableHeaderClick(event){
var sortBy = event.currentTarget.innerHTML;
if(sortBy === 'Airline'){
airFlightTable.querySelectorAll(".table-result-list").forEach(function(tableResultsLIst){
var items = [].slice.call(tableResultsLIst.querySelectorAll("td"));
var sortedItems = items.sort(); //you can place your sort logic here and after you're done you have to replace items of current tbody with sorted ones
});
}
}
There is some work left for you, but you should be fine from this point. Here is a JSBin with this implementation

Add class to all <tr> by clicking checkbox

With this code, i get all the checkboxes checked:
$(".checkAllCheckboxes").click(function()
{
$('input:checkbox').not(this).prop('checked', this.checked);
});
With this, i add a class to the element, where the checkbox is in.
$(function()
{
$('.table_row_checkbox').on('change',function(){
if($(this).is(":checked"))
{
$(this).parents('tr').addClass("checkbox_checked_row");
}
else
{
$(this).parents('tr').removeClass("checkbox_checked_row");
}
});
});
How can i add that class, in my first code, to all the elements, by clicking select all checkboxes?
Sorry, i dont mean that.
My generated table code looks like:
<table class="table table-hover table-bordered list">
<thead>
<tr>
<td style="width: 1px; text-align: center;"><input type="checkbox" class="checkAllCheckboxes" /></td>
<td style="text-align: center;">ID</td>
<td class="left">Név</td>
<td class="left">E-mail</td>
<td class="left">Telefonszám</td>
<td style="text-align: center;">Dátum</td>
<td style="text-align: center;">Státusz</td>
<td class="right">Műveletek</td>
</tr>
</thead>
<tbody>
<tr id="sor55">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="55" /></td>
<td style="text-align: center;">55</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99#gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span> <a id="55" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
<tr id="sor54">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="54" /></td>
<td style="text-align: center;">54</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99#gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span> <a id="54" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
</tbody>
</table>
In the first , theres the select all checkbox.

$(".checkAllCheckboxes").click(function()
{
$('input:checkbox').not(this).prop('checked', this.checked);
$('input:checkbox').each(function() {
if($(this).is(":checked"))
{
$(this).parents('tr').addClass("checkbox_checked_row");
}
else
{
$(this).parents('tr').removeClass("checkbox_checked_row");
}
});;
});
$('.table_row_checkbox').on('change',function(){
if($(this).is(":checked"))
{
$(this).parents('tr').addClass("checkbox_checked_row");
}
else
{
$(this).parents('tr').removeClass("checkbox_checked_row");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-bordered list">
<thead>
<tr>
<td style="width: 1px; text-align: center;"><input type="checkbox" class="checkAllCheckboxes" /></td>
<td style="text-align: center;">ID</td>
<td class="left">Név</td>
<td class="left">E-mail</td>
<td class="left">Telefonszám</td>
<td style="text-align: center;">Dátum</td>
<td style="text-align: center;">Státusz</td>
<td class="right">Műveletek</td>
</tr>
</thead>
<tbody>
<tr id="sor55">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="55" /></td>
<td style="text-align: center;">55</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99#gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span> <a id="55" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
<tr id="sor54">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="54" /></td>
<td style="text-align: center;">54</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99#gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span> <a id="54" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
</tbody>
</table>

Or, slightly shorter, see here fiddle (edited):
$(".checkAllCheckboxes").click(function()
{
$(this).closest('table').find('input:checkbox').prop('checked', this.checked)
.closest('tr').toggleClass('selected',this.checked)
});
The function does both, set the tickmarks and assigns/removes the classname to the parent-trs. As it turns out, the .not(this) and later .addSelf() were not even necessary to achieve the intended effect. I therefore removed them again ("Write less, do more").
.closest() is advantageous in cases where there might be nested tables (.parents() would find all parent tables)
.closest('tr') gets the trs you want to work on.
Well, the above does not quite do everything. It does not do the tr-class-handling when clicking on a "normal" checkbox. The following does:
$('input:checkbox').click(function()
{ var jqobj=$(this);
if (jqobj.hasClass('checkAllCheckboxes')) // extend the selection
{ jqobj=jqobj.closest('table').find('input:checkbox'); }
jqobj.prop('checked', this.checked).closest('tr')
.toggleClass('selected',this.checked);
});

this can also be used to acheive the same
$(".checkAllCheckboxes").click(function(){
if($(this).is(':checked')){
$(this).parents('tr').addClass('checked');
$('tbody tr').addClass('checked')
$('tbody input[type="checkbox"]').prop('checked',true)
}
else{
$(this).parents('tr').removeClass('checked');
$('tbody tr').removeClass('checked')
$('tbody input[type="checkbox"]').prop('checked',false)
}
});