如何为特定的 <td> 赋予背景颜色?为此,我必须在第三个文本框中输入位置编号(使用 java 脚本)

Posted

技术标签:

【中文标题】如何为特定的 <td> 赋予背景颜色?为此,我必须在第三个文本框中输入位置编号(使用 java 脚本)【英文标题】:How to give background-color to specific <td>? For that i have to enter position number in 3rd textbox (using java script) 【发布时间】:2022-01-07 05:11:45 【问题描述】:

我创建了三个文本框。

第一个文本框将数字作为一行 第二个文本框以数字为列 第三个文本框采用一个数字(位置)在表格中突出显示该数字 如何在 javascript 中做第三点
<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">
    <script src="7.js"></script>
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="text1">
    <input type="text" name="" id="text2">

<label for="color">Which cell to color</label>
<input type="text" name="" id="color">
    <input type="button" value="Generate" onclick="h()">
    <br>

<!--javascript code-->
<script>
function h()
var a=document.getElementById("text1").value;
var b=document.getElementById("text2").value;
var col=document.getElementById("color").value;
var g=parseInt(col);
document.write("<table border='1'>");
var c=1;
for(i=0;i<a;i++)

    document.write("<tr>");
    for(j=0;j<b;j++)
    
document.write("<td>",c++,"</td>");


    document.write("</tr>");
   

document.write("</table>");


</script>

</body>
</html>


【问题讨论】:

希望对您有所帮助codepen.io/Maniraj_Murugan/pen/ExwxGze 【参考方案1】:

<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">
  <script src="7.js"></script>
  <title>Document</title>
</head>

<body>
  <input type="text" name="" id="text1">
  <input type="text" name="" id="text2">

  <label for="color">Which cell to color</label>
  <input type="text" name="" id="color">
  <input type="button" value="Generate" onclick="h()">
  <br>

  <!--javascript code-->
  <script>
    function h() 
      var a = document.getElementById("text1").value;
      var b = document.getElementById("text2").value;
      var col = document.getElementById("color").value;
      var g = parseInt(col);
      document.write("<table border='1'>");
      var c = 1;
      for (i = 0; i < a; i++) 
        document.write("<tr>");

        for (j = 0; j < b; j++) 
          if (parseInt(col) == c) 
            console.log(col)
            document.write("<td style='background-color: yellow;'>", c++, "</td>");
           else 

            document.write("<td>", c++, "</td>");
          


        
        document.write("</tr>");

      
      document.write("</table>");

    
  </script>

</body>

</html>

【讨论】:

【参考方案2】:

设置所有td第n个位置的背景

<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">
    <script src="7.js"></script>
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="text1">
    <input type="text" name="" id="text2">

<label for="color">Which cell to color</label>
<input type="text" name="" id="color">
    <input type="button" value="Generate" onclick="h()">
    <br>

<!--javascript code-->
<script>
function h()
var a=document.getElementById("text1").value;
var b=document.getElementById("text2").value;
var col=document.getElementById("color").value;
var g=parseInt(col);
document.write("<table border='1'>");
var c=1;
for(i=0;i<a;i++)
    document.write("<tr>");
    for(j=0;j<b;j++)
        var background = '';
        if(g == j)
            background = 'style="background-color:red"';
        
        document.write("<td "+background+">",c++,"</td>");
    
    document.write("</tr>");

document.write("</table>");


</script>

</body>
</html>

【讨论】:

以上是关于如何为特定的 <td> 赋予背景颜色?为此,我必须在第三个文本框中输入位置编号(使用 java 脚本)的主要内容,如果未能解决你的问题,请参考以下文章

如何为 Font Awesome 图标赋予背景颜色?

如何为我的帖子列表中的每个帖子赋予随机颜色

Flutter - 如何为 IconButton 赋予颜色?

如何为垂直文本赋予 2 种不同颜色的字体,以便文本 1 和文本 2 在一个“div 类”中?

如何为侧菜单中的特定选项赋予功能

如何为列表中的项目添加背景颜色