Add/Delete Action in a HTML Table
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
02-09-2017 02:05 AM
Hi ,
I have a requirement of a grid in my catalog. Hence i have created a macro variable with a widget.
My Widget has a HTML table(Grid structure). I am able to populate values from server scripts.
Any idea on how to perform Add / Delete action on the grid?
Eg: When i click on Delete it should delete the row from grid.
| Name | Department | Action |
|---|---|---|
| A | One | Delete |
| B | Two | Delete |
| C | Three | Delete |
If i click on Add, then the value should be added to the above.
| D |
Add
Please let me know your suggestions !!
Thanks !!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
02-09-2017 02:36 AM
Hi Charanya,
May be this link will help you. It shows adding/deleting rows dynamically using javascript
Mark Correct if this solves your issue and also hit Like and Helpful if you find my response worthy based on the impact.
Thanks
Ankur
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
02-09-2017 03:03 AM
Hi Ankur,
Thanks fro the reply!
The above link was not helpful in my case. I a writing the code on the widget directly.For more understanding, Please find my widget code below.
HTML :
<table id="SoftwareTable" class="table table-hover table-striped table-rwd" style = "width:100%">
<tr>
<th>Name</th>
<th>Department</th>
<th>Action</th>
</tr>
<tbody ng-repeat="item in c.data.list" >
<tr ng-class="{sel:selIdx==$index}">
<td>{{item.name}}</td>
<td>{{item.dept}}</td>
<td></td>
<td><input type="button" id="delValue" value="Delete" ></td>
</tr>
</tbody>
</table>
Server :
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
data.list = [];
var eid= input.eid;
if(input){
var obj = new GetValues();
var retGenString = obj .getVal(eid);
var answer = JSON.parse(retGenString);
for( var i=0 ; i < answer.length ; i++) {
var Item ={
"name": answer[i],
"dept": answer[i],
};
data.list.push(Item);
name='';dept='';//Loop into the array
}
}
})();
Client :
function me($scope) {
/* widget controller */
var c = this;
$scope.$watch(function () {
return $scope.page.g_form.getValue('sc_var_name');
},function (value) {
c.data.eid= $scope.page.g_form.getValue('sc_var_name');
c.server.update();
});
}
Thanks,
Charanya
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
02-09-2017 06:58 AM
Instead of writing your own custom widget from scratch, I would take a look at what people have already done on share.