var nextRowId=1; function renumberTableRows(){ var row_no=1; var table = document.getElementById("tabbody"); for (var i = 0, row; row = table.rows[i]; i++) { row.cells[0].innerHTML=row_no++; } } function deleteTableRow(rowId){ var target = document.getElementById("upload-target"+rowId); var children = target.children; // delete all uploaded elements for (var i = 0; i < children.length; i++) { var tmp = children[i].getAttribute("data-id"); $K.ajax.post({ url: 'delete.php', data: 'id='+tmp, before: function(xhr) {}, success: function(response) {}, error: function(response) {} }); } // delete the row from table var element = document.getElementById("trow"+rowId); element.parentNode.removeChild(element); renumberTableRows(); // alert(rowId); } function addTableRow(){ var $node = $K.dom('#tabbody'); // create a new table row with id var element = document.createElement('tr'); element.setAttribute("id", "trow"+nextRowId); var e=""; // add column for position no e += '<td></td>'; // add coluemn for description e += `<td><textarea name="desc[${nextRowId}]" rows="2"></textarea> </td>`; // add column for date e += `<td><input name="date[${nextRowId}]" type="date"/></td>`; // add column for num e += `<td><input name="amount[${nextRowId}]" type="num"/></td>`; // add column for file upload e+= ` <td data-kube=""> <form action=""> <div class="form-item"> <div class="upload" data-kube="upload" data-type="file" data-multiple="true" data-target="#upload-target${nextRowId}" data-url="upload.php" data-url-remove="delete.php" data-progress="true"> </div> <div id="upload-target${nextRowId}" class="upload-target"></div> </div> </form> </td> `; // add delete bnutton e += `<td><span onclick="deleteTableRow(${nextRowId})" class="close is-large"> </span></td>`; $node.append(element); element.innerHTML=(e); renumberTableRows(); nextRowId++; } function submitTable(){ alert("submit"); var obj; var table = document.getElementById("tabbody"); for (var i = 0, row; row = table.rows[i]; i++) { console.log(row.cells[1]); // var n = row.cells[1].value; // alert(n); } } $K.add('module','kaform', { init: function(app,context){ this.app = app; // getting context and the module element this.context = context; this.$element = context.getElement(); }, hello: function(){ alert ("hello function of kaform"); }, start: function() { /*this.$element.on('keydown.kube.editable', this._hui.bind(this)); this.$element.on('paste.kube.editable', this._hui.bind(this)); this.$element.on('blur.kube.editable', this._hui.bind(this)); */ // alert(this.$element); // this.$element.on('click', this.addRow.bind(this)); this._build(); }, addRow: function() { var $node = $K.dom('#tabbody'); // create a new table row with id var element = document.createElement('tr'); element.setAttribute("id", "trow"+nextRowId); var e=""; // add column for position no e += '<td></td>'; // add coluemn for description e += '<td><textarea rows="2"></textarea> </td>'; // add column for date e += '<td style="overflow:visible;"><input type="date"/></td>'; // add column for num e += '<td style="overflow:visible;"><input type="num"/></td>'; // add column for file upload e+= ` <td data-kube=""> <form action=""> <div class="form-item"> <div class="upload" data-kube="upload" data-type="file" data-multiple="true" data-target="#upload-target${nextRowId}" data-url="upload.php" data-url-remove="delete.php" data-progress="true"> </div> <div id="upload-target${nextRowId}" class="upload-target"></div> </div> </form> </td> `; // add delete bnutton e += `<td><span onclick="deleteTableRow('trow${nextTableRow}'" class="close is-large"> </span></td>`; $node.append(element); element.innerHTML=(e); renumberTableRows(); nextRowId++; }, // private _build: function() { }, onmessage: { alert: { closed: function(sender) { alert(sender); // caught } } } }); // startup is here $K.init({ observer: true }); // on startup clear session on server $K.ajax.get({ url: 'clear.php', data: '', // or key=value object before: function(xhr) {}, success: function(response) {}, error: function(response) {} }); // add on table row addTableRow();