使用JavaScript创建表并更改背景颜色

时间:2015-02-25 14:04:07

标签: javascript jquery html random numbers

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

当您单击按钮时,您会得到一个随机数,将其显示在页面上,具有此编号的单元格应将颜色更改为绿色。如果该号码第二次出现,请将其设为灰色。

如果细胞已经是灰色,则没有任何反应。如果可以的话,那就是my code plth帮助我。谢谢

3 个答案:

答案 0 :(得分:1)

您可以在点击

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

答案 1 :(得分:1)

使用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。

答案 2 :(得分:0)

试试这个

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/