js动态生成表格(节点操作)

本文实例为大家分享了js动态生成表格的具体代码，供大家参考，具体内容如下

针对DOM节点操作，该案例效果图如下（代码量不多，就没有结构与行为相分离）：

原生js实现（注释里面解释了做法）：

!DOCTYPE htML>
    html>
     head>
     meta charset="utf-8">
     tITle>
    /title>
     style type="text/css">
 table {
     width: 500px;
     margin: 100px auto;
     border-collapse: collapse;
     text-align: center;
 }
 td, th {
     border: 1px solid #333;
 }
 thead tr {
     height: 40px;
     background-color: #ccc;
 }
     /style>
     /head>
     body>
     table cellspacing="0">
     thead>
     tr>
      th>
    姓名/th>
      th>
    科目/th>
      th>
    成绩/th>
      th>
    操作/th>
     /tr>
     /thead>
     tbody>
     /tbody>
     /table>
     /body>
     script type="text/javascript">
 //因为里面的学生数据都是动态的，我们需要js动态生成 这里我们需要模拟数据，自己定义好数据 // 数据我们采取对象形式储存 //1 先准备好学生的数据 //2 所有数据都是放到tbody里面（多少人，多少行） VAR datas = [{
 name: '刘舒新', subject: 'JavaScript', score: '100' }
, {
 name: '宋祥隆', subject: 'JavaScript', score: '80' }
, {
 name: '崔健', subject: 'JavaScript', score: '90' }
, {
 name: '郄海淼', subject: 'JavaScript', score: '70' }
     ];
     //console.LOG(datas.length);
     var tbody = document.querySelector('tbody');
     for (var i = 0;
     i  datas.length;
 i++) {
     //创建行 trs = document.createElement('tr');
     tbody.appendChild(trs);
 //创建单元格 td的数量取决于每个对象里面的属性个数 for(var k in datas[i]){
     //创建单元格 var td=document.createElement('td');
     //把对象里面的属性值 给td //console.log(datas[i][k]);
     td.innerHTML=datas[i][k];
     trs.appendChild(td);
 }
      //创建操作删除单元格 var td=document.createElement('td');
     td.innerHTML='a href="javascript:;
    " rel="external nofollow" >
    删除/a>
    ' trs.appendChild(td);
 }
     //删除操作 var a=document.querySelectorAll('a');
     for(var i=0;
    ia.length;
i++){
 a[i].onclick=function(){
     tbody.removeChild(this.parentNode.parentNode);
 }
 }
     /script>
    /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• js生成动态表格并为每个单元格添加单击事件的方法
• JS实现动态生成html table表格的方法分析
• JS实现动态生成表格并提交表格数据向后端
• JS控制网页动态生成任意行列数表格的方法
• js动态生成指定行数的表格
• 用js实现的一个根据内容自动生成表格的函数
• 基于JavaScript代码实现自动生成表格
• 用js+xml自动生成表格的东西
• 用按钮触发Javascript动态生成一个表格的代码
• Nodejs获取网络数据并生成Excel表格

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！