js循环生成表格

1.获取dom元素

<div class="exchange" id="box">1<p></p></div>
<div>2</div>

document.getElementTagName;//获取标签
//console.log(document.getElementsByTagName("div")) 

document.getElementsByClassName//获取类名
// console.log(document.getElementsByClassName("exchange"));

document.getElementById//获取id
//console.log(document.getElementById("box"))

document.querySelector//获取满足条件的第一个元素
//console.log(document.querySelector("#box"))
//console.log(document.querySelector(".exchange p"))

document.querySelectorAll//获取满足条件的多个元素
//console.log(document.querySelector("div"))//多个

2.操作元素

通过循环来生成tr和td

  <div class="exchange" id="box">1 </div>

var trStr="";
for(var i=0;i<3;i++){
    // 通过循环来生成td的字符串
    var tdStr = "";
    for (var j = 0; j < 3; j++) {
            tdStr += "<td>td里内容</td>";
        }
        // console.log(tdStr);
        //判断行数的奇偶数
        if(i%2==0){
            trStr+="<tr style='background:blue'>"+tdStr+"</tr>";//偶数行就添加背景色
        }else{
            trStr+="<tr>"+tdStr+"</tr>";//奇数行就添加背景色
        }

}
var tableStr="<table border='1'>"+trStr+"</table>";//生成table
var divEle = document.querySelector(".exchange");//获取div
divEle.innerHTML=tableStr;

3创建dom元素

document.createElement("p")//创建元素
p.innerHTML = "我是p内容";
//注意：innerHTML后面需要接收的是字符串

//appendChild把对象添加到指定的位置
var liEle=document.createElement("li")//创建li
var pEle=document.createElement("p")//创建p
liEle.appendChild(pEle);//把p放在li里面  即<li><p></p></li>

  // 1.innerHTML需要字符串  appendChild需要对象  
  // 2.innerHTML会替换html  appendChild会追加html

4用元素创建表格

var tableEle = document.createElement("table") ; // 创建table只需要一个标签名 
// 通过循环来创建tr，一旦创建完成就会加入到tableEle里面
for(var i=0;i<3;i++){
var trEle = document.createElement("tr");
            if(i%2==0){
                // 索引是偶数的位置把创建的tr添加背景颜色；
                trEle.style.backgroundColor = "blue";
            }
            // 每一行tr就创建了3个td ，总共就创建了9个td

            for(var j=0;j<3;j++){
                // 向td里添加内容
                    var tdEle = document.createElement("td");
                td1.innerText = "内容";
                trEle.appendChild(tdEle);
            }
tableEle.appendChild(trEle); // appendChild会追加
 }
console.log(tableEle);
        // 需要把组装好table放到 body
document.body.appendChild(tableEle);