Home > Web Front-end > JS Tutorial > body text

How to achieve interlaced color change in js

php中世界最好的语言
Release: 2018-04-14 11:55:03
Original
3189 people have browsed it

This time I will show you how to achieve interlaced color change in js, and what are the precautions to achieve interlaced color change in js. The following is a practical case, let's take a look.

<script type="text/javascript">
 function createTable(){
  //创建表格
  var table = document.createElement("table");
  //设置表格的行数
  for(var i=0;i<4;i++){
   var tr = document.createElement("tr");
   //设置表格的列数
   for( var j=0;j<5;j++){
    var td = document.createElement("td");
    tr.appendChild(td);
    //添加文本
    var txt = document.createTextNode("wkk");
    td.appendChild(txt);
   }
   //判断颜色的变换
   if(i%2==0){
    //添加属性(第一种)
    tr.style.backgroundColor = "#f0f";
   } else {
    tr.style.backgroundColor = "#ff0";
   }
   table.appendChild(tr);
  }
  //添加属性(第二种)
  table.setAttribute("border","1px");
  //table.style.border = "solid 1px red";
  table.setAttribute("width","200px");
  table.setAttribute("height","100px");
  //添加到body中
  document.body.appendChild(table);
 }//create table over
 createTable();
</script>
Copy after login
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to implement dynamic cascading loading of easyui's drop-down box (with code)

Through JS Detailed explanation of the steps to obtain and load JSON data

The above is the detailed content of How to achieve interlaced color change in js. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!