I have a table with list elements that I want to be able to skip through using arrow keys. Right now I have to click on the table element border before I can use the arrow keys. If I set tabindex on one of the elements in the loop, it doesn't work. So, how can I focus tabindex on a table element when it is clicked?
<section ng-controller="PlaylistCtrl" >
<table class="table table-striped table-hover " ng-keyup="keyPress($event.keyCode, $index)" tabindex="1">
<thead>
<tr>
<th>
<button type="button" ng-click="toSubmit()" class="btn btn-default">Add resource
</button>
</th>
</tr>
</thead>
<tbody ui-sortable ng-model="result">
<tr ng-repeat="resource in result">
<td ng-class="isSelected(resource)">
<div ng-click="showResource(resource, $index)">
{{resource.name}}
</div>
</td>
<td ng-class="isSelected(resource)" style="width: 15px;"><span class="glyphicon glyphicon-remove" id="sidebarEdit" ng-click="removeResource(resource, $index)"></span></td>
</tr>
</tbody>
</table>
</section>
document.getElementById('table_id').focus();
Related
Using angularjs with bootstrap 3 here.
I am trying to create dynamic rows when user clicks button. I have wrapped this inside a table and using ng-repeat.
When the second row is added it creates a separation b/w the two.
Below is my code:
<table class="table table-borderless">
<thead>
<tr>
<td>Text</td>
<td>Value</td>
</tr>
</thead>
<tbody ng-repeat="m in options">
<tr>
<td>{{m.Name}}</td>
<td>{{m.Country}}</td>
<td>
<a class="btn btn-xs" ng-click="Remove($index)"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<input type="text" class="form-control" ng-model="Name" required />
</td>
<td>
<input type="text" class="form-control" ng-model="Country" required />
</td>
<td>
<a class="btn btn-xs" ng-click="Add()"><i class="glyphicon glyphicon-plus"></i></a>
</td>
</tr>
</tfoot>
</table>
I also created a demo at:
http://jsfiddle.net/Lyxbhosv/
Any inputs on how to remove the line or border in between two TD
I am not entirely sure what you're asking but via your example there is a double border whenever another row is added. To remove the double border and keep it a single just modify your code with the following:
<tbody ng-repeat="m in options" style="border: none;">
If you can explain further that would be great!
While I'm examining your code you have already awarded the answer. But here I'm coming up with what I have learned from your code and this answer:
<tbody ng-repeat="m in options" style="border: none;"> This will create lots of Repeatable `' in your code.
But if you placed your code 'ng-repeat="m in options"' to the child <tr>' tag it will repeat the ` each time. and it will not create any repeatable border any more.
<tbody>
<tr ng-repeat="m in options">
So the choice is yours!
I have a table in which the last column has a clickable arrow to display a nested table underneath.
<table class="table table-hover table-striped">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let dData of dDatas;>
<td>{{dData.Name}}</td>
<td>{{dData.Desc}}</td>
<td>
<div (click)="onClick()"><span class="glyphicon" [ngClass]="{'glyphicon-chevron-up': dcData.opendPanel , 'glyphicon-chevron-down': !dcData.opendPanel }"></span></div>
<div [hidden]="!dData.opendPanel">
//another table
</div>
</td>
</tr>
</tbody>
</table>
My problem is the inner table comes in the last <td> and the formatting isn't correct. I want to make the inner table to appear in a new row and span over the width of the outer table.
If I understand you correctly, you should utilise <ng-container>. This allows you you include multiple <tr> tags in each iteration of your for loop, giving your inner table a whole row and the ability to span the width of the table.
<ng-container *ngFor="let dData of dDatas>
<tr >
<td>{{dData.Name}}</td>
<td>{{dData.Desc}}</td>
<td>
<div (click)="onClick()">
<span class="glyphicon" [ngClass]="{'glyphicon-chevron-up': dcData.opendPanel , 'glyphicon-chevron-down': !dcData.opendPanel }"></span>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div [hidden]="!dData.opendPanel">
//another table
</div>
</td>
</tr>
</ng-container>
<ng-container> is a logical container that can be used to group nodes but is not rendered in the DOM tree as a node.
I have one HTML table which I have kept in bootstrap's accordion, I am taking the input from user, whenever input is too long table is getting outside accordion. How can I set width the fixed, and let it expand vertically.
<table id="recordTable" class="table table-bordered table-striped">
<thead>
<tr>
<th class="col-md-1">Question Number</th>
<th class="col-md-6">Question Text</th>
<th class="col-md-3">upload Document(if any)</th>
<th class="col-md-1">Document uploaded?</th>
<th class="col-md-1">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td class="ques_id col-md-1">12 </td>
<td class="ques_text col-md-6">asd</td>
<td class="ques_file col-md-3"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td>
<td class="fileuploadSuccess col-md-1"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
<td class="col-md-1">delete</td>
</tr>
<tr>
<td class="ques_id col-md-1">14 </td>
<td class="ques_text col-md-6">asd</td>
<td class="ques_file col-md-3"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td>
<td class="fileuploadSuccess col-md-1"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td>
<td class="col-md-1">delete</td>
</tr><tr><td class="ques_id">15</td><td class="ques_text">sdfdfgdfgaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><td class="ques_file"><input type="file" name="supportingDocument" accept="application/pdf" id="uploadSupportingDoc"></td><td class="fileuploadSuccess"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></td><td>delete</td></tr>
</tbody>
</table>
Here is screenshot of the image.
jsfiddle link: https://jsfiddle.net/govi20/obnpjt7h/
add this property word-break: break-all; to td tag
another way add class to table outer element table-responsive
<div class="table-responsive">
<table class="table table-bordered table-striped">
...
</table>
</div>
https://jsfiddle.net/obnpjt7h/1/
I have a bootstrap table with 8 columns and several rows and I would like to show this table with scroll bar when the size of screen is reduced because otherwise tha table get off the wrapper layout. The problem is that the scroll bar is ever show and whereas it is quite ugly I would like to show only when it is necessary, how can I do it?
Is it better to use jQuery plugin like this table collapse
<div class="panel-body">
<div class="table-responsive">
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover"
id="fleetsTable">
<thead>
<tr>
<th>Application</th>
<th>Cubic</th>
<th>Power</th>
<th>Euro class</th>
<th>Engine Type</th>
<th>Traction</th>
<th>Transmission</th>
<th>Cars</th>
<th>Add Car</th>
</tr>
</thead>
<tbody>
<tr th:each="fleet : ${fleets}" class="odd gradeX">
<td class="col-xs-2" th:text="${fleet.application}"></td>
<td class="col-xs-1" th:text="${fleet.cubic}"></td>
<td class="col-xs-1" th:text="${fleet.power}"></td>
<td class="col-xs-1" th:text="${fleet.euroClass}"></td>
<td class="col-xs-1" th:text="${fleet.engineType}"></td>
<td class="col-xs-2" th:text="${fleet.traction}"></td>
<td class="col-xs-2" th:text="${fleet.transmission}"></td>
<td class="col-xs-1"><button id="showCarsButton"
type="button" class="btn btn-primary">Show cars</button></td>
<td class="col-xs-1"><button id="addCarButton"
type="button" class="btn btn-primary">Add car</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.panel-body -->
</div>
use this
table style="overflow:auto"
I have a table I decorated with bootstrap.
Here is the simple table view (collapsed).
Each table row has two horizontal sets of data. So the expanded view for each row shows up when the "Details" button is clicked. Here's the expanded view.
The first set of data of each row has 4 columns. While I'd like the second set of data of the same row to fully occupy the whole table width.
The problem is that the way I did it doesn't feel the best way to do it.
I pretty much used Angular loop construct to repeat the <tr>. I then embedded two tables per <tr> so that I can display the first data set in the first table and the expanded view in the second table. Clicking on the "Details" button shows the second set (table) of data of row.
<table class="table-hover table-condensed">
<!--<table class="table">-->
<thead>
<tr>
<th align="left" class="span2">Date</th>
<th align="left" class="span2">Title</th>
<th align="left" class="span2">Bill Total</th>
<th align="left" class="span4">Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ibill in user.groups[0].bills | filter:query | orderBy:'date'">
<td colspan="4">
<table>
<tr>
<td class="span2">{{ ibill.billDate | date:'MM/dd/yyyy'}}</td>
<td class="span2">{{ ibill.title }}</td>
<td class="span2">${{ ibill.billTotal }}</td>
<td class="span4">
<!-- <a ng-click='deleteBill(ibill.id)'><i class="icon-trash "></i></a>
<i class="icon-pencil "></i>--> <a ng-click='deleteBill(ibill.id)' class="btn btn-mini" ng-init="ibill.isCollapsed = 'true'" ng-click="ibill.isCollapsed = !ibill.isCollapsed"><i class=" icon-trash"></i></a>
<i class="icon-edit"></i>
<a class="btn btn-mini" ng-init="ibill.isCollapsed = 'true'" ng-click="ibill.isCollapsed = !ibill.isCollapsed"><i class="icon-eye-open"></i> details</a>
<!--<a class="btn" ng-init="ibill.isCollapsed=' true'" ng-click="ibill.isCollapsed=! ibill.isCollapsed"><i class="icon-folder-open "></i> Details</a>-->
</td>
</tr>
</table>
<table>
<tr>
<td colspan="4">
<div collapse="ibill.isCollapsed">
<div>
<p ng-repeat="simplecost in ibill.billSimpleEntry.simpleUserIdAndLiableCost">{{simplecost.user.fName}} owes ${{simplecost.liableCost}}</p>
</div>
</div>
</td>
</tr>
</table>
</td>
<!--<td>{{ibill}}</td>-->
</tr>
<!-- <tr>
<td><div collapse="ibill.isCollapsed">
<div class="well well-large">Some content</div>
</div></td>
</tr>-->
</tbody>
</table>
I'm pretty much e
<table>
<thead></thead>
<tbody>
<tr>
<td></td>
</tbody>
</table>
Is it possible to do the same with a table-less design (eliminating two tables per row)
You could just use the colspan attribute on a td to achieve the same effect without the tables. Ex:
<table>
<tbody>
<tr> <!--normal row stuff-->
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan='4'><!--details stuff here--></td>
</tr>
</tbody>
</table>
In this example, the td with colspan='4' will be a single cell that is the same width as the 4 cells in the previous row.