I've generated a table in my html by using this code:
var board=document.getElementById("tab");
for(var i=0; i<lvl1.rows; i++ )
{
var row=board.insertRow();
for(var j=0; j<lvl1.cols; j++)
{
var cell = row.insertCell();
}
}
The point is to keep the design of the page almost totally separated from the game engine (creating a Minesweeper game).
Imagine I want to change the colour of the cell in position [2][3]. How can I change the background colour of this cell if I don't have the "td's" and "tr's" in the HTML code?
Thanks
To access the ith cell of row j, use:
board.rows[j].cells[i]
You can set the background color style of a cell like this.
board.rows[j].cells[i].style.backgroundColor = "red";
Related
I am trying to make a color swatch that can be used to select colors from. My thought is to create a table, and have each cell of the table be a button from which the user can click to select the color they want to use. Th this point I have not even tried to give my buttons any functionality until I can actually determine that they are generating I am simply trying to lay out the table at this point and test whether or not the buttons are appending to each cell. This is the reason for the innerHTML = 'test'. However nothing is appearing so I fear the buttons are not properly appending. I am brand new to coding and would prefer to stick with vanilla JS for the time being. Mahalo
// get reference for the pixelPainter div
let body = document.getElementById('pixelPainter');
//create the color swatch
let swatch = document.createElement('table');
swatch.id = 'swatch_base';
for (var i = 0; i<6; i++){
let row = document.createElement('tr');
//create columns and attach buttons to each cell so that the buttons can be selected to choose a color
for (var i = 0; i<10; i++){
let cell = document.createElement('td');
let colorButton = document.createElement('button');
colorButton.className('colorChoice');
colorButton.innerHTML('test'); // just trying to test for button
cell.appendChild(colorButton);
row.appendChild(cell);
}
swatch.appendChild(row);
}
body.appendChild(swatch);
swatch.setAttribute('border', '1');
try this https://jsfiddle.net/qnrra88L/
actually, className and innerHTML are not a functions, also className should be classNames
change these two lines
colorButton.className('colorChoice');
colorButton.innerHTML('test');
as
colorButton.classNames = 'colorChoice';
colorButton.innerHTML = 'test';
I'm trying to make a simple flash-card game in JavaScript using JQuery. In one part of the game, you should click on a row in a "table" (tablica) made out of divs (tablica[i][j]) to swap the cells in that row (to put the content in the cell in the correct column). Here is the relevant piece of code:
for (var j=0; j<odgovor1.length; j++)
for (var i=1; i<3; i++)
{
tablica[i][j]=document.createElement("div");
tablica[i][j].setAttribute("class","rijecUDrugomDijelu");
if (i===1) tablica[i][j].appendChild(document.createTextNode(odgovor1[j]));
else if (i===2) tablica[i][j].appendChild(document.createTextNode(odgovor2[j]));
tablica[i][j].style.top=228+27*j;
tablica[i][j].style.left=-153+110+153*i;
tablica[i][j].onclick=eval(
"(function()"+
"{"+
"var tmp=tablica[1]["+j+"].style.left;"+
"tablica[1]["+j+"].style.left=tablica[2]["+j+"].style.left;"+
"tablica[2]["+j+"].style.left=tmp;"+
"tmp=odgovor1["+j+"];"+
"odgovor1["+j+"]=odgovor2["+j+"];"+
"odgovor2["+j+"]=tmp;"+
"})"
);
pozadina.appendChild(tablica[i][j]);
}
When the user clicks on a row in that table, the cells in that row are swapped, and the content of the table is correctly tracked in the string arrays odgovor1 and odgovor2. However, they are swapped without any animation, they are swapped immediately. When I try to apply JQuery animations to the cells (divs) tablica[1][j] and tablica[2][j], the program crashes. Do you know how to do that properly?Again, I assure you, the code above works well now, but when I try to use JQuery animations instead of simply swapping the properties style.left, it crashes.
Using object properties instead of eval appears to work:
for (var j=0; j<odgovor1.length; j++)
for (var i=1; i<3; i++)
{
tablica[i][j]=document.createElement("div");
tablica[i][j].setAttribute("class","rijecUDrugomDijelu");
if (i===1) tablica[i][j].appendChild(document.createTextNode(odgovor1[j]));
else if (i===2) tablica[i][j].appendChild(document.createTextNode(odgovor2[j]));
tablica[i][j].style.top=228+27*j;
tablica[i][j].style.left=-153+110+153*i;
tablica[i][j].redak=j;
tablica[i][j].onclick=
function()
{
var tmp=tablica[1][this.redak].style.left;
$(tablica[1][this.redak]).animate({left:(tablica[2][this.redak].style.left)},500);
$(tablica[2][this.redak]).animate({left:(tmp)},500);
tmp=odgovor1[this.redak];
odgovor1[this.redak]=odgovor2[this.redak];
odgovor2[this.redak]=tmp;
}
pozadina.appendChild(tablica[i][j]);
}
I have a container that have the shape of a circle. I would like to create a grid with 100 columns inside it. I would like to have a function that would create that grid with a shape that will marry the shape of the circle.
So far, I have create a square grid (10x10)
for (var i=0; i<10; i++) {
var $row = $('<div class="row"></div>');
for (var j=0; j<10; j++) {
$row.append('<div class="col-xs-1 ' + (j==0 ? "col-xs-offset-1" : "") + ' grid_cell"><span class="glyphicon glyphicon-user"></span></div>');
}
$("#grid_1").append($row);
};
See the fiddle: https://jsfiddle.net/vo1npqdx/884/
Is there a mathematical theorem that could help for that issue?
---------------------------------------------------------------EDIT--------------------------------------------------------------
I manage doing something like this placing the cells manually (using switch case). Any way to impove it?
https://jsfiddle.net/vo1npqdx/886/
I tried using display:flex property. i didn't create 10x10. My method is completely dynamic. please check this fiddle. https://jsfiddle.net/nc3uLy6L/
I'm trying to add a "clearing" function to my table that calculates totals. So that when person first time presses button that does the calculation, then changes amounts of products and then presses again, the previous answer would be cleared and new added.
I have tried like this:
function clear () {
var table = document.getElementById("pricetable");
var rows = table.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
rows[i].className = "";
var cells = rows[i].getElementsByTagName("td");
for (var j = 1; j < cells.length - 1; j++) {
cells[j].className = "";
}
}
}
Then I'm calling the function in the beginning of my previous function that calculates the amounts and prices:
function calculate () {
clear ();
...
}
But nothing happens. I was thinking that it might have something to do with the fact that I have created the last row and also the last column (which both include the totals) dynamically. The id of the row is lastRow, and the column doesn't have id.
And I don't want to use jquery or add classes, ids etc to the html file. So does anyone know what's wrong with my code?
className just clears styling.
You're looking for innerHTML:
...
for (var j = 1; j < cells.length - 1; j++) {
cells[j].innerHTML = "";
}
...
className refers to the CSS class name(s) applied to an element. Here's what your current code does:
Before
<td class='foo'>999</td>
After
<td class=''>999</td>
innerHTML pretty much does what it says:
Before
<td class='foo'>999</td>
After
<td class='foo'></td>
Also, I just noticed your for loop starts at 1. Hopefully this was intentional ;)
I can see that you are setting the className to nothing rather than setting the innerHTML to nothing...
Try replacing this:
cells[j].className = "";
With this:
cells[j].innerHTML = "";
I would like a script that removes every table row for which the keyword STRING is found in a cell, but my script seems to remove every other row that contains the STRING keyword. Apparently, every time a row is deleted the numbering of the rows is updated? How would one account for this? Thanks in advance.
<script type="text/javascript">
var table = document.getElementById("DatePreferred").firstChild;
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var text = row.cells[0].innerText;
if(text.indexOf("STRING")!=-1){
table.deleteRow(i);
}
}
</script>
Edit: So FishBasketGordo's answer got my script to work for IE and Safari but it wasn't working in FF. I looked into where the error was and apparently FF handles .innerText differently. You have to use .textContent instead. So if you add this below to the script above it will use the appropriate method:
if (row.cells[0].textContent){
var text = row.cells[0].textContent;}
else {var text = row.cells[0].innerText;}
When I need to do something like this, I like to work backward:
for(var i= rowCount - 1; i >= 0; i--) {
var row = table.rows[i];
var text = row.cells[0].innerText;
if(text.indexOf("STRING")!=-1){
table.deleteRow(i);
}
}
Just decrement i using i-- when you remove a row, so that your for loop re-examines the same index (which will now contain the next row).
EDIT: Having looked at your code again, you'll want to compare i to table.rows.length rather than your rowCount variable to account for the changing length of table.rows.