So, I've searched around for a bit and found out that some of the CSS won't load in editor mode but will load in previewer mode, however, not all CSS is functioning properly and the Javascript is completely failing.
Here's some html and javascript I tried with the HTML Box:
<table id="Killed" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td>Buffalo</td>
<td align="right">
<span id="Kill_Count1"></span>
</td>
</tr>
<tr>
<td>Camels</td>
<td align="right">
<span id="Kill_Count2"></span>
</td>
</tr>
<tr>
<td>Cattle</td>
<td align="right">
<span id="Kill_Count3"></span>
</td>
</tr>
<tr>
<td>Chickens</td>
<td align="right">
<span id="Kill_Count4"></span>
</td>
</tr>
<tr>
<td>Ducks</td>
<td align="right">
<span id="Kill_Count5"></span>
</td>
</tr>
<tr>
<td>Goats</td>
<td align="right">
<span id="Kill_Count6"></span>
</td>
</tr>
<tr>
<td>Horses</td>
<td align="right">
<span id="Kill_Count7"></span>
</td>
</tr>
<tr>
<td>Pigs</td>
<td align="right">
<span id="Kill_Count8"></span>
</td>
</tr>
<tr>
<td>Sheep</td>
<td align="right">
<span id="Kill_Count9"></span>
</td>
</tr>
<tr>
<td>Turkeys</td>
<td align="right">
<span id="Kill_Count10"></span>
</td>
</tr>
</tbody>
</table><br><br>
<script>
window.addEventListener("load", function () {
function Kill_Count(id,totalDeaths) {
var deathsPerSecond = totalDeaths/365/24/60/60/4;
var deaths = 0, result;
var timer = 1;
setInterval(function() {
deaths = deathsPerSecond*timer;
result = deaths.toFixed();
document.getElementById(id).innerHTML = result;
timer++;
}, 250);
}
var killnum = "23199336 1501799 301275455 49877536490 2676365000 402611664 5018470 1375940758 564785251 635382008";
killnum = killnum.split(" ");
for (var i = 1; i <= 10; i++) {
var num = i-1;
var temp = killnum[num];
Kill_Count('Kill_Count'+i,Number(temp));
}
});
</script>
What needs to be added? Here's the website https://support.google.com/sites/answer/2500646?hl=en
Interesting problem. I think I may have found a decent solution for you:
First off, Google's HTML Box is auto-generating new id tags for the ids you made. So, id="Kill_Count1" through id="Kill_Count10" is turning into something like id="id_3___"
The first thing I did was change all of the ids to Classes, all set to "Kill_Text":
<span class="Kill_Text"></span>
Next, I wrote some javascript code to collect the elements these classes were in and set their ids back to "Kill_Count1" and such like you had before:
var spans = document.getElementsByClassName("Kill_Text");
// Reset auto-generated ids to Kill_Count#
for (var j = 1; j <= spans.length; j++) {
spans[j-1].id = ("Kill_Count" + j);
}
From there, your code worked just as expected.
Side notes:
At first when I was trying to get javascript to run I had to save the code in the box, save again, then refresh the page. Hopefully this helps if you didn't know already :)
Have you used Chrome developer tools? They are super useful when debugging web pages. [Ctl + Shift + I]
Your code currently sets 10 timers doing pretty much the same actions on individual spans. It would be more efficient to have one timer doing 10 actions (1 on each span)
For Reference:
Here's the final code I used in the HTML box:
<table id="Killed" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td>Buffalo</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Camels</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Cattle</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Chickens</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Ducks</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Goats</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Horses</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Pigs</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Sheep</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
<tr>
<td>Turkeys</td>
<td align="right">
<span class="Kill_Text"></span>
</td>
</tr>
</tbody>
</table>
<script>
function Kill_Count(id,totalDeaths) {
var deathsPerSecond = totalDeaths/365/24/60/60/4;
var deaths = 0, result;
var timer = 1;
setInterval(function() {
deaths = deathsPerSecond*timer;
result = deaths.toFixed();
document.getElementById(id).innerHTML = result;
timer++;
}, 250);
}
var killnum = "23199336 1501799 301275455 49877536490 2676365000 402611664 5018470 1375940758 564785251 635382008";
killnum = killnum.split(" ");
var spans = document.getElementsByClassName("Kill_Text");
// Reset auto-generated ids to Kill_Count#
for (var j = 1; j <= spans.length; j++) {
spans[j-1].id = ("Kill_Count" + j);
}
for (var i = 1; i <= 10; i++) {
var num = i-1;
var temp = killnum[num];
Kill_Count('Kill_Count'+i,Number(temp));
}
</script>
Related
setInterval(function () {
for (var i = 1; i <= 5; i++) {
var number = 1 + Math.floor(Math.random() * 100);
var getNum = $('#res' + i).html(number);
if (getNum.html() >= 50) {
$('#res' + i + 'mult').html("right");
var num = 1;
for (var j = 1; j <= 6; j++) {
$("#row" + num++ + "-" + 2).css("background-color", 'red');
}
} else {
var num2 = 1;
$('#res' + i + 'mult').html("left");
$("#row" + num2++ + "-" + num2).css("background-color", 'yellow');
}
}
},
1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<script src="../!Needs/jquery.min.js"></script>
<style>
body {
font-size: 20px;
}
table {
width: 200px;
}
#shapedive {
height: 500px;
border-radius: 30pt;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<table id="bigTable" border="1" style="text-align: center;">
<tr>
<td style="font-weight: bold">Pin</td>
<td style="font-weight: bold">Number</td>
<td style="font-weight: bold">Direction</td>
</tr>
<tr>
<td class=pin>1</td>
<td id="res1"></td>
<td id="res1mult"></td>
</tr>
<tr>
<td class=pin>2</td>
<td id="res2"></td>
<td id="res2mult"></td>
</tr>
<tr>
<td class=pin>3</td>
<td id="res3"></td>
<td id="res3mult"></td>
</tr>
<tr>
<td class=pin>4</td>
<td id="res4"></td>
<td id="res4mult"></td>
</tr>
<tr>
<td class=pin>5</td>
<td id="res5"></td>
<td id="res5mult"></td>
</table>
</td>
</tr>
<tr>
<td id="shape">
<div id="shapedive">
<table style="text-align: center" border="1">
<tr>
<td id="row1-1">*</td>
<td id="row1-2">Starter</td>
<td id="row1-3">*</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row2-1">1</td>
<td id="row2-2">2</td>
<td id="row2-3">3</td>
<td id="row2-4">4</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row3-1">1</td>
<td id="row3-2">2</td>
<td id="row3-3">3</td>
<td id="row3-4">4</td>
<td id="row3-5">5</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row4-1">1</td>
<td id="row4-2">2</td>
<td id="row4-3">3</td>
<td id="row4-4">4</td>
<td id="row4-5">5</td>
<td id="row4-6">6</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row5-1">1</td>
<td id="row5-2">2</td>
<td id="row5-3">3</td>
<td id="row5-4">4</td>
<td id="row5-5">5</td>
<td id="row5-6">6</td>
<td id="row5-7">7</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row6-1">1</td>
<td id="row6-2">2</td>
<td id="row6-3">3</td>
<td id="row6-4">4</td>
<td id="row6-5">5</td>
<td id="row6-6">6</td>
<td id="row6-7">7</td>
<td id="row6-8">8</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<br>
</body>
</html>
I am trying to make a simple game. We have two tables. The table on the top, which has 5 rows and 3 columns - including: pin, random number and direction (left or right) - and the bottom table which has 6 rows. The cell at the first row and second column ($("#row1-2")) is the beginning of our game.
The Left/Right values in the top table determine the direction, left or right, of the cell that should be painted in the corresponding row in the bottom table.
We have a simple condition to get a direction value. We generate a random number. If the random number is > 50, the direction is set to "right"; otherwise, it is set to "left".
That is, if, for example, the values in the top table were as follows:
Pin 1 => 28 => Left
Pin 2 => 9 => Left
Pin 3 => 56 => Right
Pin 4 => 99 => Right
Pin 5 => 14 => Left
Then, in the bottom table, the game is started from the starter column, and as we incrementally descend the rows, the column that gets painted is determined by the "left" or "right" values that were generated above.
In the bottom table, because the value of pin 1 (28) is less than 50, the painted column will move to the "left" from the starter block $("#row1-2"): $("#row2-2").
And because the value of pin 2 (9) also maps to "left", the painted column in the next row should also be to the "left": $("#row3-2").
For pin 3, we have "right", so the column in the next row to the right of the last painted cell should be painted: $("#row4-3").
...and so on until all the rows have a painted cell.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<script src="../!Needs/jquery.min.js"></script>
<style>
body {
font-size: 20px;
}
table {
width: 200px;
}
#shapedive {
height: 500px;
border-radius: 30pt;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<table id="bigTable" border="1" style="text-align: center;">
<tr>
<td style="font-weight: bold">Pin</td>
<td style="font-weight: bold">Number</td>
<td style="font-weight: bold">Direction</td>
</tr>
<tr>
<td class=pin>1</td>
<td id="res1"></td>
<td id="res1mult"></td>
</tr>
<tr>
<td class=pin>2</td>
<td id="res2"></td>
<td id="res2mult"></td>
</tr>
<tr>
<td class=pin>3</td>
<td id="res3"></td>
<td id="res3mult"></td>
</tr>
<tr>
<td class=pin>4</td>
<td id="res4"></td>
<td id="res4mult"></td>
</tr>
<tr>
<td class=pin>5</td>
<td id="res5"></td>
<td id="res5mult"></td>
</table>
</td>
</tr>
<tr>
<td id="shape">
<div id="shapedive">
<table style="text-align: center" border="1">
<tr>
<td id="row1-1">*</td>
<td id="row1-2">Starter</td>
<td id="row1-3">*</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row2-1">1</td>
<td id="row2-2">2</td>
<td id="row2-3">3</td>
<td id="row2-4">4</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row3-1">1</td>
<td id="row3-2">2</td>
<td id="row3-3">3</td>
<td id="row3-4">4</td>
<td id="row3-5">5</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row4-1">1</td>
<td id="row4-2">2</td>
<td id="row4-3">3</td>
<td id="row4-4">4</td>
<td id="row4-5">5</td>
<td id="row4-6">6</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row5-1">1</td>
<td id="row5-2">2</td>
<td id="row5-3">3</td>
<td id="row5-4">4</td>
<td id="row5-5">5</td>
<td id="row5-6">6</td>
<td id="row5-7">7</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row6-1">1</td>
<td id="row6-2">2</td>
<td id="row6-3">3</td>
<td id="row6-4">4</td>
<td id="row6-5">5</td>
<td id="row6-6">6</td>
<td id="row6-7">7</td>
<td id="row6-8">8</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<br>
<script>
setInterval(function () {
for (var i = 1; i <= 5; i++) {
var number = 1 + Math.floor(Math.random() * 100);
var getNum = $('#res' + i).html(number);
if (getNum.html() >= 50) {
$('#res' + i + 'mult').html("right");
var num = 1;
for (var j = 1; j <= 6; j++) {
$("#row" + num++ + "-" + 2).css("background-color", 'red');
}
} else {
var num2 = 1;
$('#res' + i + 'mult').html("left");
$("#row" + num2++ + "-" + num2).css("background-color", 'yellow');
}
}
},
1000);
</script>
</body>
</html>
I find it very difficult to synchronize the cells in the top table with those in the second. One problem is that row 1 in the first table has a left/right value; but in the second table, row 1 is the Starter - the left/right decisions don't start until row 2. I would simplify this by making the corresponding rows in the two tables have the same number. I would also 0-index the rows and columns (as opposed to having them start at 1) because this is easier for my brain as it is consistent with arrays and typical loops.
To determine which column is active as we descend the table, it was helpful for me to realize that a "left" step means the column index stays the same in the next row, and a "right" step means the index increases by 1.
We can declare a variable to track the current column. We will start it at 1 since we know the "Starter" is at the [1] index of its row: const col = 1;. Then, as we loop through the rows, we increment col by 1 if we are stepping right or 0 if we are stepping left.
We can package our game logic into a play function and invoke it once - play() - or at an interval - setInterval(play, 1000).
const play = () => {
let col = 1;
// reset the game board
$('td').css('background-color', 'white');
$('td#starter').css('background-color', 'red');
for (let row = 0; row < 6; row++) {
const pin = 1 + Math.floor(Math.random() * 100);
const isRight = pin > 50;
col += (isRight ? 1 : 0);
$(`#res${row}`).text(pin);
$(`#res${row}mult`).text(isRight ? 'right' : 'left');
$(`#row${row}-${col}`).css("background-color", isRight ? 'yellow' : 'red');
}
};
play();
//setInterval(play, 1000);
body {
font-size: 20px;
}
table {
width: 200px;
}
#shapedive {
height: 500px;
border-radius: 30pt;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
<table id="bigTable" border="1" style="text-align: center;">
<tr>
<td style="font-weight: bold">Pin</td>
<td style="font-weight: bold">Number</td>
<td style="font-weight: bold">Direction</td>
</tr>
<tr>
<td class=pin>1</td>
<td id="res0"></td>
<td id="res0mult"></td>
</tr>
<tr>
<td class=pin>2</td>
<td id="res1"></td>
<td id="res1mult"></td>
</tr>
<tr>
<td class=pin>3</td>
<td id="res2"></td>
<td id="res2mult"></td>
</tr>
<tr>
<td class=pin>4</td>
<td id="res3"></td>
<td id="res3mult"></td>
</tr>
<tr>
<td class=pin>5</td>
<td id="res4"></td>
<td id="res4mult"></td>
</table>
</td>
</tr>
<tr>
<td id="shape">
<div id="shapedive">
<table style="text-align: center" border="1">
<tr>
<td>*</td>
<td id="starter">Starter</td>
<td>*</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row0-0">1</td>
<td id="row0-1">2</td>
<td id="row0-2">3</td>
<td id="row0-3">4</td>
</tr>
</table>
<table style="text-align: center " border="1">
<tr>
<td id="row1-0">1</td>
<td id="row1-1">2</td>
<td id="row1-2">3</td>
<td id="row1-3">4</td>
<td id="row1-4">5</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row2-0">1</td>
<td id="row2-1">2</td>
<td id="row2-2">3</td>
<td id="row2-3">4</td>
<td id="row2-4">5</td>
<td id="row2-5">6</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row3-0">1</td>
<td id="row3-1">2</td>
<td id="row3-2">3</td>
<td id="row3-3">4</td>
<td id="row3-4">5</td>
<td id="row3-5">6</td>
<td id="row3-6">7</td>
</tr>
</table>
<table style="text-align: center" border="1">
<tr>
<td id="row4-0">1</td>
<td id="row4-1">2</td>
<td id="row4-2">3</td>
<td id="row4-3">4</td>
<td id="row4-4">5</td>
<td id="row4-5">6</td>
<td id="row4-6">7</td>
<td id="row4-7">8</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
I have also created an example fiddle.
<table>
<tbody>
<tr>
<td style="color: aliceblue;background-color: aqua;">Y</td>
<td style="color:green;background-color: green;">Q</td>
<td style="color: greenyellow;background-color: lawngreen;">A</td>
</tr>
<tr>
<td style="color: blue;background-color: violet;">T</td>
<td style="color: khaki;background-color: khaki;">P</td>
<td style="color: aquamarine;background-color: darkblue;">D</td>
</tr>
</tbody>
</table>
We have to hide "td" having same color and background-color.
How can we do that?
We also do not have any "id" or "class" mentioned.
Can we do using getElementByTagName?
This line will select all td
const tds = Array.from(document.querySelectorAll('td')); // Converting to Array from NodeList for better browser support
tds.forEach( (elem) => {
if(elem.style["color"] == elem.style["background-color"])
elem.style["display"] = 'none';
})
This line will hide matching elements by setting display property to none
Using a simple for...loop:
var rows = document.querySelectorAll('table td')
for (i = 0; i < rows.length; ++i) {
if (rows[i].style.color === rows[i].style.backgroundColor)
rows[i].style.display = "none";
}
console.log(rows)
<table>
<tbody>
<tr>
<td style="color: aliceblue;background-color: aqua;">Y</td>
<td style="color:green;background-color: green;">Q</td>
<td style="color: greenyellow;background-color: lawngreen;">A</td>
</tr>
<tr>
<td style="color: blue;background-color: violet;">T</td>
<td style="color: khaki;background-color: khaki;">P</td>
<td style="color: aquamarine;background-color: darkblue;">D</td>
</tr>
</tbody>
</table>
I am trying to create a Chrome Extension that will extract some data from a table. I want to transform the TD's of the TR's in simple lines with each column separated by a pipe | character, ex:
01/01/2020 | XX | 57,43 | |
02/01/2020 | YY | 11,22 | |
Here is a part of it:
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td class="TRNbarratabelac" width="3%">
<input type="checkbox" name="chkTodos" id="chkTodos" onclick="selTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNbarratabelac">Data do <br>pagamento</td>
<td class="TRNbarratabelac">Tipo</td>
<td class="TRNbarratabelac">Favorecido/beneficiário</td>
<td class="TRNbarratabelac">Valor (R$)</td>
<td class="TRNbarratabelac">Informações complementares</td>
<td class="TRNbarratabelac" colspan="2" width="20%">Opções</td>
</tr>
<tr>
<td class="TRNlicbe"><input type="checkbox" name="chkSel" id="chkSel" value="1" onclick="verSelTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNlicbe">21/02/2020 </td>
<td class="TRNliebe">Concessionárias</td>
<td class="TRNliebe"> </td>
<td class="TRNlidbe">57,43 </td>
<td class="TRNlicbe"> </td>
<td class="TRNlicbde" width="8%">Visualizar</td>
<td class="TRNlicbde" width="12%"><span>enviar por email</span> </td>
</tr>
</tbody>
</table>
To iterate over it, I use XPath like this:
function DOMtoString(doc) {
let path_tr = '(//div[#class="contborda"])[4]/table[3]/tbody/tr[position()>1]';
var tr = doc.evaluate(path_tr, doc, null, XPathResult.ANY_TYPE, null);
let alertText = '';
let x = tr.iterateNext();
while (x) {
alertText += x.textContent;
x = tr.iterateNext();
}
return alertText;
}
Here I get the table (ignoring the first TR with column names), but the result is this (just some part of it):
<br> <br> 21/02/2020 <br> Concessionárias<br> <br> 57,43 <br> <br> Visualizar<br> enviar por email <br><br>
I see that XPath is adding BR's on it.
I try to loop over the TD's of these TR's with no success like this:
let path_td = '//td';
var td = tr.evaluate(path_td, tr, null, XPathResult.ANY_TYPE, null);
What is the correct way that I can interact over the TD's and get the raw text of them with no BR's?
Use innerText instead of textContent to avoid line breaks. You can use Document.querySelector() instead of XPath which will make DOM manipulation much easier.
CSS Selectors:
function DOMtoString() {
let lines = [];
let trs = document.querySelectorAll(
'div.contborda > table:nth-of-type(2) > tbody > tr:not(:first-child)'
);
trs.forEach(tr => {
let line = [];
let tds = tr.querySelectorAll('td');
tds.forEach(td => line.push(td.innerText.trim()));
lines.push(line.join('|'));
});
return lines;
}
console.log(DOMtoString());
<div class="dummy"></div>
<div class="contborda">
<table class="dummy"><tbody></tbody></table>
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td class="TRNbarratabelac" width="3%">
<input type="checkbox" name="chkTodos" id="chkTodos" onclick="selTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNbarratabelac">Data do <br>pagamento</td>
<td class="TRNbarratabelac">Tipo</td>
<td class="TRNbarratabelac">Favorecido/beneficiário</td>
<td class="TRNbarratabelac">Valor (R$)</td>
<td class="TRNbarratabelac">Informações complementares</td>
<td class="TRNbarratabelac" colspan="2" width="20%">Opções</td>
</tr>
<tr>
<td class="TRNlicbe"><input type="checkbox" name="chkSel" id="chkSel" value="1" onclick="verSelTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNlicbe">21/02/2020 </td>
<td class="TRNliebe">Concessionárias</td>
<td class="TRNliebe"> </td>
<td class="TRNlidbe">57,43 </td>
<td class="TRNlicbe"> </td>
<td class="TRNlicbde" width="8%">Visualizar</td>
<td class="TRNlicbde" width="12%"><span>enviar por email</span> </td>
</tr>
</tbody>
</table>
</div>
If you have any other reasons you want to stick to using XPath, then you should use dot .// when you want to select nodes relative to nodeContext:
XPath:
function DOMtoString() {
let lines = [];
let path_tr = '//div[#class="contborda"]/table/tbody/tr[position()>1]';
let tr = document.evaluate(path_tr, document, null, XPathResult.ANY_TYPE, null);
let x = tr.iterateNext();
while (x) {
let line = [];
let path_td = './/td';
var td = document.evaluate(path_td, x, null, XPathResult.ANY_TYPE, null);
let y = td.iterateNext();
while (y) {
line.push(y.innerText.trim());
y = td.iterateNext();
}
lines.push(line.join('|'));
x = tr.iterateNext();
}
return lines;
}
console.log(DOMtoString());
<div class="dummy"></div>
<div class="contborda">
<table class="dummy"><tbody></tbody></table>
<table width="100%" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td class="TRNbarratabelac" width="3%">
<input type="checkbox" name="chkTodos" id="chkTodos" onclick="selTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNbarratabelac">Data do <br>pagamento</td>
<td class="TRNbarratabelac">Tipo</td>
<td class="TRNbarratabelac">Favorecido/beneficiário</td>
<td class="TRNbarratabelac">Valor (R$)</td>
<td class="TRNbarratabelac">Informações complementares</td>
<td class="TRNbarratabelac" colspan="2" width="20%">Opções</td>
</tr>
<tr>
<td class="TRNlicbe"><input type="checkbox" name="chkSel" id="chkSel" value="1" onclick="verSelTodos(this)" style="background:transparent;border:0px;"></td>
<td class="TRNlicbe">21/02/2020 </td>
<td class="TRNliebe">Concessionárias</td>
<td class="TRNliebe"> </td>
<td class="TRNlidbe">57,43 </td>
<td class="TRNlicbe"> </td>
<td class="TRNlicbde" width="8%">Visualizar</td>
<td class="TRNlicbde" width="12%"><span>enviar por email</span> </td>
</tr>
</tbody>
</table>
</div>
I need to put 6 randomly generated numbers in a an HTML table, I was wondering what would be the best solution, this is my JS code :
function GenerateNumber(){
var sResultat = "";
var iCompteur;
for(iCompteur=0;iCompteur<=6;iCompteur++)
{
sResultat = Math.round(Math.random()* 18) + 1;
}
}
Would calling them with the AddEventListener work? I need to make it appear everytime I load the page, and of course, the numbers need to be different if I reload the page.
Here is my HTML code : (I put numbers temporarily to test my code and to show where I want them to appear)
<div class="table">
<table>
<tr>
<th>FORce</th>
<th>DEXtérité</th>
<th>CONstitution</th>
<th>INTelligence</th>
<th>SAGesse</th>
<th>CHArisme</th>
</tr>
<tr>
<td class = "FOR">
5
</td>
<td class = "DEX">
4
</td>
<td class= "CON">
4
</td>
<td class ="INT">
4
</td>
<td class="SAG">
4
</td>
<td class="CHA">
3
</td>
</tr>
</table>
</div>
function generateNumber() {
var sResultat
var cells = ["FOR", "DEX", "CON", "INT", "SAG", "CHA"]
cells.forEach(function(cell) {
sResultat = Math.round(Math.random() * 18) + 1;
document.getElementsByClassName(cell)[0].innerText = sResultat
})
}
generateNumber()
<div class="table">
<table>
<tr>
<th>FORce</th>
<th>DEXtérité</th>
<th>CONstitution</th>
<th>INTelligence</th>
<th>SAGesse</th>
<th>CHArisme</th>
</tr>
<tr>
<td class="FOR">
</td>
<td class="DEX">
</td>
<td class="CON">
</td>
<td class="INT">
</td>
<td class="SAG">
</td>
<td class="CHA">
</td>
</tr>
</table>
</div>
function GenerateNumber(){
var tds = document.querySelectorAll('.table td');
return Array.prototype.forEach.call(tds, function(td){
td.innerHTML = Math.round(Math.random()*18) + 1;
});
}
window.onload = GenerateNumber;
<div class="table">
<table>
<tr>
<th>FORce</th>
<th>DEXtérité</th>
<th>CONstitution</th>
<th>INTelligence</th>
<th>SAGesse</th>
<th>CHArisme</th>
</tr>
<tr>
<td class = "FOR">
5
</td>
<td class = "DEX">
4
</td>
<td class= "CON">
4
</td>
<td class ="INT">
4
</td>
<td class="SAG">
4
</td>
<td class="CHA">
3
</td>
</tr>
</table>
</div>
I am trying to dynamically create an object in javascript. Here is the JS code that I have written:
var table = $("#eidtPersonalInfoTbl");
var trs = table.find('tr');
var obj = { };
$(trs).each(function(index, row){
var field = $(row).find('td').eq(0).html();
var value = $(row).find('td').eq(1).html();
eval('obj.' + field + ' = ' + value );
});
And here is the HTML markup for the table:
<table class="table" border="1" id="eidtPersonalInfoTbl">
<tr>
<td class="span3 hidden-phone" > Name </td>
<td class="span5"> Name </td>
</tr>
<tr>
<td class="span3 hidden-phone"> Address</td>
<td class="span5"> Address </td>
</tr>
<tr>
<td class="span3 hidden-phone">Area</td>
<td class="span5"> Area</td>
<tr>
<tr>
<td class="span3 hidden-phone">Gender</td>
<td>Male</td> </tr>
<tr>
<td class="span3 hidden-phone" > Salutation </td>
<td class="span5"> Dr</td>
</tr>
<tr>
<td class="span3 hidden-phone">State</td>
<td class="span5"> State </td>
<tr>
<tr>
<td class="span3 hidden-phone">City</td>
<td class="span5"> City </td>
</tr>
<tr>
<td class="span3 hidden-phone" > Postel Code </td>
<td class="span5"> Postel Code </td>
</tr>
<tr>
<td class="span3 hidden-phone" > Phone# </td>
<td class="span5"> 04128741 </td>
</tr>
<tr>
<td class="span3 hidden-phone" > Mobile# </td>
<td class="span5"> 03218741525</td>
</tr>
<tr>
<td class="span3 hidden-phone" > Cover Letter </td>
<td>Cover letter goes here</td>
</tr>
<tr>
<td> <input type="submit" name="per-det" class="btn btn-success span5" value="Update and Cont."></td>
</tr>
Whenever I try to execute this, it gives me this error
Undefined variable Name
It's far easier, safer and faster to use this:
obj[field] = value;
... instead of eval('obj.' + field + ' = "' + value + '"'), which obviously has the same purpose.
You see what you see now because value should be wrapped in the quotation marks. For example, if both field and value are equal to 'Name' (string), the evalled expression as it stands now will look like...
obj.Name = Name
... obviously causing the 'Undefined variable Name' error.
Two sidenotes here. First, there's no sense wrapping trs in jQuery object again in this line...
$(trs).each(function(index, row)
... as it already IS a jQuery object (result of table.find('tr')). This redundancy is easier to see if you follow a simple convention: preceding names of all the variables that are used to store jQuery objects with $:
var $table = $("#eidtPersonalInfoTbl");
var $trs = $table.find('tr');
// ...
// $($trs) - obviously redundant
Second, it's a bit wasting to go through DOM twice in these lines:
var field = $(row).find('td').eq(0).html();
var value = $(row).find('td').eq(1).html();
I'd rather have it rewritten it like this:
var $tds = $(row).find('td');
var field = $tds.eq(0).html(); // or just $tds[0].innerHTML;
var value = $tds.eq(1).html(); // or just $tds[1].innerHTML;