I have a bootstrap table and I want to place on each dynamic row under the Tara Image tab a button with the text let's say "get image". This is the code:
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">Lists all the missed balance-events entries that need further investigation.</div></div>
<table id="scale_missed_entries"
data-toggle="table"
data-pagination="true"
>
<thead>
<tr>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th>Tara Image</th>
</tr>
</thead>
</table>
</div>
</div>
I will post a picture with my actual table (I painted with red how I want my buttons to be placed):
var r = document.getElementById('MYTABLE').getElementsByTagName("tr");
for(i=0;i<r.length;i++){
var td=r[i].getElementsByTagName("td")[2];
var btn = document.createElement("BUTTON"); // Create a <button> element
var t = document.createTextNode(td.innerHTML ); // Create a text node
btn.appendChild(t); // Append the text to <button>
td.removeChild(td.firstChild);
td.appendChild(btn);
}
<div role="tabpanel" class="tab-pane" id="missed-entries">
<div class="container">
<div class="panel panel-info" style="margin-top:24px;"><div class="panel-heading"> <h3 class="panel-title">Info</h3> </div><div class="panel-body">Lists all the missed balance-events entries that need further investigation.</div></div>
<table id="scale_missed_entries"
data-toggle="table"
data-pagination="true"
>
<thead>
<tr>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th>Tara Image</th>
</tr>
</thead>
<tbody id='MYTABLE'>
<tr>
<td>1</td>
<td>23.02.2017</td>
<td>get image</td>
</tr>
<tr>
<td>2</td>
<td>23.02.2017</td>
<td>get image</td>
</tr>
<tr>
<td>3</td>
<td>23.02.2017</td>
<td>get image</td>
</tr>
</tbody>
</table>
</div>
</div>
Hope this helps!
Related
Firstly, here is my UI:
My output to my right displayed as a result of using the tag <tbody> inside my ajax:
success: function (response){
var tbody="";
$.each(response.all_categories, function (key, cat) {
tbody+=`
<tr>
<td class="p-0 btn-category-list-col">
<button id="submit" type="submit" class="btn float-left" data-toggle="modal" data-target="#createCategory">${cat.category_name}</button>
</td>
</tr>`; });
$('tbody').html(tbody) }
My problem is that I am using two <tbody> in this same page, so the table to the right shows up in the left:
Is there some way to make my ajax function read a class or an id instead of the tag itself?:
So kind of like my line tbody+= becomes: tbody(class/id)+=
Here is my table that uses two tbody tags:
<div class="col-md-2 border">
<table id="categoryList" class="table">
<thead>
<tr>
<th class="thead-category-list">Category List</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="col-md-10 border bbr-table-col">
<div id="success_message"></div>
<table id="categoryList" class="table table-striped table-bordered responsive no-wrap" cellspacing="0" width="100%">
<thead>
<tr class="bbr-table text-light">
<th>Group Name</th>
<th>Group Type</th>
<th>Group Users</th>
<th>Status</th>
<th>Active</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
any help would be appreciated thanks
If you didn't use the same IDs for both tables(which is invalid html by the way) you could have used the table id to select the correct one.
From the html above you could use the table class to identify it
$('table.table-striped tbody').html(tbody);
or you could fix the invalid duplicate ids and use the id to select the correct table
<div class="col-md-2 border">
<table id="side-categoryList" class="table">
<thead>
<tr>
<th class="thead-category-list">Category List</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="col-md-10 border bbr-table-col">
<div id="success_message"></div>
<table id="main-categoryList" class="table table-striped table-bordered responsive no-wrap" cellspacing="0" width="100%">
<thead>
<tr class="bbr-table text-light">
<th>Group Name</th>
<th>Group Type</th>
<th>Group Users</th>
<th>Status</th>
<th>Active</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
$('#main-categoryList tbody').html(tbody);
Hi i am working angularjs application code
when i trying to update any value or field in js file i will show changes when i refresh browser but when i changes in html file it is not slowing any changes
i am not sure it will work like js file or i need to do some thing deffenent
<div ng-if="companyProfile.loansAndRatings[0].ratings != undefined" >
<div class="panel-heading">Credit ratings</div>
<hr class="loan-margin">
<div class="panel-body">
<table class="table table-bordered ">
<thead>
<tr>
<th>Agency</th>
<th>Instrument</th>
<th>Instrument Details</th>
<th>Rating</th>
<th>Outlook</th>
</tr>
</thead>
<tbody class="fontSynopsis">
<tr ng-repeat="creditRatings in companyProfile.loansAndRatings[0].ratings track by $index">
<td>{{creditRatings.agency}}</td>
<td>{{creditRatings.instrument}}</td>
<td>{{creditRatings.instrumentDetails}}</td>
<td>{{creditRatings.rating}}</td>
<td>{{creditRatings.outlook}}</td>
</tr>
</tbody>
</table>
</div>
</div>
When i update code and any value static value that not slowing after i refresh page
<div ng-if="companyProfile.loansAndRatings[0].ratings != undefined" >
<div class="panel-heading">Credit ratings</div>
<hr class="loan-margin">
<div class="panel-body">
<table class="table table-bordered ">
<thead>
<tr>
<th>Agency</th>
<th>Instrument</th>
<th>Instrument Details</th>
<th>Rating</th>
<th>Outlook</th>
</tr>
</thead>
<tbody class="fontSynopsis">
<tr ng-repeat="creditRatings in companyProfile.loansAndRatings[0].ratings track by $index">
<td>{{creditRatings.instrument}}</td>
<td>{{creditRatings.instrument}}</td>
<td>{{creditRatings.instrumentDetails}}</td>
<td>{{creditRatings.rating}}</td>
<td>{{creditRatings.outlook}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I cant seem to get this right, i made a divider through css divs and it shows on page but when in print the lines i made doesnt show..what other options should i do? im running out of ideas, what am i doing wrong how can i achieve this
here is what i want ot achieve
heres my css
heres the print preview
page code:
<div id="page-wrapper">
<div class="row">
<div class="col-md-12">
<div class="panel-body">
<p style="text-align:center;"><b>PROPERTY ACKNOWLEDGEMENT RECEIPT</b></p>
<p style="text-align:right;">Control No.</p>
<div class="row">
<div class="col-md-16">
<table class="table table-hover table-striped table-bordered table-condensed" class="">
<thead>
<tr>
<th style="text-align:center;">Quantity</th>
<th style="text-align:center;">Unit</th>
<th style="text-align:center;">Description</th>
<th style="text-align:center;">Unit Value</th>
<th style="text-align:center;">Property No.</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>bucket</td>
<td style="font-size:12px;">oremloremloremloremloremloremloremloremloremlorem</td>
<td>2</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<hr style="background-color:black;"> NOTE:
<div style="height:2px;width:100%;background-color:black;"></div>
<div style="width:2px;height:100px;background-color:black;margin:0px auto;"></div>
</div>
</div>
</div>
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
});
I'm trying to get a button into a panel-heading section, but I can't get it to display on the same line. I've managed to get it centered with help of some of the questions on StackOverflow where others asked about a button on the right of the header, but adding the button in seems to make the header taller.
I've got an example showing the difference Bootply
Code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default" ng-init="getApplications()">
<div class="panel-heading clearfix">
<b>Title has space below</b>
<div class="btn-group pull-right">
new
</div>
</div>
<div class="panel-body">
<!-- table -->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Name</th>
<th>Last Release Date</th>
<th>Orders</th>
<th>Downloads</th>
<th>Activations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps">
<td>{{app.columns.name}}</td>
<td>{{app.lastReleaseDt}} </td>
<td>{{app.totalOrders}}</td>
<td>TODO </td>
<td>{{app.totalActivations}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default" ng-init="getApplications()">
<div class="panel-heading clearfix">
<b>Title has no space</b>
</div>
<div class="panel-body">
<!-- table -->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Name</th>
<th>Last Release Date</th>
<th>Orders</th>
<th>Downloads</th>
<th>Activations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps">
<td>{{app.columns.name}}</td>
<td>{{app.lastReleaseDt}} </td>
<td>{{app.totalOrders}}</td>
<td>TODO </td>
<td>{{app.totalActivations}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Does anybody have any ideas why adding a button or button group to the panel heading increases the height? Any tips on getting the height to what it was before the button?
because you are using a btn-sm (for small-devices) if you use btn-xs (for extra-small devices) that space will go away due to having a smaller padding
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel panel-default" ng-init="getApplications()">
<div class="panel-heading clearfix">
<b>Title has space below</b>
<div class="btn-group pull-right">
new
</div>
</div>
<div class="panel-body">
<!-- table -->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Name</th>
<th>Last Release Date</th>
<th>Orders</th>
<th>Downloads</th>
<th>Activations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps">
<td>{{app.columns.name}}</td>
<td>{{app.lastReleaseDt}} </td>
<td>{{app.totalOrders}}</td>
<td>TODO </td>
<td>{{app.totalActivations}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="panel panel-default" ng-init="getApplications()">
<div class="panel-heading clearfix">
<b>Title has no space</b>
</div>
<div class="panel-body">
<!-- table -->
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th>Name</th>
<th>Last Release Date</th>
<th>Orders</th>
<th>Downloads</th>
<th>Activations</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="app in apps">
<td>{{app.columns.name}}</td>
<td>{{app.lastReleaseDt}} </td>
<td>{{app.totalOrders}}</td>
<td>TODO </td>
<td>{{app.totalActivations}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I using this with bootstrap. Tables display fine but theres something wrong with the width of the thead and tbody rows, you can see they have a smaller width than the entire column.
IF you click the panel head you'll see the line temporarily being the correct size. How do I fix this.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading" data-toggle="collapse" href="#collapse1">Shop 1</div>
<!-- Table -->
<table class="table collapse" id="collapse1">
<thead>
<tr>
<th>Number</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>this is a shop</td>
<td>Go to</td>
</tr>
</tbody>
</table>
</div>
Well your problem is that the no. of columns i.e. <th></th> elements in table head <thead> doesn't match the no. of columns in table body <tbody>.
So you need to put an extra <th></th> inside table head <thead> which could be blank like this -
Your code Fiddle
Updated Working Fiddle with code below -
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading" data-toggle="collapse" href="#collapse1">Shop 1</div>
<!-- Table -->
<table class="table collapse" id="collapse1">
<thead>
<tr>
<th>Number</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>this is a shop</td>
<td>Go to</td>
</tr>
</tbody>
</table>
</div>