I am working with an HTML table that has dynamically created rows and columns using AngularJS. I want to add an option where users can hover over a row or column and see a delete button icon that, when clicked, will remove that row or column. While this functionality mostly works as expected, there are a few issues that need addressing.
If you would like to view the code pen I have created, please visit https://codepen.io/anon/pen/PBVoOb
Here is the table code:
<table class="table table-bordered">
<thead>
<tr class="actions">
<th class="unique-id hidden-border" colspan="1"></th>
<th ng-class="{'active': showColumnActions(c)}" ng-repeat="c in targetTable.columns track by $index"><span>
<a class="btn btn-xs"><i class="fa fa fa-pencil" aria-hidden="true"></i></a>
<a class="btn btn-xs" ng-click="removeColumn($index)"><i class="fa fa-times-circle" aria-hidden="true"></i></a></span>
</th>
</tr>
<tr>
<th class="unique-id">ID #</th>
<th contenteditable="true" ng-repeat="c in targetTable.columns" ng-model="c.label"></th>
<th class="view-next-set"><a href="#">...</a></th>
<td class="center add-column"><a href="#" ng-click="addColumn()">+ Add Column</a></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="r in targetTable.rows" ng-mouseover="row = $index" ng-mouseleave="row = -1">
<td class="unique-id" ng-model="r.id">{{r.id}}<div class="btn-group btn-group-xs">
<button ng-show="row == $index" type="button" class="btn" ng-click="deleteRow($index)"><span class="glyphicon glyphicon-remove"></span></button>
</div></td>
<td contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!r.id? addNewRow(r[column.id], r): undefined" ng-mouseover="setActiveColumn(column)"></td>
<td class="blank" colspan="2"></td>
</tr>
<!--<tr>
<td class="unique-id"></td>
<td contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="entry" ng-blur="addRow(entry, column.id)"></td>
<td class="blank" colspan="2"></td>
</tr> -->
</tbody>
</table>
Issues:
Regarding Rows: When hovering over the ID column, the delete (X) icon appears. However, I would prefer to display this icon outside of the table on the left side when hovering over the ID column. How can I achieve this?
Regarding Columns: There seems to be an extra top border above the table that extends when adding a new column. I'm unsure what is causing this issue and how to remove the extra border. Any advice?