Change The Border For a Table in Javascript? - javascript

what I want to do is to change the border for a table (#mytable) by a J.S function depends on the value that the user enters (ex: user entered 3 => border="3")
I am using the following code which is existed in an external file called size.js
function chooseBorder (size){
switch (size) {
case "3":
document.getElementById("mytable").style.border = "3";
break;
case "5":
document.getElementById("mytable").style.border = "5";
break;
case "7":
document.getElementById("mytable").style.border = "7";
break;
case "9":
document.getElementById("mytable").style.border = "9";
break;
default:
//make border = 0
document.getElementById("mytable").style.border = "0";
break;
}
}
Then in the HTML I wrote:
<!DOCTYPE html>
<html>
<head>
<title> select a border size </title>
<script type = "text/javascript" src = "size.js" > </script>
<script>
number = window.prompt("Please select a size for table border\n 3(3 pixel border)\n 5(5 pixel border)\n 7(7 pixel border)\n 9(9 pixel border)");
</script>
</head>
<body onload="chooseBorder(number)">
<table id="mytable">
<thead>
<tr>
<th colspan = "4">Northern New Jersey Profit</th>
</tr>
<tr>
<th></th>
<th>April</th>
<th>May</th>
<th>June</th>
</tr>
</thead>
<tbody>
<tr>
<th>Montclair</th>
<td>100</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<th>Clifton</th>
<td>79</td>
<td>80</td>
<td>100</td>
</tr>
<tr>
<th>Newark</th>
<td>100</td>
<td>95</td>
<td>91</td>
</tr>
</tbody>
</table>
</body>
</html>
The Problem is nothing changes on loading the page, something wrong in my code. Thanks :)

Just a minor change but a big impact:
instead of
document.getElementById("mytable").style.border = "3";
use
document.getElementById("mytable").border= 3;
so your function becomes this:
function chooseBorder (size){
switch (size) {
case "3":
document.getElementById("mytable").border= "3";
break;
case "5":
document.getElementById("mytable").border = "5";
break;
case "7":
document.getElementById("mytable").border = "7";
break;
case "9":
document.getElementById("mytable").border = "9";
break;
default:
//make border = 0
document.getElementById("mytable").border = "0";
break;
}
}
and you're good to go

Related

Sort HTML table ignoring articles ("a," "an" "the") just using javascript

I put together an HTML table of books that I need sort ignoring "a," "an," and "the." I also need to ignore non-alphanumeric characters like quotation marks (like if the title is something like [ "Boo": A Collection of Horror Stories ]).
I've found some examples of how to sort out articles from strings. But my table data is hard-coded into the HTML. And for context, I'm working within a CMS and can't use JSON or JQUERY.
Here's the snippet.
<style>
table.sash-table {
}
table.sash-table th {
cursor: pointer;
position: sticky;
top: 0px;
background: white;
}
table.sash-table th, td {
text-align: left;
padding: 16px;
}
table.sash-table tr:nth-child(even) {
background-color: #f2f2f2
}
table.sash-table th:hover {
color:lightgray;
}
</style>
<script>
function sortTable(n) {
const closestTable = event.target.closest("table");
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById(closestTable.id);
switching = true;
// Set the sorting direction to ascending:
dir = "asc";
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// Start by saying: no switching is done:
switching = false;
rows = table.rows;
/* Loop through all table rows (except the
first, which contains table headers): */
for (i = 1; i < (rows.length - 1); i++) {
// Start by saying there should be no switching:
shouldSwitch = false;
/* Get the two elements you want to compare,
one from current row and one from the next: */
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/* Check if the two rows should switch place,
based on the direction, asc or desc: */
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark that a switch has been done: */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
// Each time a switch is done, increase this count by 1:
switchcount ++;
} else {
/* If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again. */
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
<html>
<table id="table-1906-1988" class="sash-table">
<tbody style="height: 500px; display: block; overflow-y: auto;">
<tr>
<th class="year" onclick="sortTable(0)">Year</th>
<th class="title" onclick="sortTable(1)">Title</th>
<th class="authors" onclick="sortTable(2)">Author(s)</th>
</tr>
<tr>
<td>1906</td>
<td>Salt Glazed Stoneware Germany, Flanders, England and the United States</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1906</td>
<td>Tin Enameled Potter: Maiolica, Delft and Other Stanniferous Faience</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1907</td>
<td>Lead glazed pottery, part first (common clays) plain glazed, sgraffito and slip-decorated wares</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1907</td>
<td>Artificial Soft Paste Porcelain: France, Italy, Spain and England</td>
<td>Barber, Edwin Atlee</td>
<tr>
<td>1908</td>
<td>The Maiolica of Mexico</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1910</td>
<td>Hard Paste Porcelain (Oriental): China, Japan, Siam, Korea</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1913</td>
<td>Catalogue of a collection of paintings and some art objects (John G. Johnson Collection - Vol. I-III)</td>
<td>Johnson, John Graver</td>
</tr>
<tr>
<td>1913</td>
<td>The W.P. Wilstach Collection</td>
<td>Bye, Arthur Edwin</td>
</tr>
</table>
Thanks much!
const removedString = string.replace(/^(a|an|the)(\s)/i, '');
This removes any a, an, the at the beginning of the string.
Edit this part of your code
/* Get the two elements you want to compare,
one from current row and one from the next: */
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/* Check if the two rows should switch place,
based on the direction, asc or desc: */
const xValue = x.innerHTML.replace(/^(a|an|the)(\s)/i, '').toLowerCase();
const yValue = y.innerHTML.replace(/^(a|an|the)(\s)/i, '').toLowerCase();
if (dir == "asc") {
if (xValue > yValue) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (xValue < yValue) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
<style>
table.sash-table {
}
table.sash-table th {
cursor: pointer;
position: sticky;
top: 0px;
background: white;
}
table.sash-table th, td {
text-align: left;
padding: 16px;
}
table.sash-table tr:nth-child(even) {
background-color: #f2f2f2
}
table.sash-table .year {
width:5%;
}
}
table.sash-table .authors {
width:17.5%;
}
table.sash-table .title {
width:38.5%;
}
table.sash-table .catalog {
width:12.5%;
}
table.sash-table .fulltext {
width:13.5%;
}
table.sash-table .genre {
width:12.5%;
}
table.sash-table th:hover {
color:lightgray;
}
</style>
<script>
function sortTable(n) {
const closestTable = event.target.closest("table");
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById(closestTable.id);
switching = true;
// Set the sorting direction to ascending:
dir = "asc";
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// Start by saying: no switching is done:
switching = false;
rows = table.rows;
/* Loop through all table rows (except the
first, which contains table headers): */
for (i = 1; i < (rows.length - 1); i++) {
// Start by saying there should be no switching:
shouldSwitch = false;
/* Get the two elements you want to compare,
one from current row and one from the next: */
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/* Check if the two rows should switch place,
based on the direction, asc or desc: */
const xValue = x.innerHTML.replace(/^(a|an|the)(\s)/i, '').toLowerCase();
const yValue = y.innerHTML.replace(/^(a|an|the)(\s)/i, '').toLowerCase();
if (dir == "asc") {
if (xValue > yValue) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (xValue < yValue) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark that a switch has been done: */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
// Each time a switch is done, increase this count by 1:
switchcount ++;
} else {
/* If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again. */
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
<html>
<table id="table-1906-1988" class="sash-table">
<tbody style="height: 500px; display: block; overflow-y: auto;">
<tr>
<th class="year" onclick="sortTable(0)">Year</th>
<th class="title" onclick="sortTable(1)">Title</th>
<th class="authors" onclick="sortTable(2)">Author(s)</th>
</tr>
<tr>
<td>1906</td>
<td>Salt Glazed Stoneware Germany, Flanders, England and the United States</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1906</td>
<td>Tin Enameled Potter: Maiolica, Delft and Other Stanniferous Faience</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1907</td>
<td>Lead glazed pottery, part first (common clays) plain glazed, sgraffito and slip-decorated wares</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1907</td>
<td>Artificial Soft Paste Porcelain: France, Italy, Spain and England</td>
<td>Barber, Edwin Atlee</td>
<tr>
<td>1908</td>
<td>The Maiolica of Mexico</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1910</td>
<td>Hard Paste Porcelain (Oriental): China, Japan, Siam, Korea</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1913</td>
<td>Catalogue of a collection of paintings and some art objects (John G. Johnson Collection - Vol. I-III)</td>
<td>Johnson, John Graver</td>
</tr>
<tr>
<td>1913</td>
<td>The W.P. Wilstach Collection</td>
<td>Bye, Arthur Edwin</td>
</tr>
</table>

Keep table sort result after page refresh?

I'm using the table sorter from w3.js(https://www.w3schools.com/howto/howto_js_sort_table.asp).
Also, I have used setTimeout to refresh page per minute for updating data.
I want to keep the sorting result after refreshing page.
I know there's a method is using sessionStorage, but don't know how to use it.
Can anybody give me some tips?
Below is an updated snippet of the example in SortTable. We use the browser cookies to restore the last sort information, which are mainly the sorting column and direction. There is another example in W3school, from which I got the cookie handling (Cookies). The snippet below will not work here in the website because of the cross origin policy. Certainly, it also requires some refactoring, but it is a start.
<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
<style>
table {
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body onload="checkCookie();">
<p><strong>Click the headers to sort the table.</strong></p>
<p>The first time you click, the sorting direction is ascending (A to Z).</p>
<p>Click again, and the sorting direction will be descending (Z to A):</p>
<table id="myTable">
<tr>
<!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Country</th>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
</table>
<script>
function sortTable(n, dir) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
//Set the sorting direction to ascending:
!dir && (dir = "asc");
/*Make a loop that will continue until
no switching has been done:*/
while (switching) {
//start by saying: no switching is done:
switching = false;
rows = table.getElementsByTagName("TR");
/*Loop through all table rows (except the
first, which contains table headers):*/
for (i = 1; i < (rows.length - 1); i++) {
//start by saying there should be no switching:
shouldSwitch = false;
/*Get the two elements you want to compare,
one from current row and one from the next:*/
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/*check if the two rows should switch place,
based on the direction, asc or desc:*/
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch= true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch= true;
break;
}
}
}
if (shouldSwitch) {
/*If a switch has been marked, make the switch
and mark that a switch has been done:*/
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
//Each time a switch is done, increase this count by 1:
switchcount ++;
} else {
/*If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again.*/
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
setCookie("sortBy", n, 30);
setCookie("sortByDir", dir);
}
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var sortBy=getCookie("sortBy");
if (sortBy != "") {
sortTable(parseInt(sortBy), getCookie("sortByDir"));
}
}
</script>
</body>
</html>
Edit:
One more snippet to use sessionStorage instead
<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
<style>
table {
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th {
cursor: pointer;
}
th, td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
</style>
</head>
<body onload="checkStrorage();">
<p><strong>Click the headers to sort the table.</strong></p>
<p>The first time you click, the sorting direction is ascending (A to Z).</p>
<p>Click again, and the sorting direction will be descending (Z to A):</p>
<table id="myTable">
<tr>
<!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Country</th>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
</table>
<script>
function sortTable(n, dir) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
//Set the sorting direction to ascending:
!dir && (dir = "asc");
/*Make a loop that will continue until
no switching has been done:*/
while (switching) {
//start by saying: no switching is done:
switching = false;
rows = table.getElementsByTagName("TR");
/*Loop through all table rows (except the
first, which contains table headers):*/
for (i = 1; i < (rows.length - 1); i++) {
//start by saying there should be no switching:
shouldSwitch = false;
/*Get the two elements you want to compare,
one from current row and one from the next:*/
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/*check if the two rows should switch place,
based on the direction, asc or desc:*/
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch= true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch= true;
break;
}
}
}
if (shouldSwitch) {
/*If a switch has been marked, make the switch
and mark that a switch has been done:*/
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
//Each time a switch is done, increase this count by 1:
switchcount ++;
} else {
/*If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again.*/
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
sessionStorage.setItem('sortBy', n);
sessionStorage.setItem('sortByDir', dir);
}
function checkStrorage() {
var sortBy= sessionStorage.getItem('sortBy');
if (sortBy !== null) {
sortTable(parseInt(sortBy), sessionStorage.getItem('sortByDir'));
}
}
</script>
</body>
</html>

Calculate cell value using selected option in table

I'm trying to build a single table that houses all of the pricing options I need. This should be simple, but I'm getting NaN responses in the cell meant to contain the calculation.
<!DOCTYPE html>
<html>
<body>
<table border="2">
<tr>
<th>Subscription Memberships</th>
</tr>
<tr>
<td>Subscription Type:
<select id="duration">
<option value="1MonthSub">Monthly Subscription</option>
<option value="3MonthSub">Quarterly Subscription</option>
<option value="6MonthSub">Bi-Annual Subscription</option>
<option value="yearSub">Yearly Subscription</option>
</select>
<br>
<input type="checkbox" id="discount">
I am eligible for the student, military, or senior discount.</td>
</tr>
<tr>
<td><span id="calculated"></span></td>
</tr>
</table>
<script>
function calcPrice() {
//Variables
var choice = document.getElementById("duration");
var dur = choice.options[choice.selectedIndex].text;
var price;
var per;
var output;
switch(dur) {
case "1MonthSub":
price = 65;
per = " / month";
break;
case "3MonthSub":
price = 220;
per = " / 3 months";
break;
case "6MonthSub":
price = 440;
per = " / 6 months";
break;
case "yearSub":
price = 900;
per = " / year";
break;
}//end switch
if (document.getElementById("discount").checked) {
price = price * 0.9;
}//end if
output = price + per;
return output;
}//end calcPrice()
document.getElementById("calculated").innerHTML = calcPrice();
</script>
</body>
</html>
The NaN cell SHOULD calculate the price based on the option selected from the dropdown and the true/false value of the checkbox. I've tried moving the script portions around, and when they're placed before the table nothing shows up in the cell at all. What am I missing here?
I changed:
var dur = choice.options[choice.selectedIndex].text;
To:
var dur = choice.options[choice.selectedIndex].value;
<!DOCTYPE html>
<html>
<body>
<table border="2">
<tr>
<th>Subscription Memberships</th>
</tr>
<tr>
<td>Subscription Type:
<select id="duration">
<option value="1MonthSub">Monthly Subscription</option>
<option value="3MonthSub">Quarterly Subscription</option>
<option value="6MonthSub">Bi-Annual Subscription</option>
<option value="yearSub">Yearly Subscription</option>
</select>
<br>
<input type="checkbox" id="discount">
I am eligible for the student, military, or senior discount.</td>
</tr>
<tr>
<td><span id="calculated"></span></td>
</tr>
</table>
<script>
function calcPrice() {
//Variables
var choice = document.getElementById("duration");
var dur = choice.options[choice.selectedIndex].value;
var price;
var per;
var output;
switch(dur) {
case "1MonthSub":
price = 65;
per = " / month";
break;
case "3MonthSub":
price = 220;
per = " / 3 months";
break;
case "6MonthSub":
price = 440;
per = " / 6 months";
break;
case "yearSub":
price = 900;
per = " / year";
break;
}//end switch
if (document.getElementById("discount").checked) {
price = price * 0.9;
}//end if
output = price + per;
return output;
}//end calcPrice()
document.getElementById("calculated").innerHTML = calcPrice();
</script>
</body>
</html>

Getting total of a row Angularjs

Hi I have a simple row that I am trying to display the total of.
In my html I have
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td ng-init="iTotal= iTotal + item.price">{{item.price}}</td>
</tr>
<tr>
<td></td>
<td>Total :</td>
<td>Total:{{iTotal}}</td>
</tr>
In my controller I have
var vm=this;
vm.Itotal=0;
This basically doesn't gives me blank for iTotal no error.
Please let me know how to fix it to get the result. Thanks
If you are using view model annotation:
var vm=this;
vm.Itotal=0;
Then you should access vm.Itotal like this:
<td ng-init="controller.Itotal = controller.Itotal + item.price">{{item.price}}</td>
Pay attention that you use iTotal in your view and Itotal (I in uppercase) in your controller.
You can try this simple way:
Demo plunker
HTML:
<table>
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td >{{item.price}}</td>
</tr>
<tr>
<td></td>
<td>Total:{{iTotal}}</td>
</tr>
</table>
JS:
$scope.items=[{
"id": 1,
"price": 12,
},
{
"id": 1,
"price": 1,
}];
$scope.iTotal=0;
$scope.items.forEach(function(i){
$scope.iTotal= $scope.iTotal + i.price;
})
JSFiddle explaining the same: (Not created by me, Copied from JSFiddle)
http://jsfiddle.net/J9Aj8/
angular.module("app", []).
filter("sum", function sum$$factory() {
return function sum$$filter(collection) {
var sum = 0;
_.forOwn(collection, function(value) {
switch (typeof value) {
case 'number': sum += value; break;
case 'string': sum += (value >>> 0); break;
default: // don't know what to do with this, maybe something else!
break;
}
});
return sum;
};
}).
controller("itemsCtrl", function() {
var self = this;
this.model = {};
this.numbers = [
36,
72,
80,
101,
9,
42
];
this.addNumber = function() {
var value = self.model.newNumber;
if (value === value && typeof value === 'number') {
self.numbers.push(value);
self.model.newNumber = NaN;
}
};
});

update html table with data from SQL database table in cshtml page

#{
var db = Database.Open("HEMS");
var LoadDevCmd = "SELECT * FROM " + App.UserMeterID;
var DevQuery = db.Query(LoadDevCmd);
foreach (var row in DevQuery)
{
var DevType = row.DeviceType;
var LoadType = row.Device_LoadType;
string Loc = row.Location;
var MAC = row.MACaddress;
var D_Status = row.DeviceStatus;
var myLoc = "";
if (Loc == null)
{
myLoc = "XLoc";
}
else
{
switch (Loc)
{
case "Living Room":
myLoc = "LivingRoom";
break;
case "Bedroom":
myLoc = "Bedroom";
break;
case "Bathroom":
myLoc = "Bathroom";
break;
case "Dining Room":
myLoc = "DiningRoom";
break;
case "Kitchen":
myLoc = "Kitchen";
break;
case "Balcony":
myLoc = "Balcony";
break;
case "Others":
myLoc = "Others";
break;
}
}
}
<body>
<table id="XLoc">
<tr>
<th align="left">Unknown Location</th>
</tr>
</table>
<table id="LivingRoom">
<tr>
<th align="left">Living Room</th>
</tr>
</table>
<table id="Bedroom">
<tr>
<th align="left">Bedroom</th>
</tr>
</table>
<table id="Bathroom">
<tr>
<th align="left">Bathroom</th>
</tr>
</table>
<table id="DiningRoom">
<tr>
<th align="left">Dining Room</th>
</tr>
</table>
<table id="Kitchen">
<tr>
<th align="left">Kitchen</th>
</tr>
</table>
<table id="Balcony">
<tr>
<th align="left">Balcony</th>
</tr>
</table>
<table id="Others">
<tr>
<th align="left">Others</th>
</tr>
</table>
</body>
<script>
function displayDev(id, MAC) {
var table = document.getElementById(id);
var row = table.insertRow(-1);
var cell = row.insertCell(-1);
cell.innerHTML = "MacAddress: " + MAC ;
}
</script>
I'm trying update my html tables in tag as shown above with the script function( displayDev(id, MAC)}. May I know how may I call the script function in the #{}?
I've tried the page.ClientScriptManager.RegisterStartupScript(); but I always get null page which cause the NullReferenceException error, may I know how should I fix it?
Try #Html.Raw("displayDev(" + myLoc + ")")

Categories