We Keep Coding

How to add text outputted into my table to one array? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I'm trying to add some text to an array that's dynamically outputted by my database. However, with the way my function is set up currently, it adds each value to it's own separate array. I need them to be pushed to the same array because I need to get the sum of all the numbers that are outputted.
This is my function to convert the text to a number and then push them to an array.
$(".sumCosts").each(function(){
let valuesArray = [];
let values = parseInt($(this).text().replace(/,/g, ''));
valuesArray.push(values);
console.log(valuesArray);
})
This is the HTML output. I'm interested in the <td> with class sumCosts, marked with *.
<table class="table text-light">
<thead>
<tr class="text-end">
<th class="text-start" scope="col">Implementation or Annual</th>
<th class="text-start" scope="col">Category</th>
<th scope="col">Cost ($)</th>
<th scope="col">Hours</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">emo</td>
***<td class="text-end sumCosts">4,091</td>***
<td class="text-end">85</td>
<td>
<a href="/find/costs_hours/1">
<button id="1" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/1">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">analysts</td>
***<td class="text-end sumCosts">6,282</td>***
<td class="text-end">130.5</td>
<td>
<a href="/find/costs_hours/2">
<button id="2" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/2">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">maintenance</td>
***<td class="text-end sumCosts">2,873</td>***
<td class="text-end">72.5</td>
<td>
<a href="/find/costs_hours/3">
<button id="3" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/3">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">implementation</td>
<td class="text-start">materials</td>
***<td class="text-end sumCosts">1,185</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/4">
<button id="4" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/4">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
<tbody><tr class="text-end">
<td class="text-start">annual</td>
<td class="text-start">emo</td>
***<td class="text-end sumCosts">313</td>***
<td class="text-end"></td>
<td>
<a href="/find/costs_hours/5">
<button id="5" type="button" class="btn btn-warning getId"><i class="fas fa-edit"></i></button>
</a>
</td>
<td>
<a class="deleteId" href="/delete/costs_hours/5">
<button type="button" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</a>
</td>
</tr>
</tbody>
</table>
This is what is logged to the console
[4091]
[6282]
[2873]
[1185]
[313]
I need to be able to put them into the same array so that I can get a sum of all the numbers. Any advice on how to achieve this is greatly appreciated! Thanks!

You had to just move valuesArray Outside the function nothing more !
Using vanilla js
JS
let ele = document.querySelectorAll(".sumCosts")
let ar = Array.from(ele)
let valuesArray = [];
ar.forEach(ele => {
let values = parseInt(ele.innerText.replace(/,/g, ''));
valuesArray.push(values);
})
console.log(valuesArray);
jQuery
let valuesArray = [];
$(".sumCosts").each(function() {
let values = parseInt($(this).text().replace(/,/g, ''));
valuesArray.push(values);
})
console.log(valuesArray);

jQuery dataTable error Cannot read property 'mData' of undefined

I have following dataTable which has 6 columns.
After rendering the table I am initializing .DataTable(). But getting the error:
'mData' of undefined TypeError: Cannot read property 'mData' of undefined
As mentioned in few of the posts , I have added tfoot but still have the error.
$(document).ready(function() {
$('#pTable').DataTable();
});
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="pTable" class="display" style="width:100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>NOK</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">288f60e3-0d8f-4a4a-92f9-4f4eeb737909</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy1</td>
<td class="text-muted" data-bind="text: NOK">SomeOne</td>
<td class="text-muted" data-bind="text: SYMPTOMS">12354475541</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="true">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">true</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">ae2dc252-4940-455e-a528-766f3d7d8fe9</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy2</td>
<td class="text-muted" data-bind="text: NOK">SomeOne Else</td>
<td class="text-muted" data-bind="text: SYMPTOMS">0564654654734</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="false">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">false</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Status</th>
<th>Name</th>
<th>Patients</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
</tr>
</tfoot>
</table>

You had 6 ths but had 7 tds in both of the rows. The number of th must match with the number of td. Adding a hidden th fixed it
$(document).ready(function() {
$('#pTable').DataTable();
});
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="pTable" class="display" style="width:100%">
<thead>
<tr>
<th style="display:none"></th>
<th>Status</th>
<th>Name</th>
<th>NOK</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">288f60e3-0d8f-4a4a-92f9-4f4eeb737909</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy1</td>
<td class="text-muted" data-bind="text: NOK">SomeOne</td>
<td class="text-muted" data-bind="text: SYMPTOMS">12354475541</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="true">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">true</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">ae2dc252-4940-455e-a528-766f3d7d8fe9</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy2</td>
<td class="text-muted" data-bind="text: NOK">SomeOne Else</td>
<td class="text-muted" data-bind="text: SYMPTOMS">0564654654734</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="false">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">false</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Status</th>
<th>Name</th>
<th>Patients</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
</tr>
</tfoot>
</table>

Number of headers thead tr th and number of cells in the tbody tr td should be same in each row(Same with the footer too). Once you do this this error will be removed.
'<table id="pTable" class="display" style="width:100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>NOK</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
<th>Some Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">288f60e3-0d8f-4a4a-92f9-4f4eeb737909</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy1</td>
<td class="text-muted" data-bind="text: NOK">SomeOne</td>
<td class="text-muted" data-bind="text: SYMPTOMS">12354475541</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="true">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">true</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
<tr>
<td class="text-muted" data-bind="text: ID, visible: false" style="display: none;">ae2dc252-4940-455e-a528-766f3d7d8fe9</td>
<td><span class="label label-accent">Active</span></td>
<td class="text-muted" data-bind="text: NAME">Buddy2</td>
<td class="text-muted" data-bind="text: NOK">SomeOne Else</td>
<td class="text-muted" data-bind="text: SYMPTOMS">0564654654734</td>
<td class="text-muted">
<div class="pretty p-round p-fill p-icon">
<input type="checkbox" data-bind="value: ISENABLED, checked: ISENABLED, event: { change: $parent.togglePatients}" value="false">
<div class="state p-primary">
<i class="icon fa fa-check"></i>
<label data-bind="text: ISENABLED">false</label>
</div>
</div>
</td>
<td class="text-muted">
<div class="btn-group pull-right">
<button data-bind="click: $parent.showPatients" type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#PatientsModal">
<i class="fa fa-edit"></i> Edit
</button>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Status</th>
<th>Name</th>
<th>Patients</th>
<th>Phone</th>
<th>IsEnabled</th>
<th>Add/Edit</th>
<th>Some Heading</th>
</tr>
</tfoot>
'

how to add data horizontally in ng-repeat

how to add buttons horizontaly something like below image, please help me i want add subjects button horizontally in one column dynamically how to possible in angularjs
<table class="table table-bordered table-striped table-hover table-condensed mb-none dataTable no-footer" role="grid">
<thead>
<tr>
<th style="width: 120px;" colspan="1" rowspan="1">Days</th>
<th style="width: 760px;" colspan="1" rowspan="1">Schedules</th>
<th style="width: 100px;" colspan="1" rowspan="1">Add</th>
</tr>
</thead>
<tbody class="gradeX">
<tr ng-repeat="x in additems">
<td>{{x.teacher_name }}</td>
<td><div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Math
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
<td><i class="fa fa-close text-danger" aria-hidden="true"></i></td>
</tr>
</tbody>
</table>
i want below image like this

Here is presented base logic:
angular.module('app',[]).controller('MyController', function($scope){
$scope.items=[
{name:'Sunday', stuff:[]},
{name:'Monday', stuff:[]}
];
$scope.add = function(stuff){
stuff.push(stuff.length);
};
})
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='MyController'>
<table>
<tr>
<th>Day</th>
<th>Schedule</th>
<th></th>
</tr>
<tr ng-repeat='item in items'>
<td>{{item.name}}</td>
<td>
<span ng-repeat='sub in item.stuff'>{{sub}}{{$last ? '' : ','}}</span>
</td>
<td>
<input type='button' value='Add' ng-click='add(item.stuff)'/>
</td>
</tr>
</table>
</div>

sorting doesn't work, datatable in bootstrap

I've got a problem with sorting my table. When I click on my table header, my table data don't sort. Even with using the "show 10/25/50 entries" and also the search bar.
I tried very long but seems not working. Here is my code. I don't is sit the plugin problem or my coding problem. I've tried many ways from the internet but all dont work. I'm running xampp locally with internet connection.
$(".contentContainer").css("min-height", $(window).height());
$("textarea").css("height", $(window).height() - 110);
$("textarea").keyup(function() {
$.post("updatediary.php", {
diary: $("textarea").val()
});
});
$(document).ready(function() {
$('#example').DataTable();
});
.navbar-brand {
font-size: 1.8em;
}
#topContainer {
background-image: url("background.jpg");
height: 400px;
width: 100%;
background-size: cover;
}
#topRow {
margin-top: 80px;
text-align: center;
}
#topRow h1 {
font-size: 300%;
}
.bold {
font-weight: bold;
}
.marginTop {
margin-top: 30px;
}
.center {
text-align: center;
}
.title {
margin-top: 100px;
font-size: 300%;
}
#footer {
background-color: #B0D1FB;
padding-top: 70px;
width: 100%;
}
,
marginBottom {
margin-bottom: 30px;
}
.appstoreImage {
width: 250px;
}
.table {
table-layout: fixed;
}
.table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">IT Services</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="collapse navbar-collapse">
<ul class= "navbar-nav nav pull-right">
<li class="active">Main</li>
<li>New Input</li>
<li>Log Out</li>
</div>
</div>
</div>
<div class="container">
<div class="jumpbotron">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<td>Date</td>
<th>Subject</th>
<td>Details</td>
<td>Status</td>
<td>ticket id</td>
<td>Actions</td>
</tr>
</thead>
<?php
while($row=mysqli_fetch_array($result))//while look to fetch the result and store in a array $row.
{
$date=$row[2];
$subject=$row[3];
$detail=$row[4];
$status=$row[5];
$tickid=$row[0];
?>
<tbody method="post">
<td class="col-md-1"><?php print_r($date); ?></td>
<td class="col-md-1"><?php print_r($subject); ?></td>
<td class="col-sm-2"><?php print_r($detail); ?> </td>
<td class="col-md-1"><?php print_r($status); ?></td>
<td class="col-md-1"><?php echo $tickid ; ?></td>
<td class="col-md-1"><a href="detail.php?id=<?php echo $tickid; ?>" name="submit" id="submit" class="btn btn-sm btn-success">Details</td>
</tbody>
<?php } ?>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>
</body>

Change td elements to th in thead
Take tbody out of while loop
Add table row tr element inside while loop to enclose table cells

I think you must clean up your code a little bit like #Gyrocode.com said. Code below works.
$(document).ready(function() {
$('#example').DataTable();
});
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Subject</th>
<th>Details</th>
<th>Status</th>
<th>ticket id</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- start to loop here -->
<tr>
<td class="col-md-1">10/04/2017</td>
<td class="col-md-1">ABC</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">1546546</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">11/04/2017</td>
<td class="col-md-1">DEF</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">5646156</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">12/04/2017</td>
<td class="col-md-1">ZXY</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">454658</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">OPQ</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">56446</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">ggg</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">52527</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">rtr</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">2577</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">rtfe</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">7254</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">rggthg</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">7527</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">frgbf</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">52727</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">grege</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">5872</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">gtehtehte</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">5872</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<!-- end loop -->
<tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>
Cleanup you your code:
$(document).ready(function() {
$('#example').DataTable();
});
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">IT Services</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav nav pull-right">
<li class="active">Main</li>
<li>New Input</li>
<li>Log Out</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumpbotron">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Date</th>
<th>Subject</th>
<th>Details</th>
<th>Status</th>
<th>ticket id</th>
<th>Actions</th>
</tr>
</thead>
<tbody method="post">
<?php
while($row=mysqli_fetch_array($result))//while look to fetch the result and store in a array $row.
{
$date=$row[2];
$subject=$row[3];
$detail=$row[4];
$status=$row[5];
$tickid=$row[0];
?>
<tr>
<td class="col-md-1">
<?php print_r($date); ?>
</td>
<td class="col-md-1">
<?php print_r($subject); ?>
</td>
<td class="col-sm-2">
<?php print_r($detail); ?> </td>
<td class="col-md-1">
<?php print_r($status); ?>
</td>
<td class="col-md-1">
<?php echo $tickid ; ?>
</td>
<td class="col-md-1"><a href="detail.php?id=<?php echo $tickid; ?>" name="submit" id="submit" class="btn btn-sm btn-success">Details</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>

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/