I need to hide head and column using jQuery. The below code doesn't work.
$('#MD116139889_ZIPCODE_InputField').find('.input-group-addon').click(function(){
$('.116141670_ZIPCODE_IDPopupHead').hide();
$('.116141670_ZIPCODE_IDPopupCol').hide();
});
Table Image
<div id="MD116139889_ZIPCODE_dialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 76px; max-height: none;">
<div id="popUpContentResult" class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th width="30%" height="19" class="text-center 116141670_ZIPCODE_IDPopupHead">ZipId</th>
<th class="text-center 116141670_ZIPCODEPopupHead">Zip Code</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" class="text-center 116141670_ZIPCODE_IDPopupCol">00196</td>
</tr>
</tbody>
I took off the find() of the bind for a simple test case, but it seems to work fine.
$('#MD116139889_ZIPCODE_InputField').click(function() {
$('.116141670_ZIPCODE_IDPopupHead').hide();
$('.116141670_ZIPCODE_IDPopupCol').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MD116139889_ZIPCODE_dialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 76px; max-height: none;">
<div id="popUpContentResult" class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th width="30%" height="19" class="text-center 116141670_ZIPCODE_IDPopupHead">ZipId</th>
<th class="text-center 116141670_ZIPCODEPopupHead">Zip Code</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" class="text-center 116141670_ZIPCODE_IDPopupCol">00196</td>
</tr>
</tbody>
</table>
</div>
</div>
<button id="MD116139889_ZIPCODE_InputField">Click Me</button>
Related
I've been trying to get this one to work based on similar questions/answers, but no success.
This is my attempt to fix the col width by explicitly setting each column's width, but nothing changes!
<thead style="white-space: nowrap">
<tr>
<th style="width: 1%" class="text-center">ClientID</th>
<th style="width: 2%" class="text-center">Task Nº</th>
<th style="width: 25%" class="text-center">Task</th>
<th style="width: 4%" class="text-center">Date Assigned</th>
<th style="width: 4%" class="text-center">Link To File</th>
<th style="width: 22%" class="text-center">Notes</th>
<th style="width: 14%" class="text-center">Approval</th>
<th style="width: 26%" class="text-center">Comments</th>
</tr>
</thead>
Here's the Fiddle if you feel like giving a hand. Thank you!
Here's
In the fiddle the row in table body has inline css that makes the column width same for all - at 160px. You need to remove that. You can use class col-1 etc to specify table column width.
<div id="search-results" class="table-responsive">
<table class="table table-sm table-striped" id="dtable" style="font-size:0.9em">
<thead style="white-space: nowrap">
<tr>
<th class="text-center col-1">ClientID</th>
<th class="text-center col-1">Task Nº</th>
<th class="text-center col-2">Task</th>
<th class="text-center col-1">Date Assigned</th>
<th class="text-center col-1">Link To File</th>
<th class="text-center col-1">Notes</th>
<th class="text-center col-2">Approval</th>
<th class="text-center col-3">Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle" style="word-wrap: break-word;text-align:center">AA001</td>
<td class="align-middle" style="word-wrap: break-word;text-align:center">4</td>
<td class="align-middle" style="word-wrap: break-word;text-align:center">Review and approve content recommendations</td>
<td class="align-middle" style="word-wrap: break-word;text-align:center">5/19/2022</td>
<td class="align-middle" style="word-wrap: break-word;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;text-align:center">fafdaa</td>
<td class="text-center" style="align-middle"><select class="text-center" name="D1" style="border-radius: 0.2rem">
<option value="empty"></option>
<option value="Approved">Approved</option>
<option value="Discuss">Discuss</option>
<option value="Rejected">Rejected</option>
</select></td>
<td><input type="text" name="comments" style="width:99%;"></td>
</tr>
</tbody>
</table>
</div>
I am trying to duplicate a specific line in my table when I click in "duppliquer" button
See my code to create my table below
<table id="myTable" class="table table-striped table-bordered table order-list" data-page-length='100'>
<thead>
<tr>
<th style="width: 5%">Col 1</th>
<th style="width: 5%">Col 2</th>
<th style="width: 5%">Col 3</th>
<th style="width: 5%">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">Test1</td>
<td align="center">Test2</td>
<td align="center">Test3</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
<tr>
<td align="center">Test4</td>
<td align="center">Test5</td>
<td align="center">Test6</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
</tbody>
I know that I have to use Javascript ou Jquery, but I don't understand how to get the line that i want to duplicate
I made a lot of research on this subject, but cannot find any answer ...
You should get the current row element and then use clone(true) function to clone it and finally append the cloned row into the table so that it is placed after the current row elemnt. Here is an example:
$(".Duppliquer").click(function(){
var $rw = $(this).closest( "tr" );
var $new_rw = $rw.clone( true );
$rw.after($new_rw);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-striped table-bordered table order-list" data-page-length='100'>
<thead>
<tr>
<th style="width: 5%">Col 1</th>
<th style="width: 5%">Col 2</th>
<th style="width: 5%">Col 3</th>
<th style="width: 5%">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">Test1</td>
<td align="center">Test2</td>
<td align="center">Test3</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
<tr>
<td align="center">Test4</td>
<td align="center">Test5</td>
<td align="center">Test6</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
</tbody>
EDIT:
according to the comments the following code will also change the first cell of copied row:
$(".Duppliquer").click(function(){
var $rw = $(this).closest( "tr" );
var $new_rw = $rw.clone( true );
var $first_cell = $new_rw.find("td:first");
$first_cell.html($first_cell.html() + " Copy!");
$rw.after($new_rw);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-striped table-bordered table order-list" data-page-length='100'>
<thead>
<tr>
<th style="width: 5%">Col 1</th>
<th style="width: 5%">Col 2</th>
<th style="width: 5%">Col 3</th>
<th style="width: 5%">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">Test1</td>
<td align="center">Test2</td>
<td align="center">Test3</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
<tr>
<td align="center">Test4</td>
<td align="center">Test5</td>
<td align="center">Test6</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
</tbody>
//I also recommend using lowercase ids and classes.
$(document).ready(function(){
$(document).on('click', '.Duppliquer', function(e){
e.preventDefault();
var row = $(e.target).closest('tr'),
copy = row.clone();
copy.insertAfter(row);
});
});
Use JQuery find:
$('#myTable').find('tr').click(function () {
var indx = $(this).index() +1; --gets row index
var tr = $(this); --gets row
});
My table header is looking like this:-
<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">blahh</div>
</div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true" >
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
</table>
</div>
</div>
I want to full hide this entire ID column with the id="hidethis".
What I tried :
<th id="hidethis" data-field="product_id" style="display:none;">ID</th>
this didn't do anything, I think that css cannot be used like that in a th.
$('hidethis').hide();
No impact with that jquery also.
$('td:nth-child(2),th:nth-child(2)').hide();
The closest success I had with this, but that only hidden my Image th, but all my buttons remained there.
I will also put a picture:
I want to full hide all of the marked with red.
I've tried to make my code as easy as possible and also included some comments.
I would consider using a class instead of an id though. :)
// Save index (position) of th
const cellIndex = $('#hidethis').index();
// Hide th first
$('#hidethis').hide();
// Iterate over each table row
$('#scale_missed_entries tbody tr').each(function () {
// Select the cell with same index (position) as the table header
const cell = $(this).children('td').get(cellIndex);
// Hide 'em
$(cell).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">blahh</div>
</div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
Simply using CSS
[data-field="product_id"] {
display: none;
}
tr td:nth-of-type(1) {
display: none;
}
<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">blahh</div>
</div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
<tr>
<td>1
</td>
<td>10
</td>
<td>100
</td>
<td>1000
</td>
</tr>
</thead>
</table>
</div>
</div>
As i commented also apply a same class to th and there corresponding values <td> and hide them. it will work.
$('.hidethis').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">blahh</div></div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true" >
<thead>
<tr>
<th class="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td class="hidethis" data-field="product_id">112</td>
<td data-field="product_weight">51</td>
<td data-field="product_added_date">2017-10-11</td>
<td data-field="button">hi1</td>
</tr>
<tr>
<td class="hidethis" data-field="product_id">111</td>
<td data-field="product_weight">50</td>
<td data-field="product_added_date">2017-10-10</td>
<td data-field="button">hi</td>
</tr>
</tbody>
</table>
</div>
</div>
Note:- without jquery also you can now hide then through css:-
.hidethis{
display:none; // or visibility:hidden;
}
Add:
#hidethis { display: none; }
to your css:
#hidethis {
display: none;
}
<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">blahh</div>
</div>
<table id="scale_missed_entries"
data-toggle="table"
data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th> <th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
</thead>
</table>
</div>
</div>
Hope it helps.
Just use this
#scale_missed_entries th:nth-child(1) {
display: none;
}
edit based on the coment
To hide entire column use this--
#hidethis{
display:none;
}
#myTable th:nth-child(1) {
display: none;
}
#hidethis{
display:none;
}
<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">blahh</div></div>
<table id="scale_missed_entries" data-toggle="table" data-pagination="true">
<thead>
<tr>
<th id="hidethis" data-field="product_id">ID</th>
<th data-field="product_weight">Weight</th>
<th data-field="product_added_date">Added date</th>
<th data-field="button">Image</th>
</tr>
<tr>
<td id="hidethis">1
</td>
<td>10
</td>
<td>100
</td>
<td>1000
</td>
</tr>
</thead>
</table>
</div>
</div>
I have data displaying in an html table. I need to sort only one column
https://jsfiddle.net/5a3j7ek1/
<iframe width="100%" height="300" src="//jsfiddle.net/5a3j7ek1/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
how do i get the data from the structure number column and sort it?
Including tablesorter: http://tablesorter.com/docs/
HTML
<table id="mytable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td originalid="pivot__R1" class="p-dim-member" fidx="1" val="109">
<div class="wrapper">
<div class="p-head-content"><span>109</span>
</div>
</div>
</td>
<td>data3</td>
</tr>
<tr>
<td originalid="pivot__R4" class="p-dim-member" fidx="1" val="11" style="height: 24px;">
<div class="wrapper">
<div class="p-head-content"><span>11</span>
</div>
</div>
</td>
<td>data5</td>
</tr>
</tbody>
</table>
JS:
$("#mytable").tablesorter();
https://jsfiddle.net/5a3j7ek1/1/
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