简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 利用DOM操作完成一个简易的用户留言，动态生成一个表格（利用DOM元素创建一个用户留言显示区，利用DOM生成表格）2019年5月9日20点
Blogger Information
Blog 49
fans 1
comment 0
visits 44871
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
利用DOM操作完成一个简易的用户留言，动态生成一个表格（利用DOM元素创建一个用户留言显示区，利用DOM生成表格）2019年5月9日20点
Nick的博客
Original
828 people have browsed it

利用DOM元素创建一个用户留言显示区：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易用户留言专区</title>
</head>
<body>
<div >
    <h1 style="margin:0 50px">用户留言专区</h1>
    <label for="comment">请留言：</label>
    <!--留言输入框-->
    <input type="text" id="comment" onkeydown="addComment(this)" style="width: auto">
    <!--留言显示区-->
<!--    reversed有序列表的数字倒序排列-->
    <ol class="list" reversed></ol>

</div>
<script>
    function addComment(comment) {
        // 在控制台中输出keyCode来查看回车键对应的值是13
        // console.log(event.keyCode);
        if (event.keyCode === 13){//用if语句判断是否按了回车键
            //定义item在页面创建一个新标签<li>
            var item = document.createElement("li");
            // item.innerText = comment.value;//为标签内添加文本内容
            item.append(comment.value); // 也可用append()为标签添加文本内容

            // 获取ul标签
            var list = document.querySelector(".list");

            // 用If语句检测如果当前留言列表为空, 则直接插入到到尾部,否则就插入到第一条留言之前
            if (list.childElementCount === 0) {
                list.appendChild(item)
            }else {
                // 如果列表已有留言,则插入到新一条之前
                var first = list.firstElementChild;
                // list.insertBefore(item,first);
                list.prepend(item,first);//在元素的开头位置插入一个li
            }
            // list.appendChild(item);//在ul列表中最后的位置上添加一个li

            // 清空文本框
            comment.value = '';
        }
    }
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


页面显示效果：简易用户留言专区.png


利用DOM生成一个表格：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用JavaScript控制表单</title>
    <style>
        table,th,td{
            border: 1px solid #666;
        }

        table {
            width: 500px;
            text-align: center;
            border-collapse: collapse;
        }

        table caption {
            font-size: 1.2rem;
            margin-bottom: 20px;
        }

        /*在nth-of-type(1)前添加父元素,否则thead,tbody中的第一行都会生效*/
        thead tr:nth-of-type(1) {
            background-color: lightblue;
        }

    </style>
</head>
<body>
<table id="cart1">
    <caption>购物车1</caption>
    <thead>
    <tr>
        <th>编号</th>
        <th>品名</th>
        <th>数量</th>
        <th>单价</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>1</td>
        <td>手机</td>
        <td>1</td>
        <td>3000</td>
    </tr>
    <tr>
        <td>2</td>
        <td>电脑</td>
        <td>1</td>
        <td>5000</td>
    </tr>
    <tr>
        <td>3</td>
        <td>手机</td>
        <td>1</td>
        <td>3000</td>
    </tr>
    </tbody>
</table>

<hr>

<table id="cart2">
    <caption>购物车2</caption>
    <thead>
    <tr>
        <th>编号</th>
        <th>品名</th>
        <th>数量</th>
        <th>单价</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

<hr>

<table id="cart3">
    <caption>购物车3</caption>
    <thead>
    <tr>
        <th>编号</th>
        <th>品名</th>
        <th>数量</th>
        <th>单价</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

<script>
    // 获取页面元素cart1
    var cart1 = document.getElementById('cart1');

    //children[]用来选择元素中的子元素，抓取的子元素下有子元素可以继续用children[]来抓取
    // 在table的第3个子元素的第2个子元素下的第2个子元素的内容中
    console.log(cart1.children[2].children[1].children[1].innerHTML);
    // 单价, 在第3个子元素的内容中
    console.log(cart1.children[2].children[1].children[3].innerHTML);
    // 单元格的数据是可以更新的, 电脑涨价了: 6000
    cart1.children[2].children[1].children[3].innerHTML = 8000;

    /*
          table对象定义一些属性,可以快速获取指定的子元素
          1. tHead: <thea>
          2. tBodies: <tbody>...复数
          3. tFoot: <tfoot>
          4. rows: 所有行
          5. cells: 所有列
      */
    //tBodies:返回包含表格中所有 tbody 的一个数组。
    //rows:返回包含表格中所有行的一个数组。
    //cells:返回包含表格中所有单元格的一个数组。
    console.log(cart1.tBodies[0].rows[1].cells[3].innerHTML);

    // 定义数据：id：编号，name:品名，count:数量,price:单价
    var data = [
        {id: 1, name: '草莓',count: 80, price: 10},
        {id: 2, name: '桃子',count: 40, price: 20},
        {id: 3, name: '苹果',count: 60, price: 8}
     ];

    // 获取id为cart2的元素
    var cart2 = document.getElementById('cart2')
    // 获取cart2里的tbody（网页主体内存在4个tbody标签，选取第三个）
    var tbody = cart2.children[2];
    data.forEach(function (value) {
        var tr = document.createElement('tr');//在页面内创建tr标签
        tr.innerHTML = '<td>' + value.id + '</td>';//创建tr表单内的td标签和内容
        tr.innerHTML += '<td>' + value.name + '</td>';
        tr.innerHTML += '<td>' + value.count + '</td>';
        tr.innerHTML += '<td>' + value.price + '</td>';
        tbody.appendChild(tr);//在tbody内添加tr表单
    })


    // 用table属性写表单
    var cart3 = document.getElementById('cart3');//获取页面中cart3标签创建定义
    var tbody = cart3.tBodies[0];
    for (var i = 0; i < data.length; i ++) {
        var tr = document.createElement('tr');
        Object.keys(data[i]).forEach(function (key) {
            tr.innerHTML += '<td>' + data[i][key] + '</td>';

        });
        tbody.appendChild(tr);
    }

</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


页面实际显示效果：

购物车最终显示效果图.png

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！