久久久国产一区二区三区,国产成人av一区二区三区在线观看,成人欧美一区二区三区1314

首頁(yè) > 博客列表 > 利用DOM操作完成一個(gè)簡(jiǎn)易的用戶留言，動(dòng)態(tài)生成一個(gè)表格（利用DOM元素創(chuàng)建一個(gè)用戶留言顯示區(qū)，利用DOM生成表格）2019年5月9日20點(diǎn)

博主信息

博文 49

粉絲 1

評(píng)論 0

訪問(wèn)量 52735

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>簡(jiǎn)易用戶留言專區(qū)</title>
</head>
<body>
<div >
    <h1 style="margin:0 50px">用戶留言專區(qū)</h1>
    <label for="comment">請(qǐng)留言：</label>
    <!--留言輸入框-->
    <input type="text" id="comment" onkeydown="addComment(this)" style="width: auto">
    <!--留言顯示區(qū)-->
<!--    reversed有序列表的數(shù)字倒序排列-->
    <ol class="list" reversed></ol>

</div>
<script>
    function addComment(comment) {
        // 在控制臺(tái)中輸出keyCode來(lái)查看回車鍵對(duì)應(yīng)的值是13
        // console.log(event.keyCode);
        if (event.keyCode === 13){//用if語(yǔ)句判斷是否按了回車鍵
            //定義item在頁(yè)面創(chuàng)建一個(gè)新標(biāo)簽<li>
            var item = document.createElement("li");
            // item.innerText = comment.value;//為標(biāo)簽內(nèi)添加文本內(nèi)容
            item.append(comment.value); // 也可用append()為標(biāo)簽添加文本內(nèi)容

            // 獲取ul標(biāo)簽
            var list = document.querySelector(".list");

            // 用If語(yǔ)句檢測(cè)如果當(dāng)前留言列表為空, 則直接插入到到尾部,否則就插入到第一條留言之前
            if (list.childElementCount === 0) {
                list.appendChild(item)
            }else {
                // 如果列表已有留言,則插入到新一條之前
                var first = list.firstElementChild;
                // list.insertBefore(item,first);
                list.prepend(item,first);//在元素的開(kāi)頭位置插入一個(gè)li
            }
            // list.appendChild(item);//在ul列表中最后的位置上添加一個(gè)li

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

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

頁(yè)面顯示效果：簡(jiǎn)易用戶留言專區(qū).png

利用DOM生成一個(gè)表格：

實(shí)例

<!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中的第一行都會(huì)生效*/
        thead tr:nth-of-type(1) {
            background-color: lightblue;
        }

    </style>
</head>
<body>
<table id="cart1">
    <caption>購(gòu)物車1</caption>
    <thead>
    <tr>
        <th>編號(hào)</th>
        <th>品名</th>
        <th>數(shù)量</th>
        <th>單價(jià)</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>1</td>
        <td>手機(jī)</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>手機(jī)</td>
        <td>1</td>
        <td>3000</td>
    </tr>
    </tbody>
</table>

<hr>

<table id="cart2">
    <caption>購(gòu)物車2</caption>
    <thead>
    <tr>
        <th>編號(hào)</th>
        <th>品名</th>
        <th>數(shù)量</th>
        <th>單價(jià)</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

<hr>

<table id="cart3">
    <caption>購(gòu)物車3</caption>
    <thead>
    <tr>
        <th>編號(hào)</th>
        <th>品名</th>
        <th>數(shù)量</th>
        <th>單價(jià)</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

<script>
    // 獲取頁(yè)面元素cart1
    var cart1 = document.getElementById('cart1');

    //children[]用來(lái)選擇元素中的子元素，抓取的子元素下有子元素可以繼續(xù)用children[]來(lái)抓取
    // 在table的第3個(gè)子元素的第2個(gè)子元素下的第2個(gè)子元素的內(nèi)容中
    console.log(cart1.children[2].children[1].children[1].innerHTML);
    // 單價(jià), 在第3個(gè)子元素的內(nèi)容中
    console.log(cart1.children[2].children[1].children[3].innerHTML);
    // 單元格的數(shù)據(jù)是可以更新的, 電腦漲價(jià)了: 6000
    cart1.children[2].children[1].children[3].innerHTML = 8000;

    /*
          table對(duì)象定義一些屬性,可以快速獲取指定的子元素
          1. tHead: <thea>
          2. tBodies: <tbody>...復(fù)數(shù)
          3. tFoot: <tfoot>
          4. rows: 所有行
          5. cells: 所有列
      */
    //tBodies:返回包含表格中所有 tbody 的一個(gè)數(shù)組。
    //rows:返回包含表格中所有行的一個(gè)數(shù)組。
    //cells:返回包含表格中所有單元格的一個(gè)數(shù)組。
    console.log(cart1.tBodies[0].rows[1].cells[3].innerHTML);

    // 定義數(shù)據(jù)：id：編號(hào)，name:品名，count:數(shù)量,price:單價(jià)
    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（網(wǎng)頁(yè)主體內(nèi)存在4個(gè)tbody標(biāo)簽，選取第三個(gè)）
    var tbody = cart2.children[2];
    data.forEach(function (value) {
        var tr = document.createElement('tr');//在頁(yè)面內(nèi)創(chuàng)建tr標(biāo)簽
        tr.innerHTML = '<td>' + value.id + '</td>';//創(chuàng)建tr表單內(nèi)的td標(biāo)簽和內(nèi)容
        tr.innerHTML += '<td>' + value.name + '</td>';
        tr.innerHTML += '<td>' + value.count + '</td>';
        tr.innerHTML += '<td>' + value.price + '</td>';
        tbody.appendChild(tr);//在tbody內(nèi)添加tr表單
    })


    // 用table屬性寫表單
    var cart3 = document.getElementById('cart3');//獲取頁(yè)面中cart3標(biāo)簽創(chuàng)建定義
    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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

頁(yè)面實(shí)際顯示效果：

購(gòu)物車最終顯示效果圖.png

批改狀態(tài)：未批改

老師批語(yǔ)：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！

全部評(píng)論文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議

0條評(píng)論

作者最新博文

520小實(shí)驗(yàn)

2019-05-20 22:44:59

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

實(shí)例

實(shí)例