I am using the following bootstrap table:
<table class="table table-striped">
<thead>
<tr>
<th>Episode Date</th>
<th>Day</th>
<th>Projected Cost</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="epi in episodes">
<td>
<input type="hidden" ng-model="epi.COST_PRG_EPS_TXN_ID" />
<label>{{epi.PRG_EPISODE_DATE_DIS | date:'dd-MMM-yyyy'}} </label>
</td>
<td>{{ epi.PRG_EPISODE_DAY }}</td>
<td>
<input type="text" ng-model="epi.COST_PROJECTED" onkeypress="return OnlyNumeric(event);" />
</td>
<td>
<input type="text" ng-model="epi.COMMENTS" />
</td>
</tr>
</tbody>
</table>
I am getting the error:
TypeError: Cannot read property 'insertBefore' of null
when I use ng-repeat for table row (tr).
However, when I cut and paste the ng-repeat to tbody, it works properly.
The requirement is to repeat tr and not tbody inside the table. How can I do it?
http://i.imgur.com/D52R9lq.png
Related
I have the data table and when I select a radio button, the entire table row gets selected.
below is my code
Expectation:
When I select the radio button it should not select the table row.
Demo
could someone help me on this
<md-data-table-container>
<table md-data-table md-row-select="testConfig.selected">
<thead md-trim-column-names md-order="testConfig.order">
<tr>
<th order-by="name">Report Name</th>
<th numeric order-by="views.value">Visits</th>
<th numeric order-by="users.value">Unique Users</th>
<th>Users</th>
</tr>
</thead>
<tbody md-auto-select>
<tr ng-repeat="report in test_data | orderBy: testConfig.order">
<td>{{report.name}}</td>
<td>{{report.views.value}}</td>
<td>{{report.users.value}}</td>
<td>
<ul>
<li ng-repeat="person in people">
<label>
<input type="radio" ng-model="$parent.name" name="name" value="{{person.name}}" required />{{person.name}}
</label>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</md-data-table-container>
Use Event.stopPropagation on label of radio button, to prevent the click event propagation to the table row:
<md-data-table-container>
<table md-data-table md-row-select="testConfig.selected">
<thead md-trim-column-names md-order="testConfig.order">
<tr>
<th order-by="name">Report Name</th>
<th numeric order-by="views.value">Visits</th>
<th numeric order-by="users.value">Unique Users</th>
<th>Users</th>
</tr>
</thead>
<tbody md-auto-select>
<tr ng-repeat="report in test_data | orderBy: testConfig.order">
<td>{{report.name}}</td>
<td>{{report.views.value}}</td>
<td>{{report.users.value}}</td>
<td>
<ul>
<li ng-repeat="person in people">
<label ng-click="$event.stopPropagation()">
<input type="radio" ng-model="$parent.name" name="name" value="{{person.name}}" required />{{person.name}}
</label>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</md-data-table-container>
is there some way to lock a tr at the end of a table with VUE or Js?
I have a Vue-Component which adds tablerows dynamically based on an API call, but I need one specific tr to be at the bottom and if a new tr is added, it should be above the last one.
Not in the tfoot because there is some other nformation
Here is the Vue-Component
<tbody>
<tr is="deliverytable"
v-for="delivery in deliveries"
v-bind:key="delivery.id"
v-bind:delivery="delivery"></tr>
</tbody>
Template of the Vue-Component
<tr id="data" :class="{'incomplete' : delivery.event == '4'}">
<td>
<div v-if="delivery.is_printable">
<input name="deliverynote" :value="delivery.id" :checked="delivery.is_printable_by_default" type="checkbox">
</div>
</td>
<td>[[ delivery.dispatched ]] Uhr</td>
<td>[[ delivery.action ]]</td>
<td>
<div v-if="!delivery.is_deletable">[[ delivery.article_name ]]</div>
<div v-else-if="delivery.event != 0" v-on:change.close="autosave($event, delivery.id)" ref="article" v-html="delivery.articleform"></div>
</td>
<td>
<div v-if="!delivery.is_deletable">[[ delivery.amount ]]</div>
<div v-else-if="delivery.event != 0" #change="autosave($event, delivery.id)" ref="amount" v-html="delivery.amountform"></div>
</td>
<td><div id="weight" ref="delivery">[[delivery.weight]]</div></td>
<td class="d-none"><input type="text" name="delivery" id="id_delivery" :value="delivery.id">[[delivery.id]]</td>
<td id="price" ref="price">[[ delivery.price ]]</td><td v-else>0.00 €</td>
<td>
<a v-if="delivery.is_deletable" type="button" #click="removeDelivery(delivery.id)" class="icon icon-trash-can"></a>
</td>
</tr>
If your components iterated over in a loop you can render this specific after loop above
<table>
<thead>
some headers
</thead>
<tbody>
<tr v-for="(rowItem, key, index) in dataTable" :key="index">
your API call items
</tr>
<tr>
your specific item
</tr>
</tbody>
</table>
I have the following div:
<div data-object-id="dsOrders" class = "OrderList" >
<div class="table-responsive m-y-1">
<table class="table">
<thead>
<tr>
<th style="width:110px;">ID</th>
<th style="width:110px;"> Order Date</th>
</tr>
<!-- FILTER ROW -->
<tr>
<td>
<input data-search="OrderID" class="form-control form-control-sm">
</td>
<td>
<input data-search="OrderDate" class="form-control form-control-sm">
</td>
</tr>
</thead>
<tbody>
<tr data-repeat data-active>
<td data-field="OrderID" class = "OrderID"></td>
<td data-field="OrderDate"></td>
</tr>
</tbody>
</table>
</div>
</div>
How do I make it select the last row of it with javascript or jquery? I've tried doing it like this
$("[.OrderList][tr:last]").focus();
But with no success
Use this code:
.OrderList >.table > tbody > tr:last-child { background:#ff0000; }
Try this :
$('#yourtableid tr:last').attr('id');
or this:
$("#TableId").find("tr").last();
Hope this if helpful :)
console.log($(".OrderList tr").last().html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-object-id="dsOrders" class = "OrderList" >
<div class="table-responsive m-y-1">
<table class="table">
<thead>
<tr>
<th style="width:110px;">ID</th>
<th style="width:110px;"> Order Date</th>
</tr>
<!-- FILTER ROW -->
<tr>
<td>
<input data-search="OrderID" class="form-control form-control-sm">
</td>
<td>
<input data-search="OrderDate" class="form-control form-control-sm">
</td>
</tr>
</thead>
<tbody>
<tr data-repeat data-active>
<td data-field="OrderID" class = "OrderID"></td>
<td data-field="OrderDate"></td>
</tr>
</tbody>
</table>
</div>
</div>
Try this code You can achieve it by:
$('#first table:last tr:last')
$('#yourtableid tr:last').attr('id').focus();
or
$('#yourtableid tr:last')[0].focus();
should work.
console.log($(".OrderList table tr:last").html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-object-id="dsOrders" class = "OrderList" >
<div class="table-responsive m-y-1">
<table class="table">
<thead>
<tr>
<th style="width:110px;">ID</th>
<th style="width:110px;"> Order Date</th>
</tr>
<!-- FILTER ROW -->
<tr>
<td>
<input data-search="OrderID" class="form-control form-control-sm">
</td>
<td>
<input data-search="OrderDate" class="form-control form-control-sm">
</td>
</tr>
</thead>
<tbody>
<tr data-repeat data-active>
<td data-field="OrderID" class = "OrderID"></td>
<td data-field="OrderDate"></td>
</tr>
</tbody>
</table>
</div>
</div>
I am trying to resize the input/td fields for a table, but cannot seem to get it working. Ive been referencing the stack post below. Still no luck.
stack-post-ref
jsfiddle-for-table
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>XS</th>
<th>S</th>
<th>M</th>
<th>L</th>
<th>XL</th>
<th>XXL</th>
<th>XXXL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1"><input type="number" name="xs" ng-model="order.size.extra_small"></td>
<td class="col-md-1"><input type="number" name="s" ng-model="order.size.small"></td>
<td class="col-md-1"><input type="number" name="m" ng-model="order.size.medium"></td>
<td class="col-md-1"><input type="number" name="l" ng-model="order.size.large"></td>
<td class="col-md-1"><input type="number" name="xl" ng-model="order.size.extra_large"></td>
<td class="col-md-1"><input type="number" name="xxl" ng-model="order.size.double_extra_large"></td>
<td class="col-md-1"><input type="number" name="xxxl" ng-model="order.size.triple_extra_large"></td>
</tr>
</tbody>
</table>
</div>
add form-control class to your input field https://jsfiddle.net/NourSammour/u2c09yb5/1/
For me this works:
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type... /></td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
</tbody>
</table>
</div>
first of, thank you for taking the time to read this, I will try my best to explain what I'm trying to achieve using jquery, I am currently stuck on moving sets of TRs on a new position. I can move the headers just fine.
here is what my generated table looks like:
<table border="1">
<thead class='thx'> ..tr th here
</thead>
<tbody>
<tr>
<td class="gheader" colspan="2">header1</td>
</tr>
<tr>
<td class="glabel"><label id="label1">label1</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox1" type="text" value=""></td>
</tr>
<tr>
<td class="gheader" colspan="2">header2</td>
</tr>
<tr>
<td class="glabel"><label id="label2">label2</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox2" type="text" value=""></td>
</tr>
</tbody>
</table>
next:
I want to new move the TD's beside the first (td.class>gheader) .. yes this is possible / done. so now, my table looks like:
<table>
<thead class='thx'> ..tr th here
</thead>
<tbody>
<tr>
<td class="gheader">header1</td>
<td class="gheader">header2</td>
..and so on
</tr>
<tr>
now here is where my problem lies:
upon moving the generated td's with class gheader ( header1,header2,header3 ) to be on the same row how can I move the following:
<tr>
<td>label(id)</td>
<td>checkbox(id)</td>
<tr>
in between each headers which was newly moved
possible table output would look like:
<table border="1">
<thead class='thx'>
<tr>
<td class="gheader" colspan="2">h</td>
<td class="gheader" colspan="2">i</td>
</tr>
</thead>
<tbody>
<tr>
<td class="gheader" colspan="2">header1</td>
<td class="gheader" colspan="2">header2</td>
</tr>
<tr>
<td class="glabel"><label id="label1">label1</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox1" type="text" value=""> </td>
<td class="glabel"><label id="label2">label2</label></td>
<td class="ginput"><input class="checkbox" id="inputcheckbox2" type="text" value=""></td>
</tr>
</table>
other notes:
colspan 2 (on gheader) is auto generated
Try
var $tbody = $('table tbody');
$tbody.find('.gheader').appendTo($tbody.find('tr:first-child'));
$tbody.find('tr').slice(1).find('td').appendTo($tbody.find('tr:nth-child(2)'));
$tbody.find('tr').slice(2).remove()
Demo: Fiddle