Add/Delete Action in a HTML Table

[charanya]

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 !!

[Ankur Bawiskar]

Hi Charanya,

May be this link will help you. It shows adding/deleting rows dynamically using javascript

Edit fiddle - JSFiddle

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

[charanya]

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

[Brad Tilton]

Instead of writing your own custom widget from scratch, I would take a look at what people have already done on share.

ServiceNow Share