Develop Reference

How to get input value in a table's td on button click

I have a dynamic table and there is an input field in each row as well as a respective button on every rows. I want to get the respective value of the input field when I click on the respective button. To replicate the scenario, you may refer to the following static code with two rows. Can someone help?
$(".returnItem").click(function(){
var row = $(this).closest("input").find("input[name='newQty']").val(); //This is not working
var row = $(".newQty").val(); //This is not working also
alert(row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
<div class="container-fluid">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Part Number</th>
<th scope="col">Name of Item</th>
<th scope="col">Description</th>
<th scope="col">Quantity</th>
<th scope="col">New Quantity</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>xxxxxxxxxxx</td>
<td>name1</td>
<td>description1</td>
<td>10</td>
<input class="form-control oldQty" type="number" name="oldQty" value="10" hidden readonly>
<td><input class="form-control newQty" type="number" name="newQty"></td>
<div class="container text-center">
<td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</div>
</tr>
<tr>
<th scope="row">2</th>
<td>yyyyyyyyyy</td>
<td>name2</td>
<td>description2</td>
<td>20</td>
<input class="form-control oldQty" type="number" name="oldQty" value="20" hidden readonly>
<td><input class="form-control newQty" type="number" name="newQty"></td>
<div class="container text-center">
<td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</div>
</tr>
</tbody>
</table>
</div>
</form>

In your example you are using jQuery 1.2.3, which doesn't contains closest function (added since 1.3). Although, you're not looking for function closest, but parents. By this function, you will find parent <tr>, and then by find you will find the input and get his value via val.
Also, since your buttons are inside form, after pressing the button, form will be submitted, so you need to add e.preventDefault() from preventing the form to be sent.
$(".returnItem").click(function(e){
e.preventDefault();
row = $(this).parents("tr").find("input[name='newQty']").val();
alert(row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
<div class="container-fluid">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Part Number</th>
<th scope="col">Name of Item</th>
<th scope="col">Description</th>
<th scope="col">Quantity</th>
<th scope="col">New Quantity</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>xxxxxxxxxxx</td>
<td>name1</td>
<td>description1</td>
<td>10</td>
<input class="form-control" type="number" class="oldQty" name="oldQty" value="10" hidden readonly>
<td><input class="form-control" type="number" class="newQty" name="newQty"></td>
<div class="container text-center">
<td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</div>
</tr>
<tr>
<th scope="row">2</th>
<td>yyyyyyyyyy</td>
<td>name2</td>
<td>description2</td>
<td>20</td>
<input class="form-control" type="number" class="oldQty" name="oldQty" value="20" hidden readonly>
<td><input class="form-control" type="number" class="newQty" name="newQty"></td>
<div class="container text-center">
<td><button type="submit" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="submit" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</div>
</tr>
</tbody>
</table>
</div>
</form>

You have used type="submit" in button which led to refresh in
jquery fetching data there are many options below given is one of
them.
Use latest version of jquery cdn for using closest and find based functions. https://cdnjs.com/libraries/jquery
$(".returnItem").click(function(){
var row = $(this).parent().prev().prev().children().val();
alert(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form method="post" id="assignOaForm" name="assignOaForm">
<div class="container-fluid">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Part Number</th>
<th scope="col">Name of Item</th>
<th scope="col">Description</th>
<th scope="col">Quantity</th>
<th scope="col">New Quantity</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>xxxxxxxxxxx</td>
<td>name1</td>
<td>description1</td>
<td>10</td>
<input class="form-control" type="number" class="oldQty" name="oldQty" value="10" hidden readonly>
<td><input class="form-control" type="number" class="newQty" name="newQty"></td>
<td><button type="button" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="button" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>yyyyyyyyyy</td>
<td>name2</td>
<td>description2</td>
<td>20</td>
<input class="form-control" type="number" class="oldQty" name="oldQty" value="20" hidden readonly>
<td><input class="form-control" type="number" class="newQty" name="newQty"></td>
<td><button type="button" name="addItem" class="btn btn-success addItem" >Add <i class="fas fa-plus"></i></button></td>
<td><button type="button" name="returnItem" class="btn btn-info returnItem" >Return <i class="fas fa-undo-alt"></i></button></td>
</tr>
</tbody>
</table>
</div>
</form>

How to show "No record(s) found" if I search that is not in the table?

I would like show "No Record(s) Found" if I search something that is not on the table. Can someone show me a javascript code on how can I achieve that? I am not using any plugins cause I am not familiar with those.
<table class="table table-bordered table-hover">
<thead class="table-light">
<tr>
<th scope="col">Image</th>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
<th scope="col">QR Code</th>
<th colspan="2" scope="col"></th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr id="noRecordTR" class='notfound'>
<td colspan='7'>No record found</td>
</tr>
</tbody>
</table>
This is my HTML file where the table is located...
<script src="__assets/js/jquery-3.5.1.min.js"></script>
<script src="__assets/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
And this is my javascript file. I know I have to put some js but I don't know what I am going to put. Thank you.

So check to see any rows are visible after hiding them
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
$("#noRecordTR").toggle(!$("#myTable tr:visible").length);
});
});
.notfound {
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myInput" />
<table class="table table-bordered table-hover">
<thead class="table-light">
<tr>
<th scope="col">Image</th>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
<th scope="col">QR Code</th>
<th colspan="2" scope="col"></th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>100</td>
<td>QR</td>
<td width="30px"><a class="btn btn-primary btn-sm" href="#" role="button">Details</td>
<td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>
</tr>
<tr id="noRecordTR" class='notfound'>
<td colspan='7'>No record found</td>
</tr>
</tbody>
</table>

Bootstrap collapse with change data in laravel

This is my table code and data view but problem is when i click particular view data show same, not change...Like I click first row, its show data but when i click second row same data show, how can i change data view in foreach loop? I am little bit stuck here
<table id="dtBasicExample" class="table table-striped table-bordered table-sm table table-condensed" cellspacing="0" width="100%" style="border-collapse:collapse;">
<thead>
<tr>
<th class="th-sm">Sport Id</th>
<th class="th-sm">Gender</th>
<th class="th-sm">Location</th>
<th class="th-sm">Country</th>
<th class="th-sm">State</th>
<th class="th-sm">City</th>
<th class="th-sm">Action</th>
</tr>
</thead>
<tbody>
#foreach ($challenges as $challenge)
<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
<td><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button></td>
<td>{{$challenge->c_sport_id}}</td>
<td>{{$challenge->c_gender_id}}</td>
<td>{{$challenge->c_location}}</td>
<td>{{$challenge->c_country_id}}</td>
<td>{{$challenge->c_state_id}}</td>
<td>{{$challenge->c_city_id}}</td>
<div colspan="12" class="hiddenRow"><div class="accordian-body collapse" id="demo1">
sport{{$challenge->c_sport_id}}
gender{{$challenge->c_gender_id}}
location{{$challenge->c_location}}
country{{$challenge->c_country_id}}
state{{$challenge->c_state_id}}
city{{$challenge->c_city_id}}
date{{$challenge->c_date}}
desc{{$challenge->c_desc}}
time{{$challenge->c_time}}
invite{{$challenge->c_invite}}
refree{{$challenge->c_refree_id}}</div>
<td><a rel="tooltip" title="" class="btn btn-simple btn-danger btn-icon table-action remove" href="javascript:void(0)" data-original-title="Remove"><i class="ti-pencil"></i></a>
<a rel="tooltip" title="" class="btn btn-simple btn-danger btn-icon table-action remove" href="javascript:void(0)" data-original-title="Remove"><i class="ti-close"></i></a>
</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<th>sport_id
</th>
<th>gender_id
</th>
<th>location
</th>
<th>country
</th>
<th>state
</th>
<th>city
</th>
<th>action
</th>
</tr>
</tfoot>
</table>

Your problem is that you give each element a same id and it doesn't work so, you should write your code like below:
<table id="dtBasicExample" class="table table-striped table-bordered table-sm table table-condensed" cellspacing="0" width="100%" style="border-collapse:collapse;">
<thead>
<tr>
<th class="th-sm">Sport Id</th>
<th class="th-sm">Gender</th>
<th class="th-sm">Location</th>
<th class="th-sm">Country</th>
<th class="th-sm">State</th>
<th class="th-sm">City</th>
<th class="th-sm">Action</th>
</tr>
</thead>
<tbody>
#foreach ($challenges as $challenge)
<tr data-toggle="collapse" data-target="#demo{{$challenge->id}}" class="accordion-toggle">
<td><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button></td>
<td>{{$challenge->c_sport_id}}</td>
<td>{{$challenge->c_gender_id}}</td>
<td>{{$challenge->c_location}}</td>
<td>{{$challenge->c_country_id}}</td>
<td>{{$challenge->c_state_id}}</td>
<td>{{$challenge->c_city_id}}</td>
<div colspan="12" class="hiddenRow"><div class="accordian-body
collapse" id="demo{{$challenge->id}}">
sport{{$challenge->c_sport_id}}
gender{{$challenge->c_gender_id}}
location{{$challenge->c_location}}
country{{$challenge->c_country_id}}
state{{$challenge->c_state_id}}
city{{$challenge->c_city_id}}
date{{$challenge->c_date}}
desc{{$challenge->c_desc}}
time{{$challenge->c_time}}
invite{{$challenge->c_invite}}
refree{{$challenge->c_refree_id}}</div>
<td><a rel="tooltip" title="" class="btn btn-simple btn-danger btn-icon table-action remove" href="javascript:void(0)" data-original-title="Remove"><i class="ti-pencil"></i></a>
<a rel="tooltip" title="" class="btn btn-simple btn-danger btn-icon table-action remove" href="javascript:void(0)" data-original-title="Remove"><i class="ti-close"></i></a>
</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<th>sport_id
</th>
<th>gender_id
</th>
<th>location
</th>
<th>country
</th>
<th>state
</th>
<th>city
</th>
<th>action
</th>
</tr>
</tfoot>
</table>

you gives same id in data-target and id attribute in collapse div change div id with every new row
#foreach ($challenges as $key=>$challenge)
<tr data-toggle="collapse" data-target="#demo{{$key}}" class="accordion-toggle">
<td><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button></td>
<td>{{$challenge->c_sport_id}}</td>
<td>{{$challenge->c_gender_id}}</td>
<td>{{$challenge->c_location}}</td>
<td>{{$challenge->c_country_id}}</td>
<td>{{$challenge->c_state_id}}</td>
<td>{{$challenge->c_city_id}}</td>
<div colspan="12" class="hiddenRow">
<div class="accordian-body collapse" id="demo{{$key}}">
sport{{$challenge->c_sport_id}}
gender{{$challenge->c_gender_id}}
location{{$challenge->c_location}}
country{{$challenge->c_country_id}}
state{{$challenge->c_state_id}}
city{{$challenge->c_city_id}}
date{{$challenge->c_date}}
desc{{$challenge->c_desc}}
time{{$challenge->c_time}}
invite{{$challenge->c_invite}}
refree{{$challenge->c_refree_id}}
</div>
</div>
<td><a rel="tooltip" title="" class="btn btn-simple btn-danger btn-icon table-action remove" href="javascript:void(0)" data-original-title="Remove"><i class="ti-pencil"></i></a>
<a rel="tooltip" title="" class="btn btn-simple btn-danger btn-icon table-action remove" href="javascript:void(0)" data-original-title="Remove"><i class="ti-close"></i></a>
</td>
</tr>
#endforeach

Angular ng-repeat doesn't show items

I have worked with angularjs before but for some reason I cannot seem to get it to iterate through my array.
If I look in browser's console I can see that its not empty
Here is my code.
AngularJS
$scope.Clients = [];
$scope.LoadClients = function () {
$.get('/Client/GetClientList').then((d) => {
angular.copy(d.results, $scope.Clients);
console.log($scope.Clients);
$("#clientTable").DataTable();
});
};
HTML
<table class="table table-bordered" id="clientTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Active</th>
<th>Nr. Branches</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="client in Clients">
<td ng-bind="client.Name"></td>
<td class="text-center" ng-bind="client.Active"></td>
<td class="text-center" ng-bind="client.Branches.length" ng-click="ViewBranches($index)"></td>
<td class="text-center">
<div class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-primary btn-xs" ng-click="ViewClient($index)">
<span class="fa fa-eye"></span>
</button>
<button type="button" class="btn btn-warning btn-xs" ng-click="ViewBranches($index)">
<span class="fa fa-list"></span>
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="DeleteClient($index)">
<span class="fa fa-trash"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>

How to use Bootstrap Datatables in Meteor JS

I used blaze templates in my meteor project. I coded all tables in blaze templates.
used Meteor/easy search package to search table data. and use kuronin pagination for the subscription base pagination.
Now I want to covert that tables to the data tables. What is the best way to do it?
This is my code base.
<table class="table table-hover am-customers-table-2" id="mytable">
<thead>
<tr>
<th width="20%"><label>Customer Name</label></th>
<th width="15%"><label>Phone Number</label></th>
<th width="35%"></th>
<th width="5%"></th>
<th width="10%"><label>Actions</label></th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
<!-- {{#EasySearch.Each index=searchCustomersIndex }} -->
{{#each documents}}
<tr style="{{#if flagStatus}}background-color: #FB299D33;{{/if}}">
<td>
<div class="single-line-list-item">
<span class="number">{{getFirstLettersOfTheName name}}</span>
<div class="data">
<span>{{name}}</span>
</div>
</div>
</td>
<td>
<span>{{number}}</span>
</td>
<td>
</td>
<td>
</td>
<td>
{{#if flagStatus}}
<button class="btn btn-sm btn-success markAsFlag" style="float: left">UnFlag</button>
{{else}}
<button class="btn btn-sm btn-danger customerMarkAsFlag" style="float: left">Flag</button>
{{/if}}
</td>
<td>
<button class="btn btn-sm btn-default" style="float: left">View Profile</button>
</td>
</tr>
<!-- {{/EasySearch.Each}} -->
{{/each}}
</tbody>
</table>

Can't you simply initialise the dataTable in .onRendered like so:
Template.onRendered(function () {
this.$('table.table').dataTable();
});