js中ToList和表单获取作业—2019年1月17日 - 学无止境

Home > List of blog posts > js中ToList和表单获取作业—2019年1月17日

Blogger Information

Blog 5

fans 0

comment 0

visits 4994

Special Recommendation

More>

Related recommendations

总结（制作流程）：

在制作ToList之前，首先清楚自己实现的每一个功能，然后在进行操作

1、html+css布局

2、通过js获取input的value值，同时通过if判断确认input是否有内容输入，有则给ul添加li标签，将input的value通过在键盘按回车后传至ul下的li标签中，无责返回

3、传值到li标签中后，input中的value值应该清空

4、通过js判断当前li标签如果只有一个直接添加，如果出现第二个添加在第一个之前而不是之后

5、给li标签增加删除与撤回功能

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>经典ToList</title>
</head>
<body>
    <h1>请留言</h1>
    <input type="text">
    <ul></ul>
    <script>
        var input = document.getElementsByTagName('input')[0]
        input.focus()
        var ul = document.getElementsByTagName('ul')[0]
        input.onkeydown = function (event){
            if(event.keyCode === 13) {
                if(input.value === '') {
                    alert('请输入有效内容')
                } else {
                    var li = document.createElement('li')
                    if(ul.childElementCount === 0){
                     ul.appendChild(li)
                    } else {
                        var first =  ul.firstElementChild
                        ul.insertBefore(li,first)
                    }
                    li.innerHTML = input.value + '<a href="javascript:;" onclick="del(this)">删除</a> <a href="javascript:;" onclick="back(this)">撤回<a/>'
                    input.value = ''
                }
                    
            }
        }
        function del(ele) {
            if(confirm('是否删除')){
                var li = ele.parentNode
                li.parentNode.removeChild(li) 
            }
            return false
        }
        function back(ele) {
            if(confirm('是否撤回')) {
                var li = ele.parentNode
                input.value = li.firstChild.nodeValue
                li.parentNode.removeChild(li) 
            }
            return false
        }
    </script>
</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
    <style>
        table,th,td {
            border: solid #000 1px;
            
        }
        table {
            width: 500px;
            border-collapse: collapse;
            text-align: center;
        }
        caption {
            font-size: 1.2rem;
            margin-bottom: 15px;
        }
        thead tr:nth-last-of-type(1) {
            background-color: aqua
        }
    </style>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<table id="cart1">
    <caption>购物车</caption>
    <thead>
        <tr>
            <th>编号</th>
            <th>品名</th>
            <th>数量</th>
            <th>单价</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<script>
var data = [
    {id:1,name:'apple',count:3,price:100},
    {id:2,name:'car',count:10,price:20},
    {id:3,name:'banana',count:5,price:50}
]
var cart1 = document.getElementById('cart1')
var tbody = cart1.children[2]
data.forEach(function (value){
    var tr = document.createElement('tr')
    tr.innerHTML = '<td>'+value.id+'</td>'
    tr.innerHTML += '<td>'+value.name+'</td>'
    tr.innerHTML += '<td>'+value.count+'</td>'
    tr.innerHTML += '<td>'+value.price+'</td>'
    tbody.appendChild(tr)
})


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

运行实例 »

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

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

js中ToList和表单获取作业—2019年1月17日

2019-01-20 16:02:42

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

总结（制作流程）：

实例

实例