Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- jQuery -->
- <h2>jQuery</h2>
- <table id="t1">
- <tr>
- <th>Item</th>
- <th>Quantity</th>
- </tr>
- <tr id="r1">
- <td><input name="item[]" type="text"/></td>
- <td><input name="quantity[]" type="number"/></td>
- <td><button class="deleteRow">X</button></td>
- </tr>
- </table>
- <button id="addRow">Add Row</button>
- // jQuery
- $(document).on('click', '#addRow', function(){
- var row = parseInt($('#t1 tr:last-child').attr('id')) + 1;
- alert(row);
- $('#t1').append('<tr id="r'+row+'"><td><input name="item[]" type="text"/></td><td><input name="quantity[]" type="number"/></td><td><button class="deleteRow">X</button></td></tr>');
- });
- $(document).on('click', '.deleteRow', function(){
- var row = parseInt($(this).closest('tr').attr('id'));
- $('#r'+row).remove();
- });
- <div id="app">
- <ul>
- <li v-for="(input, index) in inputs">
- <input type="text" v-model="input.one"> - {{ input.one }}
- <input type="text" v-model="input.two"> - {{ input.two }}
- <button @click="deleteRow(index)">Delete</button>
- </li>
- </ul>
- <button @click="addRow">Add row</button>
- </div>
- const app = new Vue({
- el: '#app',
- data: {
- inputs: []
- },
- methods: {
- addRow() {
- this.inputs.push({
- one: '',
- two: ''
- })
- },
- deleteRow(index) {
- this.inputs.splice(index,1)
- }
- }
- })
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement