DOM编程之接收值到table【博学谷学习记录】超强总结，用心分享

本文链接：https://blog.csdn.net/brother_hu/article/details/126455310

标题需求：实现如下添加表格

在这里插入图片描述

分析：获取三个input的dom对象，添加onclick事件函数，获取三个input的value，创建表格行和三个表格依次将value填入表格。

错误代码示例

<!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>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        
        td,
        th {
            border: 1px solid #333;
        }
        
        thead tr {
            height: 40px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <b>商品名：</b>
    <input type="text" name="" id="inp1">
    <b>价格：</b>
    <input type="text" name="" id="inp2">
    <b>数量：</b>
    <input type="text" name="" id="inp3">
    <button>添加</button>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>商品名</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>

        
        // 1.先去准备好学生的数据
        var datas = [{
            name: '可口可乐',
            subject: 3,
            score: 1
        }, {
            name: '百事可乐',
            subject: 3,
            score: 1
        }, {
            name: '德芙',
            subject: 20,
            score: 2
        }, {
            name: '阿尔卑斯棒棒糖',
            subject: 1,
            score: 10
        }, {
            name: '大猪蹄子',
            subject: 40,
            score: 4
        }];
        // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) { // 外面的for循环管行 tr
            // 1. 创建 tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 datas[i]
            for (var k in datas[i]) { // 里面的for循环管列 td
                // 创建单元格 
                var td = document.createElement('td');
                // 把对象里面的属性值 datas[i][k] 给 td  
                // console.log(datas[i][k]);
                td.innerHTML = datas[i][k];
                tr.appendChild(td);
            }
            // 3. 创建有删除2个字的单元格 
            var td = document.createElement('td');
            td.innerHTML = '<a href="javascript:;">删除 </a>';
            tr.appendChild(td);

        }
        // 4. 删除操作 开始 
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  node.removeChild(child)  
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
        // for(var k in obj) {
        //     k 得到的是属性名
        //     obj[k] 得到是属性值
        // }
        var ipt1=document.getElementById('inp1');
        var ipt2=document.getElementById('inp2');
        var ipt3=document.getElementById('inp3');
        var btn=document.querySelector('button');
        btn.onclick= function () {
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            
            var td1 = document.createElement('td');
            td.innerHTML = ipt1.value;
            tr.appendChild(td1);
            var td2 = document.createElement('td');
            td.innerHTML = ipt2.value;
            tr.appendChild(td2);
            var td3 = document.createElement('td');
            td.innerHTML = ipt3.value;
            tr.appendChild(td3);
        };    
    </script>
</body>

</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>
<style>
  div{
    text-align: center;
  }
  input{
    height: 30px;
    margin: 20px;
  }
  table{
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #c0c0c0;
    width: 500px;
    margin: 100px auto;
  }
  th {
      background-color: skyblue;
      font: bold 16px "微软雅黑";
      color: #fff;
      height: 24px;
  }
  
  td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
  }
</style>
<body>
  <div>
    商品名:<input type="text" class="goods">
    价格:<input type="text" class="price">
    数量:<input type="text" class="num">
    <button>添加</button>
  </div>
  <table>
    <tr>
      <th>商品名</th>
      <th>价格</th>
      <th>数量</th>
    </tr>
    <tr>
      <td>可口可乐</td>
      <td>3</td>
      <td>1</td>
    </tr>
    <tr>
      <td>百世可乐</td>
      <td>3</td>
      <td>1</td>
    </tr>
    <tr>
      <td>德芙</td>
      <td>20</td>
      <td>2</td>
    </tr>
    <tr>
      <td>阿尔卑斯棒棒糖</td>
      <td>1</td>
      <td>10</td>
    </tr>
  </table>
</body>
<script>
获取DOM对象
  var goods=document.querySelector('.goods'),
      price=document.querySelector('.price'),
      num=document.querySelector('.num'),
      btn=document.querySelector('button'),
      tab=document.querySelector('table');
      添加事件
  btn.onclick=function(){
    var tr=document.createElement('tr');创建行
    tr.innerHTML='<td>'+goods.value+'</td><td>'+price.value+'</td><td>'+num.value+'</td>';以拼接字符串方式拼接三个表格，并插入获取的value
    tab.appendChild(tr)添加到行
  }

</script>
</html>