I want to save the content editable data to local storage.
Right now if you try to edit the stock table it changes, then when you refresh the page, it goes back to initial value.
Is there a way to do this automatically, without requiring a button to save it? Just by exiting the text box, it should save automatically.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Inventory</title>
<link href="https://fonts.googleapis.com/css?family=Anton|Titan+One" rel="stylesheet">
<style type="text/css">
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#hewrap{
text-align: center;
}
#he {
font-family: 'Titan One', cursive;
font-family: 'Anton', sans-serif;
color: white;
background-color: black;
font-size: 32px;
}
.fi {
border-radius:5px;
height: 30px;
}
#btn {
border-radius: 5px;
height: 30px;
background-color: blue;
color:white;
}
#ftr {
background-color: black;
}
</style>
</head>
<body>
<a class="c-link" href='' onclick='javascript:clearLocal();'>Clear storage</a>
<div id="hewrap">
<h1 id="he">Inventory</h1>
</div>
<table id="inventory">
<thead>
<tr>
<th>Description</th>
<th>Part-#</th>
<th>Required</th>
<th>Stock</th>
<th>Price</th>
<th>N/A</th>
</tr>
<tr id="ftr">
<td><input class="fi" type="text" id="one" placeholder="Description"></td>
<td><input class="fi" type="text" id="two" placeholder="Part-#"></td>
<td><input class="fi" type="text" id="three" placeholder="Required"></td>
<td><input class="fi" type="text" id="four" placeholder="Stock"></td>
<td><input class="fi" type="text" id="five" placeholder="Price"></td>
<td><button id="btn" onclick="addRow()">ADD</button></td>
</tr>
</thead>
<tbody id="screen">
</tbody>
</table>
</body>
<script>
//scribble data
//save
$( document ).ready(function(){
$('#screen').html(localStorage.getItem("data"));
});
function addRow(){
var str = '<tr class = "boxType"><td>'+$('#one').val()+'</td>\
<td>'+$('#two').val()+'</td>\
<td>'+$('#three').val()+'</td>\
<td id="scribble" contenteditable="true" onkeyup="storeUserScribble(this.id);">'+$('#four').val()+'</td>\
<td>'+$('#five').val()+'</td>\
</tr>'
$('#screen').append(str);
localStorage.setItem("data", $('#screen').html());
}
</script>
<script type="text/javascript">
getUserScribble();
</script>
</html>
Related
I am noob posting for the first time. I am creating an opioid calculator that converts doses of different opioid to a standard. I am familiar with html and have been studying OOP with C#. Working with Javascript for first time. I have tried many ways and cannot get the "calculate(x)" function to return the value to the specified element. The function should be called when text associated with ID="r2" is changed (onchange event) by the user. The value should be displayed in the element with Id="MED-bup-tab". The conversion factor is given in the onchange="calculate(30)" event. Any suggestions are appreciated.
Here is what I have:
function calculate(x) {
var my1 = x;
var my2 = document.getElementById('r2').value;
document.getElementById('MED-bup-tab').innerTHTML = parseInt(my1) * parseInt(my2);
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.tg {
border-collapse: collapse;
border-spacing: 0;
}
.tg td {
font-family: Arial, sans-serif;
font-size: 7px;
padding: 5px 2.5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: black;
}
.tg th {
font-family: Arial, sans-serif;
font-size: 7px;
font- weight: normal;
padding: 5px 2.5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
border-color: black;
}
.tg .tg-yw4l {
vertical-align: top
}
<SCRIPT language="javascript" src="date.js"></SCRIPT>
<form>
<table>
<tr>
<th>Medications</th>
<th>Daily Dose (mg)</th>
<th>MED</th>
<th>Medications</th>
<th>Daily Dose (mg)</th>
<th>MED</th>
</tr>
<tr>
<td><input class="tg-yw41" type=”text” name=”buprenorphine-tablet-film” value=Burpenorphine id="med” disabled></td>
<td>'TEXT" </td>
<td><input class="tg-yw41" type=”text” name=”dose” value="" placeholder="0" Id="r2" onchange="calculate('30')"></td>
<td><input Id="MED-bup-tab" type=”text” name=”zero” value=""></td>
</tr>
</table>
</form>
Issue is at below line:
document.getElementById('MED-bup-tab').innerTHTML = parseInt(my1) * parseInt(my2);
Instead of .innerTHTML use .value. It will work.
Below is working example:
<!DOCTYPE html>
<html>
<head>
<SCRIPT language="javascript" src="date.js"></SCRIPT>
<style type="text/css">
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:7px;padding:5px 2.5px;border- style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:7px;font- weight:normal;padding:5px 2.5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-yw4l{vertical-align:top}
</style>
</head>
<body>
<form>
<table>
<tr>
<th>Medications</th>
<th>Daily Dose (mg)</th>
<th>MED</th>
<th>Medications</th>
<th>Daily Dose (mg)</th>
<th>MED</th>
</tr>
<tr>
<td><input class="tg-yw41" type=”text” name=”buprenorphine-tablet-film” value=Burpenorphine id="med” disabled></td>
<td>'TEXT"</td><td><input class ="tg-yw41" type=”text” name=”dose” value="" placeholder="0" Id="r2" onchange="calculate('30')"></td>
<td ><input Id="MED-bup-tab" type=”text” name=”zero” value="" ></td>
</tr>
</table>
</form>
<script type="text/javascript">
function calculate(x)
{
var my1 = x;
var my2 = document.getElementById('r2').value;
document.getElementById('MED-bup-tab').value = parseInt(my1) * parseInt(my2);
}
</script>
</body>
</html>
I am preparing a dashboard and prepared a static HTML page with a table in it
Now I want to add filter+search for each column.
I have got a JS file from http://wsabstract.com/script/script2/TableFilter_EN.zip and as suggested in http://wsabstract.com/script/script2/tablefilter.shtml I added below in my HTML file but doesn't seems working
Did I miss something ? Is there a quick Java script I can use ?
<html>
<head>
<style>
table {
font-family: arial;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 2px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript" src="C:\Docs\Personal\Study\Scripts\TableFilter_EN\tablefilter.js">
setFilterGrid("myTable");
</script>
<table id='myTable'>
<caption>Lab Dashboard</caption>
<tr style="background-color:DodgerBlue;">
<th>IP</th><th>Ping</th><th>SSHConnectivity</th><th>SSHLogin</th><th>Device Type</th><th>Version</th>
</tr>
<tr>
<td>10.22.156.1</td><td>OK</td><td>OK</td><td>NOK</td><td>Could not find</td><td>ArubaOS (MODEL: ArubaS2500-48P), Version 7.4.1.6 (56990)</td></tr></table>
</body>
</html>
Your code is wrong, try below code it will work.
<html>
<head>
<style>
table {
font-family: arial;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 2px solid #dddddd;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<table id="mytable">
<tbody>
<tr>
<tr style="background-color:DodgerBlue;">
<td>IP</td>
<td>Ping</td>
<td>SSHConnectivity</td>
<td>SSHLogin</td>
<td>Device Type</td>
<td>Version</td>
</tr>
<tr>
<td>10.22.156.1</td>
<td>OK</td>
<td>OK</td>
<td>NOK</td>
<td>Could not find</td>
<td>ArubaOS (MODEL: ArubaS2500-48P), Version 7.4.1.6 (56990)</td></tr>
</tr>
<tr>
<td><strong>Sydney</strong></td>
<td>Brisbane</td>
<td>982</td>
<td>1.5</td>
<td>17</td>
<td>16</td>
</tr>
</tbody></table>
<script src="C:\Docs\Personal\Study\Scripts\TableFilter_EN\tablefilter.js"></script>
<script language="javascript" type="text/javascript">
setFilterGrid("mytable");
</script>
</body>
</html>
I have created one HTML page. I have done it in just french language now I am trying to add an option at the top of my website to translate language between French and English (there are 2 language flags in the link in paragraph below).
My idea is to have a table which contains a button of flag of France and England (French and English) in first row (something like this: http://prntscr.com/6yq4t2 ) now on changing the flag should switch to another table whose contents are written in the language of flag clicked using HTML and the existing table will be replaced by the table of flag-language clicked (actually there are 2 tables(one displayed at a time) having English and French contents which must switch on click to flags on the first row of default table-which is french).
See this part in code:
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
I have my HTML code below (it doesn't contain code for English table but it is assumed that the table have same HTML code except that the written content are in English and the switching has to be done between these two tables on respective flag selection):
<!DOCTYPE PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Axestrack</title>
<!--general stylesheet-->
<style type="text/css">
p {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, p, li {
font-family: Helvetica, Arial, sans-serif;
}
td {
vertical-align: top;
}
ul, ol {
margin: 0;
padding: 0;
}
.tab {
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<div id="img_home"></div>
<table cellspacing="0" border="0" cellpadding="0" width="100%" align="center" style="margin: 0px;">
<tbody>
<tr valign="top">
<td valign="top">
<!--container-->
<table cellspacing="0" cellpadding="0" border="11" align="center" width="621" bgcolor="#f7f3e6" background="images/bg-stamp-2.jpg" style="border-width:11px; border-color:#ccc; border-style:solid; background-color:#f7f3e6; background-image: url('http://www.axestrack.com/wp-content/uploads/bg-stamp-2.jpg'); background-position: right top !important; background-repeat: repeat-x;">
<tbody>
<tr>
<td valign="top" border="0" style="border: none; ">
<table cellspacing="0" cellpadding="0" border="0" align="center" style="padding-bottom: 13px;">
<tbody>
<tr>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 19px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Michel</h1>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Résidence étudiante</h1>
</td>
</tr>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Recherche d'emploi(développement C/ C++/ C#/ Silverlight/ Wpf/ Asp.Net/ MVC-MVVM) </h1>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<!--Formation-->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:red;">Formation: </h1>
</td>
</tr>
<!-- Paris -->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px;">2012-2014 :</h1>
<p class="tab" style="margin-right:0;font-size: 12px;">
Master en Génie informatique à paris. (Diplôme d'ingénieur)
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!---->
</tbody>
</table>
</tr>
<tr>
<td valign="top" colspan="2"><img width="599" height="6" src="http://www.axestrack.com/wp-content/uploads/double-spacer.jpg" alt="" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--faltu kaam here -->
<script>
function myFunctionFrench() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
function myFunctionEnglish() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "green";
}
</script>
</body>
</html>
How to implement this switching of 2 tables on flag click which contains the language-flag in first row. Any idea ? (please take my html code as reference to answer my question).
Could some one please help me in doing this ?
After Wrick7 suggestion
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8" />
<title>JS Bin</title>
<script>
(function ()
{
$(".frc-tab").show();
$(".eng-tab").hide();
$('.eng').on('click', function (event)
{
alert('eng click');
$('.eng-tab').show();
$('.frc-tab').hide();
});
$('.frc').on('click', function (event)
{
alert('french click');
$('.eng-tab').hide();
$('.frc-tab').show();
});
})();
</script>
</head>
<body>
<div>
<button class="eng">english</button>
<button class="frc">french</button>
</div>
<div class="eng-tab">
<table class="table table-bordered">
<tr>
<td>english</td>
</tr>
</table>
</div>
<div class="frc-tab">
<table class="table table-bordered">
<tr>
<td>french</td>
</tr>
</table>
</div>
</body>
</html>
The output is:
http://prntscr.com/6zdj0r
You can set one table with visibility hidden and another with visible and then when a button is pressed you just change it in js....
function changeDisplay(view1,view2){
//var statev1 = document.getElementById(view1).style.visibility;
//var statev2 = document.getElementById(view2).style.visibility;
//if (statev1 === 'visible'){
document.getElementById(view1).style.visibility = 'hidden';
document.getElementById(view2).style.visibility = 'visible';
/*}else{
document.getElementById(view2).style.visibility = 'hidden';
document.getElementById(view1).style.visibility = 'visible';
}*/
}
.switch6 { max-width: 17em; margin: 0 auto;}
.switch6-light > span,
.switch-toggle > span { color: #000000; }
.switch6-light span span,
.switch6-light label,
.switch-toggle span span,
.switch-toggle label { color: #2b2b2b; }
.switch-toggle a,
.switch6-light span span { display: none; }
.switch6-light { display: block; height: 30px; position: relative; overflow: visible; padding: 0px; margin-left:0px; }
.switch6-light * { box-sizing: border-box; }
.switch6-light a { display: block; transition: all 0.3s ease-out 0s; }
.switch6-light label,
.switch6-light > span { line-height: 30px; vertical-align: middle;}
.switch6-light label {font-weight: 700; margin-bottom: px; max-width: 100%;}
.switch6-light input:focus ~ a,
.switch6-light input:focus + label { outline: 1px dotted rgb(136, 136, 136); }
.switch6-light input { position: absolute; opacity: 0; z-index: 5; }
.switch6-light input:checked ~ a { right: 0%; }
.switch6-light > span { position: absolute; left: -100px; width: 100%; margin: 0px; padding-right: 100px; text-align: left; }
.switch6-light > span span { position: absolute; top: 0px; left: 0px; z-index: 5; display: block; width: 50%; margin-left: 100px; text-align: center; }
.switch6-light > span span:last-child { left: 50%; }
.switch6-light a { position: absolute; right: 50%; top: 0px; z-index: 4; display: block; width: 50%; height: 100%; padding: 0px; }
<div class="switch6">
<label class="switch6-light">
<input type="checkbox">
<span>
<span onclick="changeDisplay('sign','log');">Log-In</span>
<span onclick="changeDisplay('log','sign');">Sign-In</span>
</span>
<a class="btn btn-primary"></a>
</label>
</div>
My HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Wolf and Rabbit Game</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="wolf&rabbit_game.css">
<script src="wolf&rabbit_game.js"></script>
</head>
<body>
<table>
<tr>
<td id="tableCell"></td>
</tr>
</table>
<input id="button1" type="button" value="I'm red" onclick="setColorRed">
<input id="button2" type="button" value="I'm green" onclick="setColorGreen">
</body>
</html>
My CSS file:
table{
text-align: center;
margin: auto;
}
td{
border: 1px black solid;
width: 25px;
height: 25px;
}
#button1,#button2{
text-align: center;
margin-top: 20px;
font-size: 1em;
font-family: Myriad Pro;
font-weight: semibold;
color: white;
border-radius: 15px;
padding: 1%;
}
#button1{
background: red;
}
#button2{
background: green;
}
body{
text-align: center;
}
img{
width: 25px;
height: auto;
}
My JavaScript file:
function setColor(){
if ("#button1").click {
document.getElementById("#tableCell").style.backgroundColor="red";
};
if ("#button2").click {
document.getElementById("#tableCell").style.backgroundColor="green";
};
};
Check this JS Fiddle
JsFiddle link
There is no need of calling two different methods on two different buttons, a single method to accept the color parameter and change the desired element's color is good enough.
You have to modify your code like this and make sure javascript code comes before your button markup.
<script>
function setColor(color){
document.getElementById("tableCell").style.backgroundColor=color;
};
</script>
<table>
<tr>
<td id="tableCell">test</td>
</tr>
</table>
<input id="button1" type="button" value="I'm red" onclick="setColor('red')">
<input id="button2" type="button" value="I'm green" onclick="setColor('green')">
I have a table with expand/collapse javascript acting on the class value assigned to tr.
See below html code.
This all works fine in Chrome, but in IE when I expand and then collapse the www row, I get additional unwanted lines in the xxx and zzz rows. The lines look like they are borders (see css td border-style definition). It looks as if the borders of the collapsed and hidden rows are still shown (non-button rows are a little less high than the button rows, apparently because of standard button padding and border widths).
Why is this, and how can I prevent this from occurring?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<style type="text/css">
body, p {
background-color: white;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
color: black;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
table {
border: solid black 1pt;
border-collapse: collapse;
padding: 0;
border-spacing: 0;
}
th {
background: rgb(255, 255, 153);
border-style: solid;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
vertical-align: top;
}
td {
border-style: dotted dotted none none;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-style: normal;
font-family: Verdana;
font-size: 10pt;
vertical-align: top;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
input.buttonSeq {
color: blue;
background: ffffcc;
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}
</style>
<script type="text/javascript" language="javascript">
//expand and collapse tr functions based on class
function ToggleTRbyClass(clss){
var trs = document.getElementsByTagName('tr');
for (var i=0; i!=trs.length; i++) {
if (trs[i].className == clss) {
if ( trs[i].style.display == "none")
{
trs[i].style.display = "table-row"
}
else {
trs[i].style.display = "none"
}
}
}
return true;
}
</script>
</head>
<body>
<br><br>
<table style="table-layout:fixed word-break:break-all">
<col width="120">
<thead>
<tr>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('www'); return true;" onMouseOver="this.style.cursor='hand'" value="www"></div>
</td>
</tr>
<tr style="display:none" class="www">
<td>element1</td>
</tr>
<tr style="display:none" class="www">
<td>element2</td>
</tr>
<tr style="display:none" class="www">
<td>element3</td>
</tr>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('xxx'); return true;" onMouseOver="this.style.cursor='hand'" value="xxx"></div>
</td>
</tr>
<tr style="display:none" class="xxx">
<td>element4</td>
</tr>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('zzz'); return true;" onMouseOver="this.style.cursor='hand'" value="zzz"></div>
</td>
</tr>
<tr style="display:none" class="zzz">
<td>element5</td>
</tr>
</tbody>
</table><br></body>
</html>
You need to specify a doctype as the first line in your markup. Without a doctype, IE will render in quirks mode, which is essentially the IE 5.5 rendering engine. Quirks mode greatly effects the box model and Javascript support, among other things.
Example:
<!doctype html>
Specifying the doctype will make your example work as it does in Firefox.
Edit:
The grey background comes from the following rule, which is technically wrong (you need to specify the # symbol when using hex colors:
input.buttonSeq {
color: blue;
background: ffffcc; /* change this to #ffffcc */
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}
Rather than setting the display to "table-row", set it to "" so that the default behaviour comes back. Older versions of IE don't support table-row and need block instead.
If your CSS overrides the default (ie. if you used it to hide a class of rows from the start), try:
try {tr.style.display = "table-row";}
catch(e) {tr.style.display = "block";}
And add a DOCTYPE, like wsanville said.