I have a nested table column like:
Now I want to hide mark columns by table column index. How is it possible? Please provide concept not solution. I have confused how to start my task.
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 20%;">Customer Name</th>
<th style="width: 20%;">Location</th>
<th style="width: 40%;">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 50%;">Order No</th>
<th style="width: 50%;">Date</th>
</tr>
</thead>
</table>
</th>
<th style="width: 20%;">No Of Order</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="cutomer in gridData">
<td style="width: 20%;">{{ cutomer.itemName }}</td>
<td style="width: 20%;">{{ cutomer.itemName }}</td>
<td style="width: 40%;">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr data-ng-repeat="customerOrder in cutomer.orderList">
<th style="width: 50%;">{{ customerOrder.orderNo }}</th>
<th style="width: 50%;">{{ customerOrder.date }}</th>
</tr>
</tbody>
</table>
</td>
<td style="width: 20%;">No Of Order</td>
</tr>
</tbody>
</table>
Try this:
function show_hide_column(col_no, do_show) {
var tbl = document.getElementById('id_of_table');
var col = tbl.getElementsByTagName('col')[col_no];
if (col) {
col.style.visibility=do_show?"":"collapse";
}
}
Here is the 'concept' only to hide the column using index like you asked:
To hide the column by index, you could use CSS with :nth-child pseudo class. For example: td:nth-child(5). #5 would be which ever index you want to use. Please see this link for more details/explanation if you haven't used nth-child before: http://css-tricks.com/almanac/selectors/n/nth-child (I recommend looking at the example how to "select the third child element of the second element".
If you want to hide the column by index with a trigger event, I would use the javascript approach that Rudra has mentioned. For example, add a class to the html tag you wish to hide and blind it with an event to do the hiding, or alternatively you could bind it to an id.
Here you can use javascript to hide columns you want to hide.
But you need some event to hide and show columns you need.
Below i have added a class x to the table that contains your columns to be hidden.
<head>
<style>
.x
{
display:none;
}
</style>
</head>
<body>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 20%;">Customer Name</th>
<th style="width: 20%;">Location</th>
<th style="width: 40%;">
<table class="table x table-striped table-bordered table-hover">
<thead>
<tr>
<th style="width: 50%;">Order No</th>
<th style="width: 50%;">Date</th>
</tr>
</thead>
</table>
</th>
<th style="width: 20%;">No Of Order</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="cutomer in gridData">
<td style="width: 20%;">1</td>
<td style="width: 20%;">1</td>
<td style="width: 40%;">
<table class="table x table-striped table-bordered table-hover">
<tbody>
<tr data-ng-repeat="customerOrder in cutomer.orderList">
<th style="width: 50%;">1</th>
<th style="width: 50%;">1</th>
</tr>
</tbody>
</table>
</td>
<td style="width: 20%;">No Of Order</td>
</tr>
</tbody>
</table>
Now if you want to toggle between hide and show you can do it by changing css through javascript(this part is optional if you want),but for that you require a event or you can do it document.ready method too.
for example
I suppose you have a button having id='slidingcolumns'.
$(document).ready(function(){
$('#slidingcolumns').click(function(){
$(".x").slideToggle();
});
});
I hope this might help you
good luck
Related
I am trying to align my bootstrap table but I cant. I want it like as bootstrap class 'd-flex justify-content-between'. if i have 3 items in my table ,I want 1st one in the left 2nd one middle and last one in the right side. but here it takes places by its own way.
code:
<table class="table table-striped text-center">
<thead>
<tr>
<th scope="col">product Name</th>
<th scope="col">Quantity</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
{products.map((product) => (
<tr key={product.id}>
<td>{product.name}</td>
<td>{product.price}</td>
<td>
<button className="btn btn-danger">Delete</button>
</td>
</tr>
))}
</tbody>
</table>
It sounds like you want to align the text in the <td> tags instead of the entire table.
You can add text-left, text-center, and text-right classes to your <td> tags, respectively or I would try this in your CSS:
tr td:nth-child(1) {text-align: left;}
tr td:nth-child(2) {text-align: center;}
tr td:nth-child(3) {text-align: right;}
<table class="table table-striped text-center" border="1" style="width:100%;">
<thead>
<tr>
<th scope="col">product Name</th>
<th scope="col">Quantity</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>{product.name}</td>
<td>{product.price}</td>
<td>
<button className="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
i have a table like this:
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Family</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="div1">
#foreach(var item in Model)
{
<tr>
<th>item.Id</th>
<td>item.Name</td>
<td>item.Family</td>
<td>item.Age</td>
</tr>
}
</div>
I want to cut div1 content and paste to table tbody tag with jquery
the result that i need is:
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Name</th>
<th scope="col">Family</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
#foreach(var item in Model)
{
<tr>
<th>item.Id</th>
<td>item.Name</td>
<td>item.Family</td>
<td>item.Age</td>
</tr>
}
</tbody>
</table>
also i use this code but doesn't work:
<script>
$(document).ready(function () {
$("#div1").replaceAll("tbody");
}
</script>
I tried with some jquery method but mostly copy all div(div tag with content)
but i need only cut content of div.
please help me
This might help you.
$('#div1').contents().appendTo('tbody')
So what I'm currently trying to do know is if a column has a value of "TO BE CHECK" the "Print" button will be disabled.
Can someone help me with this?
Code is attached below.
<form action="" method="POST">
<table id="MyTable" class="table">
<thead>
<tr>
<th scope="col">Food Lane Sticker Control Number</th>
<th scope="col">OR/CR #</th>
<th scope="col">Business Permit #</th>
<th scope="col" id="test">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody name="MyTable" id="tbody">
<tr name="MyTable">
<th name="MyTable"></th>
<th name="MyTable"></th>
<th name="MyTable"></th>
<th name="MyTable">TO BE CHECK</th>
<td name="MyTable">
<button type="submit" id="print" name="print" class="btn btn-success">Print</button>
</td>
</tr>
</tbody>
</table>
</form>
With JQuery, you could do
$('#MyTable th[name="MyTable"], #MyTable td[name="MyTable"]').each( function(i,e){
if (e.innerHTML === "TO BE CHECK") {
$('#Print').prop('disabled', true);
}
} );
disabled onclick="addtocart()" />
I have two seperates tables: one for the header and one for the content. This is my table with only headers:
<table class="table table-sm table-bordered >
<thead>
<tr>
<th class="header-length">This is header one</th>
<th class="header-length">short</th>
<th class="header-length">X</th>
</tr>
</thead>
</table>
And this is my second table with the content
<table class="table table-sm table-bordered>
<tbody>
<tr>
<td>This content must align with header one</td>
<td>very short</td>
<td>Icon</td>
</tr>
</tbody>
</table>
I want the width of the header to align the content via JQuery I have used this selector to get the property
$('.header-length').width;
The header of the table cell must have the same width as the content whats inside <td>
How can I get the width of the th property to have the same width as the td with JQuery?
width is a function.
You can apply loop to get width of each th.
$('.header-length').each(function() {
console.log($(this).width());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-sm table-bordered">
<thead>
<tr>
<th class="header-length">This is header one</th>
<th class="header-length">short</th>
<th class="header-length">X</th>
</tr>
</thead>
</table>
--Edit--
const thWidthArr = [...document.querySelectorAll('.header-length')].map(th => th.offsetWidth);
const table2 = document.querySelectorAll('table')[1];
table2.querySelectorAll('td').forEach((td, i) => {
td.style.width = thWidthArr[i] + 'px';
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-sm table-bordered">
<thead>
<tr>
<th class="header-length">This is header one</th>
<th class="header-length">short</th>
<th class="header-length">X</th>
</tr>
</thead>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td>This content must align with header one</td>
<td>very short</td>
<td>Icon</td>
</tr>
</tbody>
</table>
Is there possible for the angular repeat to achieve that?Basically Im wondering there is a way to loop the 2 together? Really appreciate any help!
Controller:
$scope.date=[
{ID:1,Date:'2016-11-12'},
{ID:2,Date:'2016-11-15'},
{ID:3,Date:'2016-12-06'}
]
HTML:
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">{{d.Date}}</th>
</tr>
<tr>
<th>Bal</th>
<th>Order</th>
</tr>
</table>
And I wish the column Bal and Order will repeat side by side under each date column.
You can use ng-repeat-start and ng-repeat-end which was introduced in Angular 1.2
<th ng-repeat-start="d in date">Bal</th>
<th ng-repeat-end>Order</th>
Working example https://jsfiddle.net/9ve3fu0m/
You can accomplish this by using a nested table like this:
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">
<table border="1" >
<tr>
<th colspan="2">{{d.Date}}</th>
</tr>
<tr>
<th>Bal</th>
<th>Order</th>
</tr>
</table>
</th>
</tr>
</table>
You can use ng-repeat-start and ng-repeat-end
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">{{d.Date}}</th>
</tr>
<tr>
<th ng-repeat-start="d in date">Bal</th>
<th ng-repeat-end>Order</th>
</tr>