I have the following code, taken from W3schools,but now I need to fetch the values that are present in a table named, 'create_table' in my 'firstSchema' Database. Kindly help me by suggesting what changes should be made to the code, in order to get it to display the contents on my table.
<!DOCTYPE html>
<html >
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers_mysql.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
your code seems fine for actually displaying something but obviously you will need to modify your ng-repeat to reflect the data you are getting from your database. I think what you are missing is the server side aspect of the app, you need to replace the call to the w3schools endpoint with your own endpoint and in there you can query your database and return whatever you want.....
$http.get("yourappsomewhere/query_database_in_here.php")
.then(function (response) {$scope.yourdata = response.data;});
Related
Trying to run a function in a clientside controller file using ng-click on a button in my HTML. Getting nothing and not sure why. All help appreciated.
HTML
<body ng-controller="CriminalsCtrl as criminals">
<h1>Infamous Criminals</h1>
<section>
<ul id="criminals">
<li ng-repeat="criminals in criminals.criminalArray">
<strong>{{criminals.name}}</strong> <em>{{criminals.location}}</em>
<span class="status {{criminals.status}}">{{criminals.status}}</span>
<button ng-click="criminals.criminalsDelete(criminal)" class="delete">X</button>
</li>
</ul>
CONTROLLER
vm.criminalsDelete = criminalsDelete;
function criminalsDelete(criminal) {
console.log('ng-click');
$http.delete(`http://localhost:4000/api/criminals/${criminal.id}`)
.then(() => {
const index = vm.criminalArray.indexOf(criminal);
vm.criminalArray.splice(index, 1);
});
}
The criminals name for the controllerAs syntax is being hidden by the criminals name for the ng-repeat iterator. Use something else for the iterator:
<body ng-controller="CriminalsCtrl as criminals">
<h1>Infamous Criminals</h1>
<section>
<ul id="criminals">
<li ng-repeat="perp ̶c̶r̶i̶m̶i̶n̶a̶l̶s̶ in criminals.criminalArray">
<strong>{{perp.name}}</strong> <em>{{perp.location}}</em>
<span class="status {{perp.status}}">{{perp.status}}</span>
<button ng-click="criminals.criminalsDelete(perp)" class="delete">X</button>
</li>
</ul>
This form of code the controller for delete is best
$scope.delete = function(index){
$scope.Criminals.splice(index,1);
}
I made a Complete CRUD for you for an example, you only have to put the http services.
See the snippet below.
angular.module('App', []).controller('CrudCriminal', ['$scope',
function($scope) {
$scope.Criminals = [
{
name : "walter",
location : "abq",
status : "dead",
editable : false
},
{
name : "Jesse",
location : "nebraska",
status : "out",
editable : false
}
];
$scope.entity = {}
$scope.edit = function(index){
$scope.entity = $scope.Criminals[index];
$scope.entity.index = index;
$scope.entity.editable = true;
}
$scope.delete = function(index){
$scope.Criminals.splice(index,1);
}
$scope.save = function(index){
$scope.Criminals[index].editable = false;
}
$scope.add = function(){
$scope.Criminals.push({
name : "",
location : "",
status : "",
editable : true
})
}
}
]);
/* Styles go here */
body{
margin:10px;
font-size:14px;
font-family:Arial;
}
table{
border:1px solid #333;
border-collapse:collapse;
width:100%;
}
table tr td{
border:1px solid #333;
padding:10px;
}
table tr td span{
cursor:pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/1.2.16/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="App">
<div ng-controller="CrudCriminal">
<h1>Infamous Criminals</h1>
<table>
<tr>
<td>Name</td>
<td>Location</td>
<td>Status</td>
<td><span ng-click="add()">Add New</span></td>
</tr>
<tr ng-repeat="criminal in Criminals">
<td>
<input type="text" ng-model="criminal.name" ng-show="criminal.editable">
<span ng-hide="criminal.editable">{{ criminal.name }}</span>
</td>
<td>
<input type="text" ng-model="criminal.location" ng-show="criminal.editable">
<span ng-hide="criminal.editable">{{ criminal.location }}</span>
</td>
<td>
<input type="text" ng-model="criminal.status" ng-show="criminal.editable">
<span ng-hide="criminal.editable">{{ criminal.status }}</span>
</td>
<td>
<span ng-click="edit($index)" ng-hide="criminal.editable">Edit</span>
<span ng-click="save($index)" ng-show="criminal.editable">Save</span>
<span ng-click="delete($index)"> | Delete</span>
</td>
</tr>
</table>
</div>
</body>
</html>
I have two different tables in my html, and lets assume they all have the same data collection - meaning the rows are representing the same object in the collection. I would like to apply a following functionality: when I hover on the row N in Table 1, it highlights row N in Table 1 and the same row in Table 2. I was able to get it done, however I had to manipulate my collection - I added .hover property on object, and treated it as a flag on mouse enter and mouse leave, and added specific styles according. However, I know this should not be done this way - as it breaks the two way data binding rule.
Any ideas on how I can achieve that without manipulating my data?
You could achieve this by using little jQuery:
var tr_class;
$('.table1 tr').hover(
function(){
tr_class = $('this').attr('class');
$('this').addClass('highlightBg');
$('.table2 ' + tr_class).addClass('highlightBg');
},
function(){
$(this).removeClass('highlightBg');
$('table2 ' + tr_class).removeClass('highlightBg');
});
$('.table2 tr').hover(
function(){
tr_class = $('this').attr('class');
$('this').addClass('highlightBg');
$('.table1 ' + tr_class).addClass('highlightBg');
},
function(){
$(this).removeClass('highlightBg');
$('table1 ' + tr_class).removeClass('highlightBg');
});
Both of your table rows need to have a class like a row number for example counting them:
<tr class='1'>...</tr>
<tr class='2'>...</tr>
.highlightBg defines a background-color for highlighted state, in this example .table1 and .table2 are the classes of the tables.
Think that should do the work.
is this what you want.but I used bit jquery with this.hope this will help to you.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
div.tableone{
margin:50px;
}
div.tabletwo{
margin: 50px;
}
table{
border:1px solid black;
}
table tr th{
width: 200px;
}
table tr td{
text-align: center;
}
.classOne{
background-color: orange;
color: white;
}
</style>
<body>
<h1>table one</h1>
<div class="tableone">
<table border="2">
<thead>
<tr class="trone">
<th>one</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>dataone</td>
<td>datetwo</td>
</tr>
</tbody>
</table>
</div>
<h1>table two</h1>
<div class="tabletwo">
<table border="2">
<thead>
<tr class="trtwo">
<th>Three</th>
<th>Four</th>
</tr>
</thead>
<tbody>
<tr>
<td>datatwo</td>
<td>datethree</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".trone").mouseenter(function(){
$(this).addClass("classOne");
$(".trtwo").addClass("classOne");
});
$(".trone").mouseleave(function(){
$(this).removeClass("classOne");
$(".trtwo").removeClass("classOne");
});
$(".trtwo").mouseenter(function(){
$(this).addClass("classOne");
$(".trone").addClass("classOne");
});
$(".trtwo").mouseleave(function(){
$(this).removeClass("classOne");
$(".trone").removeClass("classOne");
});
});
</script>
</body>
</html>
A solution to the problem, without using jQuery, would be the following:
const table1 = document.getElementsByClassName("table-one")[0];
const table2 = document.getElementsByClassName("table-two")[0];
const table1Rows = table1.querySelectorAll("tr:not(.table-header)");
const table2Rows = table2.querySelectorAll("tr:not(.table-header)");
for (let i = 0; i < table1Rows.length; i++) {
const table1Row = table1Rows[i];
const table2Row = table2Rows[i];
table1Row.addEventListener("mouseover", function(e) {
table1Row.classList.add("hover-class");
table2Row.classList.add("hover-class");
});
table1Row.addEventListener("mouseleave", function(e) {
table1Row.classList.remove("hover-class");
table2Row.classList.remove("hover-class");
});
table2Row.addEventListener("mouseover", function(e) {
table1Row.classList.add("hover-class");
table2Row.classList.add("hover-class");
});
table2Row.addEventListener("mouseleave", function(e) {
table1Row.classList.remove("hover-class");
table2Row.classList.remove("hover-class");
});
}
Here you can see the solution in action: JSFiddle
index.html
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="webQueryApp">
<div ng-controller="TestAppController">
<div class="operationalArea" my-Draggable > click me </div>
</div>
</div>
</body>
</html>
-
style.css
.operationalArea {
background-color: #eeeeee;
height: 100px;
width: 100px;
float: left;
padding: 5px;
}
app.js
var webQueryApp = angular.module("webQueryApp", [ ]);
webQueryApp.directive('myDraggable', function(){
return{
//link start
link: function ($scope, element, attrs) {
element.bind('click', function(event) {
console.log("element clicked and arr is "+attrs.arr);
});
}
//link end
};
});
webQueryApp.controller('TestAppController', function($scope, $http) {
var app = this;
console.log("hello console");
$scope.arr=[1,2,3,4];
});
you can see in plunker
http://plnkr.co/edit/aabS53ZgjKnrXWu1aFtt?p=preview
i want to use controller arr value in custom directive.
but it says undefined. while i am tring i can't have the scope of table.
other wise send me a reference where i can found the solution.
From the plunker you provided, just modify the directive scope property to the follwing
scope: {
data: '=',
}
and you are going to be able to use the array by calling $scope.data
Ok, the title may sound a bit easy or common but my problem is not that easier. I'm working on making a HTML page that displays a database in table rows. A sample code is:
<table>
<tr><td>ABC Hospitals</td></tr>
<tr><td>India</td><td>Contact:9999999999</td></tr>
</table>
<table>
<tr><td>XYZ Blood Bank</td></tr>
<tr><td>NewJersey</td><td>Contact:8888888888</td></tr>
</table>
<table>
<tr><td>ABC Inn</td></tr>
<tr><td>California</td><td>Contact:7777777777</td></tr>
</table>
I have used tables to group data, with each one containing rows to display data. The code gives the following output sample, with the CSS effects added:
Image1 - Sorry, I'm a new user and StackOverflow doesn't allow me to post images.
I'm now in requirement of a 'Find in page' box to search the HTML document for a specific piece of information(say "ABC"). The search must display ONLY the table(s) that contains the query term("ABC"), in our case, hiding ALL other tables which do not contain the search term. I have achieved the sample output by manually editing the HTML, just to more clearly show my requirement. I'm in need of the JScript(or any appropriate) code to achieve the result:
Image2 - Sorry again.
I'm sure somebody here will be able to help me, either provide me some code piece or guiding me to some useful link. Thanks in advance.
-Sriram
var search = document.querySelector('#search');
var database = document.querySelector('#database');
search.addEventListener('input', function (e) {
// Every time the input changes, execute filterMatching.
filterMatching(search.value, database);
});
function filterMatching(value, parent) {
// Get the parent's children into an array
var children = [].slice.call(parent.children);
// Everything is shown by default.
children.forEach(function removeHiddenFromAll(child) {
child.classList.remove('hidden');
});
// Find those who are not matching
children.filter(function findNonMatching(child) {
// the toLowerCase() on both ensures the search is not case sensitive.
return child.textContent.toLowerCase().indexOf(value.toLowerCase()) < 0;
})
// After we found all the non matching, hide them
.forEach(function hideNonMatching(nonMatching) {
nonMatching.classList.add('hidden');
});
}
.hidden {
display: none;
}
<input type="text" id="search" />
<div id="database">
<table>
<tr>
<td>ABC Hospitals</td>
</tr>
<tr>
<td>India</td>
<td>Contact:9999999999</td>
</tr>
</table>
<table>
<tr>
<td>XYZ Blood Bank</td>
</tr>
<tr>
<td>NewJersey</td>
<td>Contact:8888888888</td>
</tr>
</table>
<table>
<tr>
<td>ABC Inn</td>
</tr>
<tr>
<td>California</td>
<td>Contact:7777777777</td>
</tr>
</table>
</div>
Never mind, for some reason, the thing doesn't work when the element are stored as 'var' types. So I modified the code slightly as follows: I created a new function:
function fn_search(){
var phrase = document.querySelector('#search').value;
filterMatching(phrase, document.querySelector('#database'));
}
and called
<input type="text" id="search" oninput="fn_search()" />
The program now works fine.
The complete code is below:
<html>
<head>
<style>
table{
padding: 20px;
margin: 10px;
background: #990030;
color: #fff;
font-size: 17px;
font-weight: bold;
line-height: 1.3em;
border: 2px dashed #9ff;
border-radius: 10px;
box-shadow: 0 0 0 4px #990030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #aa3030;
font-weight: normal;
table-layout: fixed;
width: 325px;
height:75px;
}
th, td {
overflow: hidden;
width: 100px;
}
table.hidden {
display: none;
}
</style>
</head>
<body>
<script>
function fn_search(){
var phrase = document.querySelector('#search').value;
filterMatching(phrase, document.querySelector('#database'));
}
function filterMatching(value, parent) {
// Get the parent's children into an array
var children = [].slice.call(parent.children);
// Everything is shown by default.
children.forEach(function removeHiddenFromAll(child) {
child.classList.remove('hidden');
});
// Find those who are not matching
children.filter(function findNonMatching(child) {
// the toLowerCase() on both ensures the search is not case sensitive.
return child.textContent.toLowerCase().indexOf(value.toLowerCase()) < 0;
})
// After we found all the non matching, hide them
.forEach(function hideNonMatching(nonMatching) {
nonMatching.classList.add('hidden');
});
}
</script>
<input type="text" id="search" oninput="fn_search()" />
<div id="database">
<table>
<tr>
<td>ABC Hospitals</td>
</tr>
<tr>
<td>India</td>
<td>Contact:9999999999</td>
</tr>
</table>
<table>
<tr>
<td>XYZ Blood Bank</td>
</tr>
<tr>
<td>NewJersey</td>
<td>Contact:8888888888</td>
</tr>
</table>
<table>
<tr>
<td>ABC Inn</td>
</tr>
<tr>
<td>California</td>
<td>Contact:7777777777</td>
</tr>
</table>
</div>
</body>
</html>
I have a text and table within another table td tag. That inner table has to be aligned to the top-right corner of the outer table. But in my case,the inner table is aligned to right but not top. There is an unnecessary space between text and inner table.
Any suggestions please?
Here is my code....
<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
body{color:#000000; font-family:Arial,Tahoma,helvetica,sans-serif; font-size:9pt;}
table{ font-family:Arial,Tahoma,helvetica,sans-serif; font-size:9pt;}
tr{ font-family:Arila,Tahoma,helvetica,sans-serif; font-size:9pt;}
.header{background:#D2E5FB; font-family:Arial,Tahoma,helvetica,sans-serif; color:#000000;
padding: 1 1 1 1; border-bottom:1px solid #AEAEAE; border-right:1px solid #AEAEAE;
}
.tableRow{background:#FFFFFF;border-bottom:1px solid #AEAEAE; border-right:1px solid #AEAEAE;padding:3 5 3 0;}
.matches{font-family:Arila,Tahoma,helvetica,sans-serif; font-size:9pt;padding:8 0 8 2;}.ResultTr{}
</style>
<body>
<table style="border:1px solid red;" width="100%" cellpadding="0" cellspacing="2" >
<tr><td class = "matches" colspan=" 7">
<nobr>
<b>Number of Matching Addresses: 165 , Page Numbers</b>
<style>
#Paginator{float:right;margin:0px;}<p>
#Paginator ul{ margin:0px;padding:0px;}
#Paginator ul li{ font-family::Arial,Tahoma,helvetica,sans-serif;font-size:9pt;list-style:none;
float:left;margin:2px;
padding:4px 8px 2px 8px;border:1px solid black; cursor:pointer; }
#Paginator ul li,#PrevPage{display:none;}
</style>
<script>
var ga_pageId = new Array();
function pageNavigate()
{
if(document.getElementById("FromPage"))
{ var fromPage = parseInt( document.getElementById("FromPage").value); }
if(document.getElementById("ToPage"))
{ var toPage = parseInt( document.getElementById("ToPage").value); }
if(fromPage == 1)
{ document.getElementById("PrevPage").style.display="none";}
else
{ document.getElementById("PrevPage").style.display="inline"; }
if(toPage == 4 )
{ document.getElementById("NextPage").style.display="none"; }
else{ document.getElementById("NextPage").style.display="inline"; }
for(var j=0;j<ga_pageId.length;j++)
{
if(document.getElementById(ga_pageId[j]))
{document.getElementById(ga_pageId[j]).style.display="none"}
}
for(var i=fromPage;i<=toPage; i++)
{
var pageId = 'PAGE_'+i;
if(document.getElementById(pageId))
document.getElementById(pageId).style.display="inline"; }
}
function previousPage(){var fromPageEle = document.getElementById("FromPage");var toPageEle = document.getElementById("ToPage");if(fromPageEle && toPageEle){fromPageEle.value = parseInt(fromPageEle.value) - 1;toPageEle.value = parseInt(toPageEle.value) - 1;pageNavigate();}}
function nextPage(){var fromPageEle = document.getElementById("FromPage");
var toPageEle = document.getElementById("ToPage");
if(fromPageEle && toPageEle){fromPageEle.value = parseInt(fromPageEle.value) + 1;toPageEle.value = parseInt(toPageEle.value) + 1; pageNavigate();}}
function pageOver(lv_this){
if (lv_this.selected!='X')
{ lv_this.style.backgroundColor = "#F7F7F7"; }
}
function pageOut(lv_this)
{
if (lv_this.selected!='X')
{ lv_this.style.backgroundColor = "#FFF"; }
}
</script>
<table id="Paginator" style="border:1px solid blue;"><tr><td > <input type="hidden" id="FromPage" value="1"/>
<input type="hidden" id="ToPage" value="4"/> <ul>
<li onClick="previousPage()" id="PrevPage">Prev</li><script> ga_pageId.push('PAGE_1');</script>
<li id="PAGE_1" onMouseOVer="pageOver(this)" onMouseOut="pageOut(this)"> 1 </li>
<li id="PAGE_2" onMouseOVer="pageOver(this)" onMouseOut="pageOut(this)"> 2 </li>
<li id="PAGE_3" onMouseOVer="pageOver(this)" onMouseOut="pageOut(this)">3</li>
<li id="PAGE_4" onMouseOVer="pageOver(this)" onMouseOut="pageOut(this)">4</li>
<li onClick="nextPage()" id="NextPage" style="display:none">Next</li>
</ul>
</td> </tr>
</table>
<script> pageNavigate()</script>
</nobr>
</td>
</tr>
</table>
</body>
</html>
Its better if you use Div tag rather then table.
Use like this
<Div style="float:left;width:20%"></Div>
<Div style="float:left;width:80%"></Div>
Write your desire code inside the div and give width according to your requirement.
If you are designing a form which contain large amout of content then use table.
The quickest fix is probably to modify the styling of the text by making it float to the left, by adding a style attribute to the b tag:
<b style="float: left">Number of Matching Addresses: 165 , Page Numbers</b>
The reason is that the outer table cell contains both this text and an inner table, and the letter is rendered as a block. This means that it starts on a new line. By using floating, you make the text appear to the left of the inner table if it fits there.
A better and more robust approach would be a redesign that uses just one table with two cells in a row. But the context might be more complicated so that such a simple rewrite would not be possible.