js隔行换色功能制作详情

let data = 100;
//获取tbody
let a = document.getElementsByTagName("tbody")[0];
// 添加点击事件
function tt() {
  //创建一个tr标签
  let x = document.createElement("tr");
  //创建一个td标签
  let x1 = document.createElement("td");
  // 找到tbody中现有的tr标签数量
  let f=a.children.length
  // 设置第一个td标签的内容为现有tr标签数量+1
  x1.innerHTML=f+1;
  //创建一个td标签
  let x2 = document.createElement("td");
  // 设置第二个td标签的内容为 data
  x2.innerHTML=data;
  // data 加 100
  data+=100;
  //创建一个td标签
  let x3 = document.createElement("td");
  // 设置第三个td标签的内容为 button 标签，并给按钮设置 del 删除事件
  x3.innerHTML = '<button onclick="pp(event)">删除</button>';
  // 把第一个td添加到tr中
  x.appendChild(x1);
  // 把第二个td添加到tr中
  x.appendChild(x2);
  // 把第三个td添加到tr中
  x.appendChild(x3);
  // 将tr标签添加到tbody标签中
  a.appendChild(x);
  
  isColor()
}
 
 
//删除事件
function pp(event) {
  // 通过 event 事件源获取当前点击的button按钮，再找他的父元素的父元素 tr 标签
  let ss=event.target.parentNode.parentNode
  // 通过 tbody 删除这个 tr标签
  a.removeChild(ss)
  isColor();
  isNum();
}
 
// 换色
function isColor() {
  // 获取tbody中所有的tr标签
  let f=a.children
  // 循环所有的tr标签 判断当前行是否为奇数 为奇数设置为白色 否则设置为粉色
  for(let z=0;z<f.length;z++){
    if(z%2!=1){
      f[z].style.backgroundColor="white";
    }else{
      f[z].style.backgroundColor="pink";
    }
  }
}
 
// 重新排序序号
function isNum() {
  // 获取tbody中所有的tr标签
  let f=a.children
  // 循环所有的 tr 标签
  for(let i=0;i<f.length;i++){
    // 设置当前的 tr 标签内容为 i + 1;
    f[i].children[0].innerHTML=i+1
  }
}