Menu
Community /Pin to ProfileBookmark
Please write code written in box brackets around your code this way:
https://syncfiddle.net/fiddle/-Mf-ycAEZ7iAifvBCyEY
Here is the output:
For the checkmark I recommend this:
@daveyerwinJul 20.2021 — #@Ashley128#1634394
it would be good if you showed us
the contents of the index.js file@Ashley128#1634391 As @codewitch pointed out, please use code tags or triple backticks when posting code.
I edited your postings accordingly.
Not really. I want to have a Javascript file js do to this. I tried something (no sucess).
Best regrads
/Ashley
@Ashley128#1634391 The table in your initial posting has a head only, there is no body. Therefore I suspect that it's created dynamically. The cells containing the checkmark can be created by the javascript array you posted. But where do the columns Rad: and Lag: come from?The other is not defined yet. I plan to do the check marks first. How do the codes look like?
/Ashley Hello. In post number 5 in this thread I tried to come up with a table you are looking for.
Could you please send us a photo of a table you intend to have? I want to write table checkmark from the JavaScript file. Not from css file. I know.
but again: Could you please send us a photo of a table you intend to have?
I mean, could you please sketch the table and take a photo of it?
Complete the HTML of the table:
case '1':
var1 = '✓';
break;
case 'X':
varX = '✓';
break;
case '2':
var2 = '✓';
break;
I need to use the checkmark class. How can I do this
If not, please describe what you need that class for and which element it should be applied to.I need in my JavaScript file call the checkmark class from html file to draw the checkmarks.
I am not allow to make any changes in both html and css files.
I add this and everything semms strange?Unfortunately I do not understand what you are trying to achieve by this code. Please explain and post a sample of the HTML you intend to create.
Where are your variables Homepage1, Homepage2 and table defined?
Gabapentin is a prescription drug. Now you can[order Gabapentin online overnight](https://cbdoilskincare.us/order-gabapentin-online-overnight/) easily. This medicine is used to treat epilepsy, especially in neuralgia. Gabapentin may also be used for a number of other conditions, which are described below.
Checkmark in table Javascript
I have a problem with Javascript.
I read several of digits containing 1,X and 2 in an array. If I read a “”1″” from the array then a checkmark will be marked at the “1” column, read “X” from array a checkmark marked at “X” column, and read “2” checkmark at “2” column. The result with the checkmarks are marked in a table called “table”. See below.
How can I do this. Can anyone help me?
HTML-file:
“`
<body>
<span class=”checkmark”>
<div class=”stem”></div>
<div class=”kick”></div>
</span>
<main>
<table id=”table”>
<tr>
<th>Rad:</th>
<th>Lag:</th>
<th>1</th>
<th>X</th>
<th>2</th>
</tr>
</table>
</main>
</body>
CSS-file:
“`
.checkmark {
display: inline-block;
width: 22px;
height: 22px;
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.stem {
position: absolute;
width: 5px;
height: 11px;
background-color: green;
left: 11px;
top: 6px;
}
.kick {
position: absolute;
width: 5px;
height: 5px;
background-color: green;
left: 8px;
top: 12px;
}
Best regards
/Ashley
Sign in
to post a comment26 Comments(s) ↴
0
@codewitchJul 19.2021 — #Hello. Please write it as one html page with <style>xxx</style> included.Please write code written in box brackets around your code this way:
reply?
0
@Ashley128authorJul 19.2021 — #HTML code:``<i>
</i><!DOCTYPE html>
<html>
<head>
<title>JS - Examination</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="assets/css/index.css" />
<link rel="shortcut icon" href="assets/img/fotboll.png" type="image/png">
<script src="assets/js/index.js" type="module"></script>
</head>
<body>
<span class="checkmark">
<div class="stem"></div>
<div class="kick"></div>
</span>
<header>
<h1>FOTBADSKOLLEN</h1>
<p class="smallLogo">FÖR DIG SOM SPARKAR BOLL</p>
</header>
<nav>
<ul>
<li id="active"><a href="#">stryket</a></li>
<li><a href="#">bänken</a></li>
<li><a href="#">korvmojjen</a></li>
<li><a href="#">lagen</a></li>
</ul>
</nav>
<main>
<h1>Stryk<img id="fotball" src="assets/img/fotboll.png"> tipset</h1>
<p>-först till 13rätt vinner!</p>
<hr />
<table id="table">
<tr>
<th>Rad:</th>
<th>Lag:</th>
<th>1</th>
<th>X</th>
<th>2</th>
</tr>
</table>
</main>
<footer class="text-center">
<nav>
<ul>
<li><a href="#">Kontakta oss</a></li>
<li><a href="#">Om oss</a></li>
<li><a href="#">Rapportera fel</a></li>
</ul>
</nav>
<h2>TIPSA OSS</h2>
<p>
Vi är ständigt på jakt efter de senaste skvallren vad gäller fotbollsproffs och deras partners <br />
Har du ett tips eller kanske filmat något själv? <br />
Hör av dig via denna länken: <a href="#"> TIPSA OSS</a>
</p>
<hr />
<p>
Din väg från bänken rakt in i målet!<br>
&copy; Fotbadskollen
<script type="text/javascript">
document.write(new Date().getFullYear());
</script>
<p>
</footer>
</body>
</html><i>
</i>`</CODE>
CSS code:
<CODE>`<i>
</i>html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
@font-face {
font-family: FjallaOne-Regular;
src: url("../fonts/FjallaOne-Regular.otf") format("opentype");
}
html {
background: url('../img/bg.jpg') #fff no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
font-family: Verdana;
color: #000;
}
header {
height: 100px;
color: #000;
text-align: center;
}
header p {
font-size: 4em;
width: 960px;
margin: 0 auto;
}
.smallLogo {
font-size: 2em;
font-style: italic;
}
nav {
margin-top: 60px;
background-color: rgba(255, 255, 255, 0.9);
height: 70px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 2px;
text-align: center;
}
ul {
padding-top: 25px;
list-style-type: none;
text-align: center;
}
li {
display: inline-block;
margin-left: 40px;
}
a {
color: #000;
text-decoration: none;
}
#active a {
color: red;
}
a:hover {
text-decoration: underline;
}
main {
background-color: rgba(255, 255, 255, 0.9);
width: 960px;
margin: 40px auto 0 auto;
padding: 30px;
text-align: center;
}
main table {
margin: 0 auto;
width: 92%;
text-align: center;
}
main table tr td:first-child, main table tr th:first-child {
text-align: left;
}
#fotball {
opacity: 1;
}
.checkmark {
display: inline-block;
width: 22px;
height: 22px;
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.stem {
position: absolute;
width: 5px;
height: 11px;
background-color: green;
left: 11px;
top: 6px;
}
.kick {
position: absolute;
width: 5px;
height: 5px;
background-color: green;
left: 8px;
top: 12px;
}
main hr {
margin: 40px;
}
main p {
padding-left: 250px;
}
.text-center {
text-align: center;
}
.text-bold {
font-weight: bold;
}
footer {
background-color: rgba(255, 255, 255, 0.9);
padding-bottom: 25px;
}
footer nav {
background-color: transparent;
}
footer hr {
max-width: 960px;
}
table {
text-align: left;
}
hr {
height: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border: 0;
border-top: 1px solid #999999;
}
.red {
color: red;
}
h1, h2, nav, header {
font-family: FjallaOne-Regular;
}
h1 {
font-size: 4em;
}
h2 {
font-size: 1.5em;
}
footer h2 {
color: red;
}<i>
</i>``reply?
0
@codewitchJul 19.2021 — #Hello. Is this what you need?Here is the output:
For the checkmark I recommend this:
<i>
</i><font color="green">&#10003;</font>
reply?
0
@daveyerwinJul 20.2021 — #it would be good if you showed us
the contents of the index.js file
reply?
0
@SempervivumJul 20.2021 — #I edited your postings accordingly.
reply?
0
@Ashley128authorJul 20.2021 — #Hi,Not really. I want to have a Javascript file js do to this. I tried something (no sucess).
``<i>
</i>let outcome=['1','X','2','1','X','2','1','X','2','1','X','2','1,'];
for (let i=0;i<13;i++) {
if (outcome[i]=='1') {
let myPara = document.querySelector('.checkmark');
let col=document.createElement('td');
let textNode=document.createTextNode();
col.appendChild(textNode);
myPara.appendChild(col);
}
}<i>
</i>``Best regrads
/Ashley
reply?
0
@codewitchJul 20.2021 — #Javascript arrays are defined like this:const outcome = ['1','X','2','1','X','2','1','X','2','1','X','2','1'];reply?
0
@SempervivumJul 20.2021 — #reply?
0
@Ashley128authorJul 20.2021 — #/Ashley
reply?
0
@codewitchJul 20.2021 — #Could you please send us a photo of a table you intend to have?
reply?
0
@Ashley128authorJul 20.2021 — #reply?
0
@codewitchJul 20.2021 — #but again: Could you please send us a photo of a table you intend to have?
I mean, could you please sketch the table and take a photo of it?
reply?
0
@SempervivumJul 20.2021 — #I recommend the following:Complete the HTML of the table:
``<i>
</i> <table id="table">
<thead>
<tr>
<th>Rad:</th>
<th>Lag:</th>
<th>1</th>
<th>X</th>
<th>2</th>
</tr>
</thead>
<tbody>
</tbody>
</table><i>
</i>`</CODE>
And use this javascript:
<CODE>`<i>
</i> const outcome = ['1', 'X', '2', '1', 'X', '2', '1', 'X', '2', '1', 'X', '2', '1'],
// Provide body of table:
tbdy = document.querySelector('#table tbody');
// For each item in body:
outcome.forEach(item => {
// Prepare content (checkmark) for the corresponding item in array:
let var1 = '', varX = '', var2 = '';
switch (item) {
case '1':
var1 = '&#10003';
break;
case 'X':
varX = '&#10003';
break;
case '2':
var2 = '&#10003';
break;
}
// Enter variables into template string
const row =
<tr>
<td></td>
<td></td>
<td>${var1}</td>
<td>${varX}</td>
<td>${var2}</td>
</tr>
;
// Append html of row to body of table:
tbdy.insertAdjacentHTML('beforeend', row);<i>
</i>``reply?
0
@Ashley128authorJul 20.2021 — #var1 = '✓';
break;
case 'X':
varX = '✓';
break;
case '2':
var2 = '✓';
break;
I need to use the checkmark class. How can I do this
reply?
0
@SempervivumJul 20.2021 — #Check if this is what you require:``<i>
</i> // Enter variables into template string
const row =
<tr>
<td></td>
<td></td>
<td class="checkmark">${var1}</td>
<td class="checkmark">${varX}</td>
<td class="checkmark">${var2}</td>
</tr>
;<i>
</i> ``If not, please describe what you need that class for and which element it should be applied to.
reply?
0
@Ashley128authorJul 20.2021 — #I am not allow to make any changes in both html and css files.
reply?
0
@SempervivumJul 20.2021 — #I see. Try this javascript:``<i>
</i> const outcome = ['1', 'X', '2', '1', 'X', '2', '1', 'X', '2', '1', 'X', '2', '1'],
// Provide body of table:
tbdy = document.querySelector('#table tbody'),
// Get outer HTML of checkmark:
checkmark = document.querySelector('.checkmark').outerHTML;
// For each item in array outcome:
outcome.forEach(item => {
// Prepare content (checkmark) for the corresponding item in array:
let var1 = '', varX = '', var2 = '';
switch (item) {
case '1':
var1 = checkmark;
break;
case 'X':
varX = checkmark;
break;
case '2':
var2 = checkmark;
break;
}
// Enter variables into template string
const row =
<tr>
<td></td>
<td></td>
<td>${var1}</td>
<td>${varX}</td>
<td>${var2}</td>
</tr>
;
// Append html of row to body of table:
tbdy.insertAdjacentHTML('beforeend', row);
});<i>
</i>``reply?
0
@Ashley128authorJul 20.2021 — #``<i>
</i>for (let i=0;i<13;i++) {
let col=document.createElement('td');
let textNode=document.createTextNode([i+1]);
col.appendChild(textNode);
table.appendChild(col);
col=document.createElement('td');
let oLnk=document.createElement('a');
let oTxt=document.createTextNode([i]);
oLnk.href=Homepage1[i];
let o=oLnk.appendChild(oTxt);
document.getElementById('table').appendChild(oLnk);
let oLnk1=document.createElement('p');
let oTxt1=document.createTextNode(' -VS- ');
let o1=oLnk1.appendChild(oTxt1);
table.appendChild(o1);
let oLnk2=document.createElement('a');
let oTxt2=document.createTextNode([i]);
oLnk2.href=Homepage2[i];
let o2=oLnk2.appendChild(oTxt2);
document.getElementById('table').appendChild(oLnk2);
col=document.createElement('tr');
textNode=document.createTextNode('');
col.appendChild(textNode);
table.appendChild(col);
}<i>
</i>``I add this and everything semms strange?
reply?
0
@SempervivumJul 21.2021 — #Where are your variables Homepage1, Homepage2 and table defined?
reply?
0
@SempervivumJul 21.2021 — #Check if this helps you: The code adds a link to the first table cell:``<i>
</i> const outcome = ['1', 'X', '2', '1', 'X', '2', '1', 'X', '2', '1', 'X', '2', '1'],
homepage1 = [
'https://en.wikipedia.org/wiki/Main_Page',
'https://de.wikipedia.org/',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page',
'https://en.wikipedia.org/wiki/Main_Page'
],
// Provide body of table:
tbdy = document.querySelector('#table tbody'),
// Get outer HTML of checkmark:
checkmark = document.querySelector('.checkmark').outerHTML;
// For each item in array outcome:
outcome.forEach((item, idx) => {
// Prepare content (checkmark) for the corresponding item in array:
let var1 = '', varX = '', var2 = '';
switch (item) {
case '1':
var1 = checkmark;
break;
case 'X':
varX = checkmark;
break;
case '2':
var2 = checkmark;
break;
}
// Enter variables into template string
// First table cell contains a link
const row =
<tr>
<td><a href="${homepage1[idx]}">${idx + 1}</a></td>
<td></td>
<td>${var1}</td>
<td>${varX}</td>
<td>${var2}</td>
</tr>
;
// Append html of row to body of table:
tbdy.insertAdjacentHTML('beforeend', row);
});<i>
</i>``reply?
0
@cbdoilskincareJul 23.2021 — #The JavaScript language is troublesome, but the JavaScript ecosystem is a nightmare. It is truly the biggest problem with JavaScript. Unfortunately, it is also one of JavaScript's greatest strengths, which is why there are no easy solutions to this problem.Gabapentin is a prescription drug. Now you can
reply?