动态创建表格，利用函数封装

吃不饱的我

于 2022-10-14 16:11:50 发布

阅读量116

点赞数

分类专栏：笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/yh_31/article/details/127322571

版权

笔记专栏收录该内容

70 篇文章 0 订阅

订阅专栏

HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">

    </div>

    <script src="./js/common.js"></script>

    <script src="./js/table.js"></script>
    <script>

        // 表头数据
        var headData = ['姓名','年龄','工资','操作'];

         // 数据行 中的数据
         var bodyData = [
            {name: 'yh',age: '18', salary: 100},
            {name: 'yyqx',age: '22', salary: 180},
            {name: 'xy', age: '14', salary: 279},
            {name: 'xd', age: '16', salary: 459},
            {name: 'zy', age: '25', salary: 950}
        ]; 

        

        createTable(my$('box'), headData, bodyData);
    </script>
</body>
</html>

common.js页面

// 写一个函数，处理innerText和textContent的兼容性问题

// 获取元素之间的内容
function getInnerText(element) {
  // 判断element是否支持innerText
  if (typeof element.innerText === 'string') {
    return element.innerText;
  } else {
    return element.textContent;
  }
}
// 设置元素之间的内容
function setInnerText(element, content) {
  // 判断element是否支持innerText
  if (typeof element.innerText === 'string') {
    element.innerText = content;
  } else {
    element.textContent = content;
  }
}

// 获取min-max之间的随机整数
function getRandom(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive 
}

// 根据id获取元素
function my$(id) {
  return document.getElementById(id);
} 


// 处理firstElementChild的兼容性问题
function getFirstElementChild(parent) {
  // 如果当前浏览器 支持firstElementChild
  if (parent.firstElementChild) {
    return parent.firstElementChild;
  }

  var node, nodes = parent.childNodes, i = 0;
  while (node = nodes[i++]) {
      if (node.nodeType === 1) {
          return node;
      }
  }
  return null;
}


// 注册事件 ，处理兼容性问题
function addEventListener(element, eventName, callback) {
  if (element.addEventListener) {
    element.addEventListener(eventName, callback, false);
  } else if (element.attachEvent) {
    element.attachEvent('on' + eventName, callback);
  } else {
    element['on' + eventName] = callback;
  }
}

// 移除事件， 处理兼容性问题
function removeEventListener(element, eventName, callback) {
  if (element.removeEventListener) {
    element.removeEventListener(eventName, callback, false);
  } else if (element.detachEvent) {
    element.detachEvent('on' + eventName, callback);
  } else {
    element['on' + eventName] = null;
  }
}

// 获取页面滚动出去的距离。处理兼容性
function getScroll() {
  return {
    scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
    scrollLeft: document.documentElement.scrollLeft || document.body.scrollLeft
  }
}

 // 获取鼠标在页面上的坐标  解决ie8的问题
 function getPage(e) {
  return {
    pageX: e.clientX + getScroll().scrollLeft,
    pageY: e.clientY + getScroll().scrollTop
  }
}

table.js页面

function createTable(parent, headData, bodyData) {
  // 1 创建表头
  var table = createHead(parent, headData);
  // 2 创建数据行
  createBody(table, bodyData);
}

// 1 创建表头
function createHead(parent, headData) {
  // 1 表头
  var table = document.createElement('table');
  parent.appendChild(table);
  table.border = '1px';
  table.width = '500px';
  table.cellSpacing = 0;

  var thead = document.createElement('thead');
  table.appendChild(thead);

  var tr = document.createElement('tr');
  thead.appendChild(tr);
  tr.style.height = '50px';
  tr.style.backgroundColor = 'lightgray';

  // 生成表头中的列
  headData.forEach(function (item) {
    var th = document.createElement('th');
    tr.appendChild(th);
    setInnerText(th, item);
  })
  return table;
}

// 2 创建数据行
function createBody(table, bodyData) {
  // 2 数据行
  var tbody = document.createElement('tbody');
  table.appendChild(tbody);
  // 设置数据行的内容居中
  tbody.style.textAlign = 'center';

  // 遍历数据
  bodyData.forEach(function (item) {
    // 创建行
    tr = document.createElement('tr');
    tbody.appendChild(tr);
    // 创建列
    // 遍历对象
    for (var key in item) {
      // item[key]
      var td = document.createElement('td');
      tr.appendChild(td);
      setInnerText(td, item[key]);
    }

    // 操作的列
    td = document.createElement('td');
    tr.appendChild(td);
    // 创建删除的超链接
    var link = document.createElement('a');
    link.href = 'javascript:void(0)';
    td.appendChild(link);
    setInnerText(link, '删除');
    // 注册事件
    link.onclick = linkClick;
  });

  // 事件处理函数
  function linkClick() {
    // 提示
    var r = confirm('是否确定删除?');
    if (r) {
      //删除
      // 获取点击删除按钮 所在的行
      var tr = this.parentNode.parentNode;

      tbody.removeChild(tr);
    }
  }
}