js动态表格创建

1、一个table表格，表格分为两个部分，上面是thead表头，表头里面仅一行，有3列（th), 下面是tbody表格内容，要求tbody中的每一行都是用js动态创建的
2、通过点击“生成”按钮，在div标签里生成一个自定义行数和列数的表格
3、点击按钮增加表格行
4、点击按钮删除单元格
5、任意增删表格行

1、一个table表格，表格分为两个部分，上面是thead表头，表头里面仅一行，有3列（th), 下面是tbody表格内容，要求tbody中的每一行都是用js动态创建的

在这里插入图片描述
1 布局

<table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            
        </tbody>
</table>

2 样式

	   *{
            margin: 0;
            padding: 0;
        }
        td{
            border:1px solid;
        }
        th{
            border:2px solid red;
        }

3 js动态创建表格：

第一步：先准备数据，一共有三个人的信息，作为三个对象放进数组中

 var arr=[{
          name:'Jack',
          age:18,
          gendar:'男'
      },
      {
          name:'Rose',
          age:19,
          gendar:'女'
      },
      {
          name:'Danny',
          age:20,
          gendar:'男'
      }
      ]

第二步：创建行

//创建行
      var str=''
      arr.forEach(function(){
          str+='<tr>'
          str+='</tr>'
      })

第三步：创建单元格，同时填充内容

for(var key in a){
                  str+='<td>'+a[key]+'</td>'
              }

第四步：js给表格设置样式（在css中也可以设置）

   	 document.querySelector('table').width='300px'
     document.querySelector('table').height='100px'
     document.querySelector('table').style.borderCollapse='collapse'
     document.querySelector('table').style.textAlign='center'

4 完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <style>
      *{
          margin: 0;
          padding: 0;
      }
      td{
          border:1px solid;
      }
      th{
          border:2px solid red;
      }
  </style>
</head>
<body>
  <table>
      <thead>
          <tr>
              <th>姓名</th>
              <th>年龄</th>
              <th>性别</th>
          </tr>
      </thead>
      <tbody>

      </tbody>
  </table>
  <script>
      //准备数据
      var arr=[{
          name:'Jack',
          age:18,
          gendar:'男'
      },
      {
          name:'Rose',
          age:19,
          gendar:'女'
      },
      {
          name:'Danny',
          age:20,
          gendar:'男'
      }
      ]
      //创建行
      var str=''
      arr.forEach(function(a){
          str+='<tr>'
              //创建单元格，同时填充内容
              for(var key in a){
                  str+='<td>'+a[key]+'</td>'
              }
          str+='</tr>'
      })
      //将创建好的内容放入tbody标签内
      document.querySelector('tbody').innerHTML=str
      //js给表格设置样式
      document.querySelector('table').width='300px'
      document.querySelector('table').height='100px'
      document.querySelector('table').style.borderCollapse='collapse'
      document.querySelector('table').style.textAlign='center'
  </script>
</body>
</html>

2、通过点击“生成”按钮，在div标签里生成一个自定义行数和列数的表格

在这里插入图片描述
1 布局

 行数：<input type="text" id="hang" value="">
  列数：<input type="text" id="lie" value="">
  <input type="button" value="生成" onclick="fn()">
  <div id="divid"></div>

2 js动态创建表格：

第一步：获得行数和列数

		 var h=document.getElementById('hang')-0
         var l=document.getElementById('lie')-0

第二步：生成表格

var taBle="<table style='border:1px solid red;border-collapse:collapse;text-align:center'>"
    taBle+='</table>'

第三步：生成行

   for(var i=1;i<=h;i++){
                 taBle+='<tr>'
                 taBle+='</tr>'
             }

第四步：生成单元格

   		for(var j=1;j<=l;j++){
                       taBle+='<td style="border:1px solid;width:50px;height:20px">'+'aaa'+'</td>'
                   }

第五步：将表格放进div里

divid.innerHTML=taBle

3 全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 1 布局 -->
    行数：<input type="text" id="hang" value="">
    列数：<input type="text" id="lie" value="">
    <input type="button" value="生成" onclick="fn()">
    <div id="divid" style="margin: 10px;"></div>
    <script>
        //2 点击按钮时运行的函数
        function fn(){
            //第一步：获得行数和列数
            var h=document.getElementById('hang').value-0
            var l=document.getElementById('lie').value-0
            //第二步：生成表格
            var taBle="<table style='border:1px solid red;border-collapse:collapse;text-align:center'>"
               
               //第三步： 生成行
               for(var i=1;i<=h;i++){
                   taBle+='<tr>'
                    //第四步：生成单元格
                    for(var j=1;j<=l;j++){
                        taBle+='<td style="border:1px solid;width:50px;height:20px">'+'aaa'+'</td>'
                    }
                   taBle+='</tr>'
               }
               taBle+='</table>'
              
               //第五步：将表格放进div里
               divid.innerHTML=taBle
        }
    </script>
</body>
</html>

3、点击按钮增加表格行

在这里插入图片描述
1 布局

<input type="button" value="增加表格行" onclick="fn2()">
    <table>

    </table>

2 js动态创建表格：

获取表格

var tAble=document.querySelector('input+table')
        tAble.setAttribute('style','color:gold;border-collapse:collapse')
        tAble.width='300px'

生成表头

 var brr=['姓名','年龄','性别']
        var tHead='<thead>'
        brr.forEach(function(a){
            tHead+='<th style="border:1px solid red">'+a+'</th>'
        })
         tHead += '</thead>'
         tAble.innerHTML=tHead

点击按钮增加表格行

function fn2(){
          var   tR=document.createElement('tr')   
          var   str='<td style="border:1px solid #000">a</td><td style="border:1px solid #000">a</td><td style="border:1px solid #000">a</td>'
          tR.innerHTML=str
                tAble.appendChild(tR)
        }

3 全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 布局 -->
    <input type="button" value="增加表格行" onclick="fn2()">
    <table>

    </table>
    <script>
        //获取表格
        var tAble=document.querySelector('input+table')
        tAble.setAttribute('style','color:gold;border-collapse:collapse')
        tAble.width='300px'
        //生成表头
        var brr=['姓名','年龄','性别']
        var tHead='<thead>'
        brr.forEach(function(a){
            tHead+='<th style="border:1px solid red">'+a+'</th>'
        })
         tHead += '</thead>'
         tAble.innerHTML=tHead
        //点击按钮增加表格行
        function fn2(){
          var   tR=document.createElement('tr')   
          var  str='<td style="border:1px solid #000">a</td><td style="border:1px solid #000">a</td><td style="border:1px solid #000">a</td>'
          tR.innerHTML=str
                tAble.appendChild(tR)
        }
    </script>
</body>
</html>

4、点击按钮删除单元格

1 布局

<input type="button" value="删除表格行" id="dele" onclick="del()">
   <table></table>

2 动态生成表格

第一步生成表头

 tabLe=document.querySelector('#dele+table')
        tabLe.width='300px'
        tabLe.style.borderCollapse='collapse'
       var crr=['姓名','年龄','性别']
       var tHEad='<thead>'
       crr.forEach(function(a){
            tHEad+='<th style="border:1px solid blue">'+a+'</th>'
       })
       tHEad+='<th style="border:1px solid blue">'+' &nbsp; &nbsp; &nbsp;'+'</th>'
       tHEad+='</thead>'
        tabLe.innerHTML=tHEad

第二步添加内容

var tbOdy=document.createElement('tbody')
         var drr=[{
            name:'Jack',
            age:18,
            gendar:'男',
        },
        {
            name:'Rose',
            age:19,
            gendar:'女'
        },
        {
            name:'Danny',
            age:20,
            gendar:'男'
        }
        ]
        var str2=''
        for(var i=0;i<drr.length;i++){
            str2+='<tr>'
                for(var key in drr[i]){
                    str2+='<td style="border:1px solid">'+drr[i][key]+'</td>'
                }
                str2+='<td style="border:1px solid">'+'<input type="checkbox" name="checkRow">'+'</td>'
            str2+='</tr>'
        }
        tbOdy.innerHTML=str2
        tabLe.appendChild(tbOdy)

第三步点击按钮删除表格行

function del(){
            var text=document.getElementsByName('checkRow')
            console.log(text)
            for(var i=0;i<text.length;i++){
                if(text[i].checked){
                    var TR=text[i].parentNode.parentNode
                    console.log(TR)
                    tbOdy.removeChild(TR)
                    i--
                }
            }
        }

3 全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   <input type="button" value="删除表格行" id="dele" onclick="del()">
   <table></table>
   <script>
       //第一步 生成表头
        tabLe=document.querySelector('#dele+table')
        tabLe.width='300px'
        tabLe.style.borderCollapse='collapse'
       var crr=['姓名','年龄','性别']
       var tHEad='<thead>'
       crr.forEach(function(a){
            tHEad+='<th style="border:1px solid blue">'+a+'</th>'
       })
       tHEad+='<th style="border:1px solid blue">'+' &nbsp; &nbsp; &nbsp;'+'</th>'
       tHEad+='</thead>'
        tabLe.innerHTML=tHEad
         //第二步 添加内容
         var tbOdy=document.createElement('tbody')
         var drr=[{
            name:'Jack',
            age:18,
            gendar:'男',
        },
        {
            name:'Rose',
            age:19,
            gendar:'女'
        },
        {
            name:'Danny',
            age:20,
            gendar:'男'
        }
        ]
        var str2=''
        for(var i=0;i<drr.length;i++){
            str2+='<tr>'
                for(var key in drr[i]){
                    str2+='<td style="border:1px solid">'+drr[i][key]+'</td>'
                }
                str2+='<td style="border:1px solid">'+'<input type="checkbox" name="checkRow">'+'</td>'
            str2+='</tr>'
        }
        tbOdy.innerHTML=str2
        tabLe.appendChild(tbOdy)
        //第三步 点击按钮删除表格行
        function del(){
            var text=document.getElementsByName('checkRow')
            console.log(text)
            for(var i=0;i<text.length;i++){
                if(text[i].checked){
                    var TR=text[i].parentNode.parentNode
                    console.log(TR)
                    tbOdy.removeChild(TR)
                    i--
                }
            }
        }
   </script>
</body>
</html>

5、任意增删表格行

在这里插入图片描述
1 布局

 <input type="button" value="增加表格行" id="aDD" onclick="add()">
    <input type="button" value="删除表格行" id="deTe" onclick="dele()">
    <table id="table5">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

2 js 动态创建表格

点击按钮增加表格

var tbodY=document.querySelector('#table5 tbody')
        function add(){
            var tatr=document.createElement('tr')
            var tatd1=document.createElement('td')
            var tatd2=document.createElement('td')
            var tatd3=document.createElement('td')
            tatr.appendChild(tatd1);
            tatr.appendChild(tatd2);
            tatr.appendChild(tatd3);
            tbodY.appendChild(tatr);
        }

点击按钮删除最后一行

 function dele(){
            tbodY.removeChild(tbodY.lastChild)
        }

3 全部代码

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #table5{
            width: 300px;
            text-align: center;
            border-collapse: collapse;
        }
        #table5 td,th{
            border:1px solid;
            height: 30px;
        }
        
    </style>
</head>
<body>
    <h3>5、任意增删表格行</h3>
    <!-- 布局 -->
    <input type="button" value="增加表格行" id="aDD" onclick="add()">
    <input type="button" value="删除表格行" id="deTe" onclick="dele()">
    <table id="table5">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        // 点击按钮增加表格
        var tbodY=document.querySelector('#table5 tbody')
        function add(){
            var tatr=document.createElement('tr')
            var tatd1=document.createElement('td')
            var tatd2=document.createElement('td')
            var tatd3=document.createElement('td')
            tatr.appendChild(tatd1);
            tatr.appendChild(tatd2);
            tatr.appendChild(tatd3);
            tbodY.appendChild(tatr);
        }
        //点击按钮删除最后一行
        function dele(){
            tbodY.removeChild(tbodY.lastChild)
        }
    </script>
</body>
</html>

来源：CSDN

作者：qq_42736234

链接：https://blog.csdn.net/qq_42736234/article/details/103747537

标签

动态