如何获取JavaScript创建的动态表的CSS属性？

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

Answer 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; } 

Answer 2

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;

Answer 3

 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() 

Answer 4

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);

Answer 5

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