Question

这是用于创建动态表格的javascript代码，用于创建填字游戏

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

输出是这样的

我想计算一下我用getelementsbytagname（）试过的具有不同功能的黑匣子，但它不起作用请帮帮我

Answer 1

我建议您使用CSS进行显示。为此，您必须为每个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

虽然可以通过样式属性进行查询，但我认为使用类而不是内联样式创建后框可能会更好：

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

添加所需的CSS：

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

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

然后只需查询你想要的课程：

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

Answer 3

＆＃13;

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

＆＃13;

Answer 4

您可以将此用于黑匣子的计数。您可以按标签名称获取元素。您可以通过className获取它，这是您可以轻松获得计数的最佳方式。

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

改变CSS的建议很棒，但是如果你有理由保留它并且仍然想要计算，那么你可以去：

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

参考文献：https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp

如何获取javascript创建的动态表的css属性？

5 个答案: