3句代码，搞定动态添加行

最新推荐文章于 2023-03-15 23:39:32 发布

qq596750766

最新推荐文章于 2023-03-15 23:39:32 发布

阅读量628

点赞数

文章标签：动态添加行

本文链接：https://blog.csdn.net/qq596750766/article/details/78728159

版权

使用前端MVVM框架avalon.js，3句代码，搞定动态添加行。

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <title>example</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="avalon.js"></script>
        <script>
            var vm = avalon.define({
                $id: "test",
                array: [{name:"",dept:""}],  //定义数组，用于绑定
                add: function() {
                    this.array.push({name:"",dept:""}); //新增
                },
                del: function(i, d, e) {
                    this.array.remove(d); //删除
                },
                export: function() {
                    alert(JSON.stringify(this.array)); //输出数据
                },
            })
        </script>
    </head>

    <body ms-controller="test" style="padding:30px;">
        <h3>动态添加行示例：</h3>
        <br>
        <table width="500" border="1" cellspacing="0" cellpadding="6">
          <tr>
            <td width="16%">序号</td>
            <td width="31%">姓名</td>
            <td width="34%">部门</td>
            <td width="19%">操作</td>
          </tr>
          <tr ms-for="($index, el) in @array">
            <td>{{$index+1}}</td>
            <td><input ms-duplex="@el.name" /></td>
            <td><input ms-duplex="@el.dept" /></td>
            <td><input type="button" value="删除" ms-click="@del($index, el, $event)"></td>
          </tr>
        </table>
        <p><input type="button" value="添加" ms-click="@add()"></p>

        <br><br>
        <p><input type="button" value="输出数据" ms-click="@export()"></p>
    </body>
</html>

1、引入框架js
2、定义vm
3、创建一个数组，数组和DOM里的tr结构绑定。
4、数组里的元素和tr结构里的input绑定。
5、创建一个“添加”动作的函数。操作数组，插入一条对象。
6、创建一个“删除”动作的函数。通过回调，操作数据，删除当前对象。

所有的操作，都围绕数组进行，完全不需要和DOM打交道。添加、删除，是最基本的操作，另外，还可以延伸更多的操作，比如验证、输入、输出等，同样都是操作数组，围绕数组操作，可以实现一切前端需要的交互行为。

qq596750766

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3句代码，搞定动态添加行

使用前端MVVM框架avalon.js，3句代码，搞定动态添加行。<!DOCTYPE html><html> <head> <title>example</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
复制链接

扫一扫