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
Related
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>
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>
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>
I have the following table in my HTML page, I'm a newbie to Jquery
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Start Date</th>
<th>Severity</th>
<th>Edit Data</th>
</tr>
</thead>
<tbody id="myTable">
<tr style="display: table-row;">
<td>New Rule</td>
<td>New Rule</td>
<td>2017-04-04</td>
<td>High</td>
<td>
<button class="btn btn-primary btn-sm editBtn">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
Edit
</button>
<button onclick="window.location ="/EmployeeSpringMVC/delRule/5"" data-method="delete" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
Delete
</button>
</td>
</tr>
</tbody>
</table>
As you can see there is an edit button I can write a function to recognize clicks to this button as given below
$('.editBtn').click(function(){
alert("test");
});
I also need the data in the particular row for some processing in the function. How can I get this data from the table row. Please feel free to suggest if there is a better way.
I saw the question here but I did not understand this statement of the answer.
var id = $(this).attr('id');
How is the id passed to the function. What specifies the id in this.
<input id="btn" type="button" value="click" />
Because you probably need all <td> in row, except current one I would suggest to use siblings() method of closest <td>:
$('.editBtn').click(e => {
e.preventDefault();
const $td = $(e.target).closest('td');
const fields = Array.from($td.siblings('td').map((i, e) => $(e).text()));
console.log(fields);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Start Date</th>
<th>Severity</th>
<th>Edit Data</th>
</tr>
</thead>
<tbody id="myTable">
<tr style="display: table-row;">
<td>New Rule</td>
<td>New Rule</td>
<td>2017-04-04</td>
<td>High</td>
<td>
<button class="btn btn-primary btn-sm editBtn">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
Edit
</button>
<button onclick="window.location ="/EmployeeSpringMVC/delRule/5"" data-method="delete" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
Delete
</button>
</td>
</tr>
</tbody>
</table>
I'm trying to sort data in jQuery by a specific attribute like following:
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title"><h4><i class="fa fa-user" style="text-align:center"></i> <span>Username</span></h4> </th>
<th></th>
<th class="column-title"> <h4><span class="glyphicon glyphicon-tasks salesClick" aria-hidden="true"></span></h4></th>
<th class="column-title"><h4><i class="fa fa-star feedbackClick"></i></h4></th>
</tr>
</thead>
<tbody class="testWrapper">
#foreach (var item in ViewBag.rezultati)
{
<tr class="test" sale=#item.SaleNumber feedback=#item.Feedback>
<td>
#item.StoreName
</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="#item.StoreName" data-original-title="Analyze competitor">
<i class="fa fa-bar-chart-o"></i>
</button>
</td>
<td>
<b>
#item.SaleNumber
</b>
</td>
<td><b>#item.Feedback</b></td>
</tr>
}
</tbody>
</table>
And this is the code I'm currently using to sort the data, but it doesn't works as I want it to:
$(".feedbackClick").click(function () {
var $wrapper = $('.testWrapper');
$wrapper.find('.test').sort(function (a, b) {
return +a.feedback - +b.feedback;
})
.appendTo($wrapper);
});
This just sorts 1 item in the whole table (or something, I'm not really sure?)
Can someone help me out with this?
Edit: Here is the rendered tr tag:
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title">
<h4><i class="fa fa-user" style="text-align:center"></i> <span>Username</span></h4> </th>
<th></th>
<th class="column-title">
<h4><span class="glyphicon glyphicon-tasks salesClick" aria-hidden="true"></span></h4></th>
<th class="column-title">
<h4><i class="fa fa-star feedbackClick"></i></h4></th>
</tr>
</thead>
<tbody class="testWrapper">
<tr class="test" sale="0" feedback="349">
<td>kansascitykittygirl</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="kansascitykittygirl" data-original-title="Analyze competitor"><i class="fa fa-bar-chart-o"></i></button>
</td>
<td>
<b>0</b>
</td>
<td><b>349</b></td>
</tr>
<tr class="test" sale="10" feedback="14250">
<td>fancaveidaho</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="fancaveidaho" data-original-title="Analyze competitor"><i class="fa fa-bar-chart-o"></i></button>
</td>
<td><b>10</b></td>
<td><b>14250</b></td>
</tr>
</tbody>
</table>
The problem is a.feedback and b.feedback are not getting feedback attribute's value. You can use $(a).attr('feedback') and $(b).attr('feedback') instead like following.
$(".feedbackClick").click(function() {
var $wrapper = $('.testWrapper');
$wrapper.find('.test').sort(function(a, b) {
return +$(b).attr('feedback') - +$(a).attr('feedback');
}).appendTo($wrapper);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title">
Title
</th>
</tr>
</thead>
<tbody class="testWrapper">
<tr class="test" feedback="1">
<td>1111</td>
</tr>
<tr class="test" feedback="3">
<td>3333</td>
</tr>
<tr class="test" feedback="2">
<td>2222</td>
</tr>
</tbody>
</table>
<button class="feedbackClick">Sort</button>