【问题标题】:Create table and change <td> background color using JavaScript [closed]使用 JavaScript 创建表并更改 <td> 背景颜色 [关闭]
【发布时间】:2015-04-27 13:32:49
【问题描述】:

我的任务是:我想创建一个带有按钮的页面和一个从 1 到 20 的水平结果表。

当您单击一个按钮时,您会获得一个随机数,将其显示在页面上,并且带有该数字的单元格应将颜色变为绿色。如果该数字第二次出现,则将其设为灰色。

如果单元格已经是灰色的,则不会发生任何事情。就是这样,这是my code 如果可以的话请帮帮我。谢谢

【问题讨论】:

  • 链接代码或至少创建一个集成到您的问题的 sn-p 代码,以便了解您的错误在哪里或到目前为止您做了什么。
  • 这看起来像是一个小需求规范,而不是一个问题。

标签: javascript jquery html random numbers


【解决方案1】:

试试这个

function cheack(){  
  var randNumb = (Math.floor(Math.random()*20)+1);
  var numbs = $(document).find('td')[randNumb];
  var c = $(".green").index("td");

  if ((!$(numbs).hasClass('green')) && (!$(numbs).hasClass('grey')))
    {
      $(numbs).addClass('green');
    }
else
  {
    $(numbs).addClass('grey');
  }

}

http://jsbin.com/rubomehura/1/

【讨论】:

    【解决方案2】:

    使用if 来检查该区域是绿色还是灰色,然后决定相应的操作:

          if(!numbs.getElementsByTagName("td")[i].getAttribute("class")) {
            numbs.getElementsByTagName("td")[i].setAttribute("class", "green");
          } else if(numbs.getElementsByTagName("td")[i].getAttribute("class") == "green") {
            numbs.getElementsByTagName("td")[i].setAttribute("class", "grey");
          } else {
            // do nothing.. 
          }
    

    查看JSFiddle

    ps:你几乎没有使用 jQuery,主要是 vanilla JS。

    【讨论】:

    • 谢谢朋友,我现在是初学者
    【解决方案3】:

    您可以在点击时使用 am if 语句

    <td onclick:"checkClass(this)"></td>/*Example of your td*/
    
    function checkClass(this){
        /*check if class element is already green*/
        if($(this).attr("class")=="green")
        {
          /*if so them change to gray*/
          $(this).attr("class","gray") ; 
        }
        else if($(this).attr("class")=="gray")
        {
         /*do noting*/
        }
        else
        {
          /*first time you click set green*/
          $(this).attr("class","gray");
        }
    }
    

    【讨论】:

      猜你喜欢
      • 2014-03-22
      • 2014-12-25
      • 1970-01-01
      • 2015-08-05
      • 1970-01-01
      • 1970-01-01
      • 2014-08-07
      • 1970-01-01
      • 2015-09-14
      相关资源
      最近更新 更多