css 如何使用JavaScript将乘法表中第1列和第1行的颜色更改为蓝色？

vlurs2pr 于 2023-03-20 发布在 Java

关注(0)|答案(3)|浏览(171)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiplication Table</title>
    <style type="text/css">
        table,th,td{
            border: 2px solid black;
            border-collapse: collapse; 
        }
        td{
            width: 250px; 
            font-size: 30px

        }


    </style>
</head>
<body>
   <table id="mytable"></table>

   <script type ="text/javascript">
    var table=document.getElementById('mytable');
    var output="";
    for(var i=1; i<=10; i++) {
        output+="<tr>";
        for(var j=1; j<=10; j++) {
            
            output+="<td>"+i*j+"</td>";
        }
        output+="</tr>"
    }
    table.innerHTML=output;

   </script>
    
</body>
</html>

下面的代码是HTML格式的。我使用的是基本的javascript代码，我试图将第1行和第1列的数字从1-10的颜色更改为蓝色。到目前为止，看起来我能够呈现乘法数字，但我在更改颜色的逻辑上卡住了。我假设您必须使用if/else语句。

css

来源：https://stackoverflow.com/questions/75770757/how-to-change-the-color-of-column-1-and-row-1-to-blue-in-my-multiplication-table

3条答案

按热度按时间

cwdobuhd1#

如果行 （i） 是1或 （||） 第 （j） 栏为1：

var table = document.getElementById('mytable');
var output = "";
for (var i = 1; i <= 10; i++) {
  output += "<tr>";
  for (var j = 1; j <= 10; j++) {
    if (i == 1 || j == 1)
      output += "<td class='colored'>" + i * j + "</td>";
    else
      output += "<td>" + i * j + "</td>";
  }
  output += "</tr>"
}
table.innerHTML = output;

table,
th,
td {
  border: 2px solid black;
  border-collapse: collapse;
}

td {
  width: 250px;
  font-size: 30px
}

.colored {
  background-color: lightgreen;
}

<html lang="en">

<body>
  <table id="mytable"></table>
</body>

</html>

赞(0）回复(0）举报 2023-03-20

r3i60tvu2#

请使用正确的js代码insertRow()和insertCell()表方法。
剩下的就是使用各种操作符来掌握CSS，例如：nth-child(n)

const myTable = document.querySelector('#my-table');
for(let r=1; r<11; r++)
  {
  let row = myTable.insertRow();
  for(let c=1; c<11; c++)
    row.insertCell().textContent = r * c;
  }

body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
table {
  margin           : 1rem;
  border-collapse  : separate;
  border-spacing   : 1px;
  background-color : lightslategrey ; /* all borders color  */
  }
tr:nth-child(even) td { background-color: #f5f5f5; }
tr:nth-child(odd)  td { background-color: #dfc6c6; }

tr:nth-child(1) td,
tr td:nth-child(1) { 
  background-color: #82bfca; 
  }
td {
  min-width  : 2.4rem;
  padding    : .2rem 0 .1rem 0;
  text-align : center;
  }

<table id="my-table"></table>

赞(0）回复(0）举报 2023-03-20

e7arh2l63#

你知道如果i === 1，它是第一行，你也知道如果j === 1，它是第一列。
按照这个逻辑，可以将style='background: blue;'添加到每个<td>元素（如果它是第一行或第一列）。
下面是一个示例解决方案：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiplication Table</title>
    <style type="text/css">
        table,th,td{
            border: 2px solid black;
            border-collapse: collapse; 
        }
        td{
            width: 250px; 
            font-size: 30px

        }


    </style>
</head>
<body>
   <table id="mytable"></table>

   <script type ="text/javascript">
    var table=document.getElementById('mytable');
    var output="";
    var colorStyle = "style='background: blue;'";
    for(var i=1; i<=10; i++) {
        output+="<tr>";
        for(var j=1; j<=10; j++) {
          var firstRow = i === 1;
          var firstColumn = j === 1;
          var attr = (firstRow || firstColumn) ? colorStyle : '';
          output+="<td " + attr + ">"+i*j+"</td>";
        }
        output+="</tr>"
    }
    table.innerHTML=output;

   </script>
    
</body>
</html>

这是这里最重要的一段代码：

var firstRow = i === 1;
var firstColumn = j === 1;
var attr = (firstRow || firstColumn) ? colorStyle : '';

检查它是否是第一行或第一列，并根据检查结果添加style属性。colorStyle变量在前面定义为：

var colorStyle = "style='background: blue;'";

赞(0）回复(0）举报 2023-03-20

我来回答

css 如何使用JavaScript将乘法表中第1列和第1行的颜色更改为蓝色？

3条答案

相关问题

热门标签

最新问答