How to get css property of dynamic table created by javascript?

Question

This is javascript code for creating dynamic table it creates a crossword

function generateTable(range) {
    document.write("<table style='border: 1px solid black;'>");
    for (var a = 1; a < 10; a++) {
        document.write("<tr >");
        for (var b = 1; b < 10; b++) {
            if (a % 2 == 0 && b % 2 == 0) {
                document.write("<td style='border: 1px solid black;'><button style='width:50px; height:50px; background-color:black'></button></td>");
            } else {
                document.write("<td style='border: 1px solid black;'><button style='width:50px; height:50px; background-color:white' ></button></td>");
            }
        }
        document.write("</tr>");
    }
    document.write("</table>");
}

output is something like this

I want to count the n of black boxes with different function I have tried with getelementsbytagname() but it's not working please help me with this

Start using CSS classes and you'll find your task much easier. — Andy
– Andy, Commented Jan 18, 2018 at 9:45
I have already defined the class but it is not generating table if I define the class inside td tag. — NITISH
– NITISH, Commented Jan 18, 2018 at 9:48

Prajwal · Accepted Answer · 2018-01-18 09:54:12Z

1

I would suggest you to use CSS for displaying purpose. To this, you will have to add class to each of the button.

function generateTable(range) {
  document.write("<table>");
  for (var a = 1; a < range; a++) {
    document.write("<tr >");
    for (var b = 1; b < range; b++) {
      if (a % 2 == 0 && b % 2 == 0) {
        document.write("<td ><button class='black'></button></td>");


      } else {
        document.write("<td ><button class='white'></button></td>");
      }
    }
    document.write("</tr>");
  }
  document.write("</table>");
}
generateTable(10);

console.log("total Black " + document.getElementsByClassName("black").length); //<-- count of black
console.log("total white " + document.getElementsByClassName("white").length); //<-- count of white
//using query selector
console.log("total Black " + document.querySelectorAll(".black").length); //<-- count of black
console.log("total white " + document.querySelectorAll(".white").length); //<-- count of white

table,
td {
  border: 1px solid black;
}

button.black {
  width: 50px;
  height: 50px;
  background-color: black;
}

button.white {
  width: 50px;
  height: 50px;
  background-color: white;
}

edited Jan 18, 2018 at 9:54

answered Jan 18, 2018 at 9:49

Prajwal

4,0485 gold badges30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ahendwh2 Over a year ago

Alternatively to document.querySelectorAll() you can also use document.getElementsByClassName("black")

NITISH Over a year ago

one more help please on clicking on white button how can I make it black?

Prajwal Over a year ago

You will have to add a click event to that button and change the class.

ahendwh2 Over a year ago

@NITISH the following code is one possibility to do this: see jsfiddle

NITISH Over a year ago

can I give each cell an index? Ex 1st (11) second(12) I have tried contacting a and b from both the loops and passing it as id but it's not working

Gorka Hernandez · Accepted Answer · 2018-01-18 09:47:54Z

0

Although querying by style properties is possible, I think you may be better off creating the back boxes using a class instead on inline styles like so:

document.write("<td style='border: 1px solid black;'><button style='box box-black'></button></td>");

Adding the required CSS:

.box {
  width:50px;
  height:50px;
}

.box-black {
  background-color: black;
}

And then simply querying the class you want:

const blackBoxes = document.querySelectorAll('.box-black').length;

answered Jan 18, 2018 at 9:47

Gorka Hernandez

3,96825 silver badges29 bronze badges

Comments

vicky patel · Accepted Answer · 2018-01-18 10:05:29Z

0

function generateTable()
{

document.write("<table style='border: 1px solid black;'>");
for (var a=1; a <10; a++) {
document.write("<tr >");
for(var b=1; b<10; b++) {
if(a%2==0 && b%2==0 )
{
document.write("<td style='border: 1px solid black;'><button id='blk' style='width:50px; height:50px; background-color:black'></button></td>");


}
else
{
document.write("<td style='border: 1px solid black;'><button style='width:50px; height:50px; background-color:white' ></button></td>");
}

}
document.write("</tr>");
}
document.write("</table>");
console.log("BlackBox :"+ document.querySelectorAll('#blk').length)
}

generateTable()

answered Jan 18, 2018 at 10:05

vicky patel

7052 gold badges8 silver badges14 bronze badges

Comments

Hermenpreet Singh · Accepted Answer · 2018-01-18 10:17:54Z

0

You can use this for count number of black box. You can get elements by tag name. You can get it by className which is the best way you can easily get count.

var list = document.getElementsByTagName("Button");
var count=0;
    for(var k=0;k<list.length;k++)
    {
        if(list[k].style.backgroundColor=='red')
            count++;
    }
console.log("number of black box--",count);

answered Jan 18, 2018 at 10:17

Hermenpreet Singh

4746 silver badges17 bronze badges

Comments

John T · Accepted Answer · 2018-01-18 13:58:38Z

0

The advice to change to CSS is great, but if you had reason to leave it as is and still wanted to count, here you go:

var list = document.getElementsByTagName("BUTTON");
var whites = 0, blacks=0;
for (var i=0; i < list.length; i++) {
    color = list[i].style.backgroundColor;
    if (color == 'white') whites++;
    else if (color == 'black') blacks++;

    // to add an index: 
    // list[i].setAttribute('data-index',i+10);
}

console.log('w:'+whites+", b:"+blacks);

References: https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp

edited Jan 18, 2018 at 13:58

answered Jan 18, 2018 at 10:23

John T

3352 silver badges8 bronze badges

3 Comments

NITISH Over a year ago

can I give each cell an index? Ex 1st cell (11) second cell(12) I have tried contacting a and b from both the loops and passing it as id but it's not working

John T Over a year ago

Sure. Is the index the same, or is it an index unique for each color?

John T Over a year ago

I'll add a comment above to show how to add an index to each button. The cells would be by "td" of course, so the code would have to call getElementsByTagName("TD") instead.

Collectives™ on Stack Overflow

How to get css property of dynamic table created by javascript?

5 Answers 5

5 Comments

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related