I want to get all tr id and register it to jQuery array,
this is my table code:
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1"><td></td>
<tr id="2"><td></td>
</tbody>
</table>
</div>
How to get that all id and assign them to jQuery array?
I want to use it for check what value is exist in table row?
So what I want is get all tr id and assign them to jQuery array.
Iterate over tr in tbody and push it to an array
var arr = [];
$("#tbodytmpitem tr").each(function() {
arr.push(this.id);
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1">
<td></td>
<tr id="2">
<td></td>
</tbody>
</table>
</div>
Use .map() to iterate over all the tr and return their IDs. Then use $.makeArray() to convert the result into an array.
var array = $.makeArray($('tbody tr[id]').map(function() {
return this.id;
}));
console.log(array);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1">
<td></td>
<tr id="2">
<td></td>
</tbody>
</table>
</div>
Related
I am trying to work out how to update the value of the table cell for each row using jQuery.
I basically update the td#11_p value from the table, but it's not updated. I tried following jQuery,
$('#test').click(function() {
var oldprirce = $("#11_p").val();
$("#11_p").val(+(oldprirce) + +(15));
jQuery("#PDList").trigger("liszt:updated");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="pdsDetails" border=" 1px solid black" class="table table-bordered table-striped datatable dt-responsive nowrap" style="width: 100%; ">
<thead>
<tr>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody id="PDList">
<tr id="11_row">
<td>PARACHUTE HAIR OIL 50ml</td>
<td id="11_q">1</td>
<td id="11_p">20</td>
</tr>
<tr id="12_row">
<td>HAIR OIL 50ml</td>
<td id="12_q">2</td>
<td id="12_p">30</td>
</tr>
</tbody>
</table>
<button id="test">change</button>
https://jsfiddle.net/SathishNcc/1dusLhrv/16/
Only form control elements have a value property. td elements just have text or HTML content which can be read and updated.
Given your goal of wanting to add 15 to the current integer in the cell you can provide a function to text() which accepts the current content as a string argument, convert it to a float (as it's a price) and then add 15 to it before returning it to the function for it to update the DOM. Try this:
$('#test').click(function() {
$("#11_p").text((i, t) => parseFloat(t) + 15);
jQuery("#PDList").trigger("liszt:updated");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="pdsDetails" border=" 1px solid black" class="table table-bordered table-striped datatable dt-responsive nowrap" style="width: 100%; ">
<thead>
<tr>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody id="PDList">
<tr id="11_row">
<td>PARACHUTE HAIR OIL 50ml</td>
<td id="11_q">1</td>
<td id="11_p">20</td>
</tr>
<tr id="12_row">
<td>HAIR OIL 50ml</td>
<td id="12_q">2</td>
<td id="12_p">30</td>
</tr>
</tbody>
</table>
<button id="test">change</button>
You could change $("#11_q").val(); to $("#11_q").html();
I have html theat I want to use in angularjs controller controller. My problem is to escape the html in the angularjs controller. Here is my snippet
function($scope) {
$scope.data= <table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>$rootScope.firstname</td>
<td>$rootScope.lastname</td>
<td>#mdo</td>
</tr>
<tr>
<td>2</td>
<td>$rootScope.firstname1</td>
<td>$rootScope.lastname1</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td>$rootScope.firstname2</td>
<td>$rootScope.lastname2</td>
<td>#twitter</td>
</tr>
</tbody>
</table>;
how can I pass the table html and the root scope data into scope.data variable
Just concatenate $rootScope fields then append it to any html div element
function($scope) {
$scope.data= '<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>'+$rootScope.firstname+'</td>
<td>'+$rootScope.lastname+'</td>
<td>#mdo</td>
</tr>
<tr>
<td>2</td>
<td>'+$rootScope.firstname1+'</td>
<td>'+$rootScope.lastname1+'</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td>'+$rootScope.firstname2+'</td>
<td>'+$rootScope.lastname2+'</td>
<td>#twitter</td>
</tr>
</tbody>
</table>';
EDIT:
var app=angular.module("testProject",[]);
app.controller("TestController", function($scope, $rootScope) {
$rootScope.firstname="firstname";
$rootScope.lastname="lastname";
$rootScope.firstname1="firstname1";
$rootScope.lastname1="lastname1";
$rootScope.firstname2="firstname2";
$rootScope.lastname2="lastname2";
$scope.data= '<table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr></thead> <tbody> <tr> <td>1</td><td>'+$rootScope.firstname+'</td><td>'+$rootScope.lastname+'</td><td>#mdo</td></tr><tr> <td>2</td><td>'+$rootScope.firstname1+'</td><td>'+$rootScope.lastname1+'</td><td>#fat</td></tr><tr> <td>3</td><td>'+$rootScope.firstname2+'</td><td>'+$rootScope.lastname2+'</td><td>#twitter</td></tr></tbody> </table>';
$("#data_table").append($scope.data);
});
<html ng-app="testProject">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-controller="TestController" id="data_table"></div>
</html>
Save it as string like this:
$scope.data='<html><div></div></html>'
Then when you want to render it use ng-bind-html like this:
<div>
<p ng-bind-html="data"></p>
</div>
So, I have a table with update button, and I want to be able to fetch a column from the row button was clicked on.
Below is the html code for table
<table class="table table-hover" style="width: 99%">
<thead class="thead-dark" align="center">
<tr>
<th>ID</th>
<th>Trainee Class</th>
<th>Start Date</th>
<th>Edit</th>
<th>Trainees</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td class="nr">J001</td>
<td>Java Stream</td>
<td>01-April-2018</td>
<td><button onclick="updateData()">Update</button>
<button>Remove</button></td>
<td><button>View</button></td>
</tr>
<table>
So, when I click update, i want to fetch "J001" (first column of the update button row).
I tried below, but it's not fetching.
function updateData(){
var $item = $(this).closest("tr")
.find(".nr")
.text();
alert($item);
}
Any help or suggestion will be appreciated.
You have to pass this in your update function call,
Your Html should be,
<table class="table table-hover" style="width: 99%">
<thead class="thead-dark" align="center">
<tr>
<th>ID</th>
<th>Trainee Class</th>
<th>Start Date</th>
<th>Edit</th>
<th>Trainees</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td class="nr">J001</td>
<td>Java Stream</td>
<td>01-April-2018</td>
<td><button onclick="updateData(this)">Update</button>
<button>Remove</button></td>
<td><button>View</button></td>
</tr>
<table>
Jquery function should be,
function updateData(e){
var $item = $(e).closest("tr")
.find("td:first")
.text();
alert($item);
}
I'm using the jQuery live filter plugin to make an instant search over a entire table. The plugin works fine but it filters by cell and I'd like to search for an entire row (tr) match instead of just a cell.
HTML:
<h2 class="sub-header">List of Enabled Alarms</h2>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search">
</div>
<div class="table-responsive">
<table class="table table-striped" id="alarm-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Due Date</th>
<th>Creation Date</th>
<th>Frequency</th>
<th>Enabled</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>60</td>
<td>Alarm dev test</td>
<td>29-12-2015</td>
<td>28-12-2015</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
<tr>
<td>61</td>
<td>Testing email</td>
<td>05-01-2016</td>
<td>04-01-2016</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
</tbody>
</table>
JAVASCRIPT:
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filterChildSelector: 'tr'
});
</script>
The result of this code is partial row information. If I write a it returns all cells that match but not entire rows as I expected. I'd like to search only by column name if possible.
As per this plugin you can pass filter funtion for matching elements. So try below code.
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filter: function(el, val){
return $(el).find('td:eq(1)').text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
}
});
</script>
Or better if you could give any class name to your cell containing alarm name. In that case your html looks like :
<h2 class="sub-header">List of Enabled Alarms</h2>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search">
</div>
<div class="table-responsive">
<table class="table table-striped" id="alarm-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Due Date</th>
<th>Creation Date</th>
<th>Frequency</th>
<th>Enabled</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>60</td>
<td class="alarmName">Alarm dev test</td>
<td>29-12-2015</td>
<td>28-12-2015</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
<tr>
<td>61</td>
<td class="alarmName">Testing email</td>
<td>05-01-2016</td>
<td>04-01-2016</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
</tbody>
</table>
and use below script :
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filter: function(el, val){
return $(el).find('.alarmName').text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
}
});
</script>
How to find which th child has the class 'nosort' for the table with 'normal-sort-table' class using jquery ? I want to alert column number of th with 'nosort' class.
<table class="normal-sort-table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th class="nosort">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>mark246</td>
</tr>
</tbody>
</table>
<script>
$( document ).ready(function() {
if ( $('.normal-sort-table tr th').hasClass( "nosort" ) ) {alert( 'column-number-with-nosort-class-alert-here' )}
})
</script>
you can use jq .index() method:
$('.normal-sort-table tr th.nosort').index()
alert($("th").index($(".nosort")));
If you want to exact column number then you have write
alert($('th.nosort').index()+1);
becuase index starting from zero.
alert($('th.nosort').index());
alert($('th.nosort').index()+1);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="normal-sort-table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th class="nosort">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>mark246</td>
</tr>
</tbody>
</table>