博客列表 >利用js实现留言功能和表格加载动态数据功能-2019年1月18号 13时10分

利用js实现留言功能和表格加载动态数据功能-2019年1月18号 13时10分

蜗牛的博客
蜗牛的博客原创
2019年01月18日 13:10:27550浏览

利用js模拟留言板功能以及模拟表格加载数据库数据功能,接下来请看两个小案例:


1、在文本域中输入内容,在ul内把输入的内容加载进去,并且具有删除功能

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <style>
        .textarea_box{
            width: 500px;
            min-height: 500px;
            background-color: pink;
            padding:5px 0 5px 25px;
        }

    </style>
</head>
<body>
    <div class="textarea_box">
        <h2>留言板</h2>
        <textarea name="textarea" id="t1" cols="40" rows="10" placeholder="请输入留言内容:"></textarea>
        <ul></ul>
    </div>
    <hr>
    <script>
        // 获取留言输入框
        var content=document.getElementById('t1')
        // 获取列表
        var ul=document.getElementsByTagName('ul')[0]
        // 给输入框获取焦点
        content.focus()
        // 给输入框添加事件,事件参数
        content.onkeydown=function(event){
            //如果按下回车
            if(event.keyCode===13){
                //生成一个li元素,并赋值
                var li = document.createElement('li')
                li.innerHTML=content.value + '  '+'<a href="javascript:;" onclick="del(this)">删除</a>'
                //如果列表为空,从尾部插入数据
                if(ul.childElementCount===0){
                    ul.appendChild(li)
                }
                //否则在第一个位置插入数据
                else{
                    //获取ul第一个子元素
                    var first=ul.firstElementChild
                    //在第一个子元素之前插入数据
                    ul.insertBefore(li,first)
                }
                
                //清空输入框
                content.value=null
            }
            
        }
        function del(dele){
            if(confirm('是否删除?')){
                //获取要删除的元素
                var li = dele.parentNode
                //获取要删除元素的父级,操作要在父级进行
                var ul = li.parentNode
                ul.removeChild(li)
            }
            return false
        }
    </script>
    
</body>
</html>

运行实例 »

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

 

运行结果截图:

1.png 

ps:留有一个解决不了的问题,输入第一条数据后,焦点不在第一行,而在第二行,往下输入数据焦点就一直保持在第二行不变了,那要如何让焦点一直保持在第一行呢?还请老师批改作业的时候,帮学生回答一下。

2、创建对象数组(模拟数据库),将数据加载到表格中:

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格动态添加数据</title>
    <style>
    table{
        width: 600px;
        border-collapse: collapse;
        font-size: 1.2rem;
        text-align: center;
    }

    table th,td{
        border: 1px solid #ccc;
    }
    </style>
</head>
<body>
        <table id="shopcat">
                <caption>购物车</caption>
                <thead>
                    <tr>
                        <th>商品编号</th>
                        <th>商品名称</th>
                        <th>***日期</th>
                        <th>数量(件)</th>
                        <th>单价(件/元)</th>
                    </tr>
                </thead>
                <tbody>
        
                </tbody>
            </table>
    <script>
        //定义数据
        var data = [
            {id : 1001, name : '***裤', date : '2017.08.08', count : 100, price : 50},
            {id : 1002, name : 'polo衫', date : '2018.10.08', count : 55, price : 50},
            {id : 1003, name : '裙子', date : '2016.05.08', count : 10, price : 150},
            {id : 1004, name : '羽绒服', date : '2017.11.11', count : 20, price : 350},
            {id : 1005, name : '帽子', date : '2018.06.08', count : 66, price : 50}
        ];
    
    var shopcat = document.getElementById('shopcat')
    var tbody = shopcat.children[2]//获取tbody

    data.forEach(function(value){
        //创建tr
        var tr = document.createElement('tr')
        //往tr内部添加内容
        tr.innerHTML='<td>'+value.id+'</td>';
        tr.innerHTML+='<td>'+value.name+'</td>';
        tr.innerHTML+='<td>'+value.date+'</td>';
        tr.innerHTML+='<td>'+value.count+'</td>';
        tr.innerHTML+='<td>'+value.price+'</td>';
        //将tr添加到tbody里
        tbody.append(tr)
    })
</script>
</body>
</html>

运行实例 »

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

 

运行结果截图:

2.png

总结:

对于js的函数,首先我们要了解其含义,有些函数很好理解,就是字面意思,理解后要知道怎么用,有些后面有括号,有些没有,括号又分()、[]、{}三种,最后一定要自己动手实践。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议