Use Front End MVVM FrameworkAvalon.js, 3 sentences of code to do the dynamic addition of lines.
<!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:""}], //Define an array for binding
add: function() {
this.array.push({name:"",dept:""}); //Newly added
},
del: function(i, d, e) {
this.array.remove(d); //delete
},
export: function() {
alert(JSON.stringify(this.array)); //output data
},
})
</script>
</head>
<body ms-controller="test" style="padding:30px;">
<h3>Example of dynamically adding rows:</h3>
<br>
<table width="500" border="1" cellspacing="0" cellpadding="6">
<tr>
<td width="16%">Sequence Number</td>
<td width="31%">Full name</td>
<td width="34%">department</td>
<td width="19%">operation</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="delete" ms-click="@del($index, el, $event)"></td>
</tr>
</table>
<p><input type="button" value="Add to" ms-click="@add()"></p>
<br><br>
<p><input type="button" value="output data" ms-click="@export()"></p>
</body>
</html>1. Introducing Framework js
2. Define vm
3. Create an array, which binds to the tr structure in the DOM.
4. Elements in arrays and input bindings in tr structures.
5. Create a function to "add" actions.Array of operations, insert an object.
6. Create a function for the Delete action.Delete the current object by manipulating the data through callbacks.
All operations are around arrays and do not need to deal with DOM at all.Add, delete, is the most basic operation, in addition, you can extend more operations, such as validation, input, output, and so on, are also operation arrays, around which you can achieve all the interaction required by the front end.