I creating an application in phonegap where I am displaying the date of birth details of a person from database w. And details are stored in localstorage.. But when I a trying to display the details inside a table it is not working.. If any body can help .. please help.. I am giving my code below..
</head>
<body onload="onLoad();">
<div class="app">
<label id="naming">Saved Data</label>
<br>
<br>
<table id="myTable" border="1" style="width:100%">
<thead>
<tr>
<th>Full details</th>
</tr>
</thead>
<tr id="first">
<td>First Name</td>
<td id="tbfn">First Name</td>
</tr>
<tr id="middle">
<td>Middle Name</td>
<td ></td>
</tr>
<tr id="last">
<td>Last Name</td>
<td ></td>
</tr>
<tr id="day">
<td>Day of birth</td>
<td></td>
</tr>
<tr id="month">
<td>Month of Birth</td>
<td></td>
</tr>
<tr id="year">
<td>Year of Birth</td>
<td></td>
</tr>
</table>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function onLoad() {
var table = document.getElementById("myTable");
document.getElementById("tbfn").innerHTML = localStorage.getItem('fnm');
}
</script>
</body>
</html>
When you replace localStorage.getItem('fnm') with a simple string, this works perfectly
document.getElementById("tbfn").innerHTML = 'John';
JSFiddle
So, the problem is with the localStorage not being filled in the other page. This means, you must check the value of fnm, e.g.
var fnm = localStorage.getItem('fnm');
console.log('fnm=' + fnm);
and look for errors in the other page, where the value should be set.
Related
I have a HashMap (called test) in the following format: HashMap<String,List<MyClass>>.
I would like to show the items of the HashMap value as expandable titles under which you can find the information of each object of the list.
I have the following code, but what I see in the expanded list is just one row per each title. Actually, the items of the list are overridden by the next one in the for loop.
<tbody>
<tr th:each="element, iterStat : ${test}">
<td data-toggle="collapse" th:attr="data-target=|#demo${iterStat.count}|" th:text="${element.key}">keyvalue</td>
<tr class="accordian-body collapse" th:id="'demo' + ${iterStat.count}" th:each="anews : ${element.value}">
<td th:text="''">Place name</td>
<td th:text="${anews.first_point}">First point</td>
<td th:text="${anews.second_point}">Second point</td>
</tr>
</tr>
</tbody>
How should I correct my code?
Does this do what you want it to do?
<tbody>
<th:block th:each="element, iterStat : ${test}">
<tr>
<td colspan="3" data-toggle="collapse" th:data-target="|.demo${iterStat.count}|" th:text="${element.key}" />
</tr>
<tr th:class="|accordian-body collapse demo${iterStat.count}|" th:each="anews : ${element.value}">
<td th:text="''">Place name</td>
<td th:text="${anews.first_point}" />
<td th:text="${anews.second_point}" />
</tr>
</th:block>
</tbody>
I just updated the verisons of bootstrap and jquery to the latest one and it worked. I used finally the following ones:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
I have a Flask application that takes a bunch of input from the users, processes it and generates a table/matrix of values.
I want to display this table to the user with different colors for different cells. At the time of the table generation I know what color I want the cell to be.
I am using Bootstrap4. Can this be done using Bootstrap?
The class attribute can be used in the table row to get the required colors.
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>ABC</td>
<td>10</td>
</tr>
<tr class="danger">
<td>DEF</td>
<td>20</td>
</tr>
<tr class="info">
<td>GHI</td>
<td>30</td>
</tr>
<tr class="success">
<td>JKL</td>
<td>40</td>
</tr>
<tr class="warning">
<td>MNO</td>
<td>50</td>
</tr>
</tbody>
</table>
In Bootstrap 4, you can give color to the table rows by adding bg classes to the <tr> elements like;
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
Take a look at bootstrap documentation of tables which explains it in detail
This is the way to add color on cells
<!doctype html>
<html lang="en">
<head>
<title>Table Color</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>joe#example.com</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Refs</td>
<td>bo#example.com</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Activeson</td>
<td>act#example.com</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Secondson</td>
<td>sec#example.com</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Angie</td>
<td>angie#example.com</td>
</tr>
<tr class="table-dark text-dark">
<td>Dark</td>
<td>Bo</td>
<td>bo#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
More about table
table documentation bootstrap 4
this question may be duplicate but I did not got solution for my requirement.
I need a help to have fixed/freeze header and few first columns for table inside
the scrollable div element. The data is dynamic as i columns and rows may increase or decrease depends of Data source. Currently it having ~86 rows and ~55 columns. The columns width is dynamic based on data.
My HTML code looks as below.
<html>
<body ng-app="myapp" ng-controller="mycontroller">
<table style="width:100%; height:90%">
<tr>
<td width=3%> </td>
<td>
<table style="width:100%;">
<tr>
<td>Page header</td>
</tr>
<tr><td></td></tr>
</table>
<table style="width:100%; height:90%">
<tr>
<td>
<div ng-style="{'width': twidth + 'px', 'heigth':theight + 'px','overflow-x': 'auto','overflow-y': 'auto'}">
<table>
<thead ng-repeat="h in dummy| limitTo:1">
<tr>
<th ng-repeat="(key, val) in h">
{{key}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="h in dummy">
<td ng-repeat="(key, val) in h">{{val}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I am using the following HTML/Razor to create a details row for when the user clicks the Run App button. The primary row is 4 columns wide, and the details row spans the 4 columns.
Detail Row Hidden
Detail visible
Here the detail row causes the table to expand really weirdly, it's way to large. It's not center either for some reason.
Small Table looks correct
It all looks fine when I reduce the size of the table. It's centered correctly and doesn't look super wide.
This is the HTML and a Fiddle
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-hover table-responsive">
<thead>
<tr>
<th>Components</th>
<th>Name</th>
<th>Description</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data Access,Querying</td>
<td>Basic Querying</td>
<td>Executes a stored procedure, fetching a single result set, without sending data in to the database.</td>
<td>
<button type="button" data-app="5625ad80-a1c7-4dfd-baeb-744d4de5292e" data-vm-required="False" class="btn btn-success">
Run App
</button>
</td>
</tr>
<tr class="">
<td colspan="4">
<div class="container">
<div class="alert alert-info" data-app="5625ad80-a1c7-4dfd-baeb-744d4de5292e">
<div class="container">
<span>
1000 items returned. Only showing the first 10 results.
<table class="table table-responsive">
<tbody>
<tr>
<th>PostalCode</th>
<th>City</th>
<th>AddressLine2</th>
<th>AddressLine1</th>
<th>AddressID</th>
</tr>
<tr>
<td>98011</td>
<td>Both</td>
<td></td>
<td>1970 Napa Ct.</td>
<td>1</td>
</tr>
<tr>
<td>98018</td>
<td>Bothell68</td>
<td></td>
<td>9833 Mt. Dias Blv.686</td>
<td>2</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>7484 Roundtree Drive</td>
<td>3</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>9539 Glenside Dr</td>
<td>4</td>
</tr>
<tr>
<td>85323</td>
<td>Phoenix</td>
<td></td>
<td>1226 Shoe St.</td>
<td>5</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>1399 Firestone Drive</td>
<td>6</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>5672 Hale Dr.</td>
<td>7</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>6387 Scenic Avenue</td>
<td>8</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>8713 Yosemite Ct.</td>
<td>9</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>250 Race Court</td>
<td>10</td>
</tr>
</tbody>
</table>
</span>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Data Access,Querying</td>
<td>Parameterized Query</td>
<td>Executes a stored procedure, fetching a single result set, filtered by a City passed into the stored procedure.</td>
<td>
<button type="button" data-app="544abdf8-3685-4865-84f5-3d8fd132dd75" data-vm-required="True" data-app-name="Parameterized Query" data-toggle="modal" data-target="#appParameters" class="btn btn-success">
Run App
</button>
</td>
</tr>
<tr class="hidden">
<td colspan="4">
<div class="container">
<div class="alert alert-info" data-app="544abdf8-3685-4865-84f5-3d8fd132dd75">
</div>
</div>
</td>
</tr>
</tbody>
</table>
What am I doing wrong with the table that's causing it to not look like the way it does at the smaller Window scale?
Remove container class here and it will work normally.
<div class="container">
<span>
1000 items returned. Only showing the first 10 results.
First i setup jquery, bootstrap libs and then include footable.min.js, footable.paging.js and footable.sorting.min.js files and also setup stylesheets for that.
So, i can't to use sorting as well as pagination on it.
i am not getting any kind of error in console. whereas i able to used data-breakpoints for various devices and it works for me. i don't know how one features is working and another is not. please help me.
html file
<div class="container-fluid">
<div class="page-header">
<table class="footable table table-hover" data-page-size="3" data-page-navigation=".pagination">
<thead>
<tr>
<th data-toggle="true">Name</th>
<th data-breakpoints="xs sm">Birthday</th>
<th data-breakpoints="xs">City</th>
<th>Donation</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sade Morgan</td>
<td>10/03/1990</td>
<td>Ede</td>
<td>$4,653</td>
</tr>
<tr>
<td>Knox Sutton</td>
<td>06/29/1966</td>
<td>Bressoux</td>
<td>$4,563</td>
</tr>
<tr>
<td>Rooney Preston</td>
<td>12/12/2002</td>
<td>Patalillo</td>
<td>$3,222</td>
</tr>
<tr>
<td>Fulton Wilkerson</td>
<td>01/24/1986</td>
<td>Haren</td>
<td>$2,841</td>
</tr>
<tr>
<td>Azalia Long</td>
<td>11/21/1988</td>
<td>Gressoney-Saint-Jean</td>
<td>$4,631</td>
</tr>
<tr>
<td>Erich Burris</td>
<td>10/26/1966</td>
<td>Pulle</td>
<td>$2,519</td>
</tr>
<tr>
<td>Kadeem Sharpe</td>
<td>08/24/1976</td>
<td>Ekeren</td>
<td>$1,440</td>
</tr>
<tr>
<td>Rose Wilcox</td>
<td>11/05/2003</td>
<td>Aparecida de Goiânia</td>
<td>$2,188</td>
</tr>
<tr>
<td>Hu Gibson</td>
<td>02/18/1994</td>
<td>Raigarh</td>
<td>$4,286</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<ul class="pagination"></ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<script>
$(document).ready(function() {
$(".footable").footable();
});
</script>