Hi I am having a piece of code. Here I am toggling my table based on the class name which I have hardcoded over here. I want to pass my class name as a variable in order to toggle it.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function alok(){
$(".b:not(:first)").toggle();
}
</script>
</head>
<body>
<table>
<tr class="b" onclick=alok()><td>qw</td></tr>
<tr class="b"><td>alok</td></tr>
<tr class="b"><td>verma</td></tr>
<tr class="c" onclick=alok()><td>qw</td></tr>
<tr class="c"><td>alok</td></tr>
<tr class="c"><td>verma</td></tr>
</table>
</body>
</html>
Thanks guys for looking into it... anyways I solved it.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function alok(obj){
var s= $(obj).attr('class');
$("."+s+":not(:first)").toggle();
}
</script>
</head>
<body>
<table>
<tr class="b" onclick=alok(this)><td>qw</td></tr>
<tr class="b"><td>alok</td></tr>
<tr class="b"><td>verma</td></tr>
<tr class="c" onclick=alok(this)><td>qw</td></tr>
<tr class="c"><td>alok</td></tr>
<tr class="c"><td>verma</td></tr>
</table>
</body>
</html>
You should make use of jQuery here.
$(document).on('click', 'tr', function () {
var elemClass = $(this).attr('class');
$('.' + elemClass + ':not(:first)').toggle();
});
I've wrote a fiddle - check it out.
http://jsfiddle.net/Wc5km/
As you're including jQuery in your document, it'd be a shame not to make use of it. Cleaner, more readable and it gets rid of that ugly inline onclick!
Related
Please help me! Why is bootstrap not loading the classes?
Here's my code which is just a table and a simple button, yet no classes are applied
<!DOCTYPE html>
<html>
<head>
<title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</title>
</head>
<body>
<table class="table" id="table">
<thead>
<tr>
<th>Order ID</th>
<th>TX ID CxPay</th>
<th>TX ID IY</th>
<th>Amount</th>
<th>Class</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
</tr>
</tbody>
</table>
<button class="btn btn-success">asasa</button>
<script>
$(document).ready(function() {
$('#table').DataTable();
} );
</script>
</body>
</html>
Neither bootstrap nor datatables is working. What am I missing here?
Any help is appreciated!
You are importing the script inside <title> that's not correct. In <title> only text is allowed describing your page's title. Place your <script> and <link> above the </head>
All your included files are in your <title>.
You have to write :
<head>
<title>My Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>
Am binding islamic date as date picker to text box , but when writing that inside of ng repeat its not working
my code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="Scripts/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script>
<link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet" />
</head>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">
<table>
<tr ng-repeat="r in rvm">
<td>
<input type="text" id="txtHijriDate" ng-model="r.Date" />
</td>
</tr>
</table>
</div>
</body>
</html>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', function ($scope) {
$scope.rvm = [];
$('#txtHijriDate').calendarsPicker({
calendar: $.calendars.instance('islamic'),
});
});
</script>
if i remove `ng-repeat="r in rvm" it is working but i want that date picker in ng repeat
Your code puts 1 (and only 1) calendar on the element with ID txtHijriDate
When you use ng-repeat, you create multiple elements with the same ID
You need to add
$('#txtHijriDate').calendarsPicker({
calendar: $.calendars.instance('islamic'),
});
Code in your JavaScript at every creation of element. And I’ll suggest to map “id” also to have ID dependent on your elements.
Error: Calendar binding code is executing before controls(input box) load inside ng-repeat.
Solution: Use ng-bind directive to bind calendar on controls.
See the working demo below:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script>
<link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet" />
</head>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">
<table>
<tr ng-repeat="i in [1, 2,3,4,5] track by $index">
<td>
<input type="text" ng-
ng-bind="bindDate('calendar-control'+$index)" id="calendar-control{{$index}}"
model="rvm[1].Date" />
</td>
</tr>
</table>
</div>
</body>
</html>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', function ($scope) {
$scope.rvm = [];
$scope.bindDate=function(id){
$('#'+id).calendarsPicker({
calendar: $.calendars.instance('islamic'),
});
}
});
</script>
I am using below code to populate data from Parse api into table using Angularjs and bootstrap.But the Javascript in which i defined the controller is not executing. The html code is given below.
index.js
<!DOCTYPE html>
<html data-ng-app="parseApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body >
<div class= "container" data-ng-controller="ParseController" >
<table class="table" >
<thead>
<tr>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="temp in user">
<td>{{temp.email}}</td>
<td>{{temp.phone}}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var parse = angular.model('parseApp',[]);
function ParseController($scope, $http)
{
$http({method : 'GET',url :'https://api.parse.com/1/classes/User',
headers: {'X-Parse-Application-Id': 'XXXXXXX',
'X-Parse-REST-API-Key':'XXXXXX',
}}).success(function(data,status) {
console.log(data);
$scope.user = data;
}).error(function(data,status)
{
}
parse.controller('ParseController',ParseController);
}
</script>
</body>
</html>
You have a syntax error
.error(function(data,status)
{
});
Also, it is angular.module, not angular.model
I think the syntax error is in the error handler:
.error(function(data,status)
{
});
I would like to export a HTML table to XLS and at the same time retain all formatting.
The following code seems to be working, except that the hilight is lost on export. How do I keep it in place?
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id='data'>
<table border='1'>
<tr>
<td>
<strong>Greeting</strong>
</td>
<td>
<strong>Message</strong>
</td>
</tr>
<tr>
<td>
Hello
</td>
<td>
World. <mark>I am hilighted!</mark>
</td>
</tr>
</table>
</div>
<script type='text/javascript'>
$(document).ready(function()
{
$("#btnExport").click(function(e)
{
var path = 'data:application/vnd.ms-excel,' + encodeURIComponent($('#data').html());
window.open(path);
e.preventDefault();
});
});
</script>
<input type='button' id='btnExport' value='Export as XLS'>
</body>
To the best of my knowledge, only inline CSS on the table elements will export properly.
So, if you had style="background-color: yellow" on a <td>, the export file would have a yellow cell, but I don't believe spans, marks or inline divs carry their CSS through at all.
<script>
alert(document.getElementById('a'));
</script>
<html>
<table>
<tr>
<td id='a' class="test">test</td>
</tr>
</table>
</html>
I tried this but get the "null" as a result.
anyone can help?
Thanks~
Try this
<html>
<table>
<tr>
<td id='a' class="test">test</td>
</tr>
</table>
<script>
alert(document.getElementById('a'));
</script>
</html>
have script tag below the <td>. Null is because you are trying to have a which is not there when script gets executed.
<html>
<head>
<script>
var readyStateCheckInterval = setInterval(function() {
if (document.readyState === "complete") {
alert(document.getElementById('a'));
clearInterval(readyStateCheckInterval);
}
}, 10);
</script>
</head>
<body>
<table>
<tr>
<td id='a' class="test">test</td>
</tr>
</table>
</body>
</html>
The document.readyState is a property built into all browsers to check if the page has loaded or not.
More info about the readyState property:
Opera
Mozilla
Internet Explorer