What I am going to do is:
When i click on mails button, 1st table is going to appear and hide the second table and when subscribers button is pressed, 2nd table has to appear and hide the 1st table.
But I am facing bugs like when i pressed 2nd button it will not hide the 1st table
<script>
function toggle_display(id){
if(id=='mails'){
document.getElementById('mails').classList.remove('hidden');
document.getElementById('subscribers').classList.add('hidden');
}
if(id=='subscribers'){
document.getElementById('mails').classList.add('hidden');
document.getElementById('subscribers').classList.remove('hidden');
}
}</script>
<input type="button" class="btn" value="Mails"/>
<input type="button" class="btn" value="Subscribers"/>
<div class="row well well-lg hidden" id="mails">
<table class="col-sm-12" border="1px solid black">
<tr>
<th class="col-sm-2">Name</th>
<th class="col-sm-2">Email</th>
<th class="col-sm-2">Phone</th>
<th class="col-sm-2">Subject</th>
<th class="col-sm-3">Message</th>
</tr>
</table>
</div>
<div class="row well well-lg hidden" id="subscribers">
<table class="col-sm-12" border="1px solid black">
<tr>
<th class="col-sm-2">ID</th>
<th class="col-sm-5">Email</th>
<th class="col-sm-3">Action</th>
</tr>
</table>
</div>
Use this,, It is working...
<script>
function toggle_display(id){
if(id=='mails'){
document.getElementById('mails').style.display = 'block';
document.getElementById('subscribers').style.display = 'none';
}
if(id=='subscribers'){
document.getElementById('mails').style.display = 'none';
document.getElementById('subscribers').style.display = 'block';
}
}</script>
<input type="button" class="btn" onclick="toggle_display('mails');" value="Mails"/>
<input type="button" class="btn" value="Subscribers" onclick="toggle_display('subscribers');"/>
<div class="row well well-lg hidden" id="mails">
<table class="col-sm-12" border="1px solid black">
<tr>
<th class="col-sm-2">Name</th>
<th class="col-sm-2">Email</th>
<th class="col-sm-2">Phone</th>
<th class="col-sm-2">Subject</th>
<th class="col-sm-3">Message</th>
</tr>
</table>
</div>
<div class="row well well-lg hidden" id="subscribers">
<table class="col-sm-12" border="1px solid black">
<tr>
<th class="col-sm-2">ID</th>
<th class="col-sm-5">Email</th>
<th class="col-sm-3">Action</th>
</tr>
</table>
</div>
Related
I have a kendo Grid which is generating below code:
<div id="myGrid" class="k-grid k-widget" data-role="grid" style="display: block;">
<div class="k-grid-header" style="padding-right: 17px;">
<div class="k-grid-header-wrap">
<table role="grid">
<colgroup>
<col>
</colgroup>
<thead role="rowgroup">
<tr role="row">
<th role="columnheader" data-field="filename" rowspan="1" data-title="Nombre" data-index="0" id="9d93448e-a9f6-42bd-8ba6-c8b31334efcc" class="k-header">Name</th>
<th id="1b52a29e-730e-471c-978f-a44cffad7d90" rowspan="1" data-index="1" class="k-header">/th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table role="grid">
<colgroup>
<col>
</colgroup>
<tbody role="rowgroup">
<tr data-uid="368518f3-0ffc-4797-b262-85346e89430e" role="row">
<td class="text-disabled-color" role="gridcell">
myFile.pdf
</td>
<td style="display:none" role="gridcell">
<a class="k-button k-button-icontext k-grid-delete" href="#"><span class="k-icon k-delete"></span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
From the second table only, I would like to remove the two following inline class and css style from the td elements:
class="text-disabled-color"
style="display:none"
I know I can do that by using jQuery:
$("td[class='text-disabled-color']").removeAttr("class");
$("td[style='display:none']").removeAttr("style");
However this is a bit dangerous because if another td element has this same inline class and style it will get removed.
I want to remove the inline class and style from the second table within the div container myGrid. Imagine there is another table with td elements with the same inline class and style, in that case I do not want to remove them, only those within myGrid container. How can I do this?
As you always need to remove second table css & style you can use table:eq(1) this will refer to second table i.e :
$("#myGrid table:eq(1) td.text-disabled-color").removeAttr('class')
$("#myGrid table:eq(1) td[style='display:none']").removeAttr("style");
you can make use of below script where find the table inside div with class k-grid-content. Find all tds within table and remove class / attribute.
$(function(){
var $table = $('#myGrid div.k-grid-content table[role=grid]');
$table.find('td[role="gridcell"]').each(function(){
$(this).removeClass('text-disabled-color');
$(this).removeAttr('style');
});
});
.text-disabled-color {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myGrid" class="k-grid k-widget" data-role="grid" style="display: block;">
<div class="k-grid-header" style="padding-right: 17px;">
<div class="k-grid-header-wrap">
<table role="grid">
<colgroup>
<col>
</colgroup>
<thead role="rowgroup">
<tr role="row">
<th role="columnheader" data-field="filename" rowspan="1" data-title="Nombre" data-index="0" id="9d93448e-a9f6-42bd-8ba6-c8b31334efcc" class="k-header">Name</th>
<th id="1b52a29e-730e-471c-978f-a44cffad7d90" rowspan="1" data-index="1" class="k-header"></th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table role="grid">
<colgroup>
<col>
</colgroup>
<tbody role="rowgroup">
<tr data-uid="368518f3-0ffc-4797-b262-85346e89430e" role="row">
<td class="text-disabled-color" role="gridcell">Some text
myFile.pdf
</td>
<td style="display:none" role="gridcell">Some text
<a class="k-button k-button-icontext k-grid-delete" href="#"><span class="k-icon k-delete"></span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
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 tables - addFriends and existingFriends. The addFriends table has a button in the fourth column that, when clicked, should delete the corresponding row from that table and add it to the existingFriends table.
Right now, my code deletes the entire row (correct) and moves it to the other table (correct) but it includes the button and I don't want it to do that. The formatting also gets messed up and I can't figure out why.
Code:
HTML
<body>
<h1>Your Friends</h1>
<div class="mx-auto" style="width: 700;">
<table id="existingFriends" class="table table-striped table-dark table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Office</th>
<th scope="col">Friend Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dwayne 'The Rock' Johnson</td>
<td>Dallas></td>
<td>Top Dog/BFF</td>
</tr>
</tbody>
</table>
</div>
<h1>Suggested Friends</h1>
<div class="table-container" style="width:500;" align="center;">
<table id="addFriends" class="table table-striped table-dark table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Office</th>
<th scope="col">Friend Level</th>
<th scope="col">Add</th>
</tr>
</thead>
<tbody>
<tr id="ryan">
<td>Ryan Reynolds</td>
<td>Dallas</td>
<td>Acquaintance</td>
<td>
<a role="button" class="btn btn-success btn-sm" value="Shift Row" onclick="shiftFunc(); putBack();">
<i class="fas fa-check-square"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
JS
<script language="javascript">
var row = document.getElementById("ryan");
function shiftFunc() {
row.parentNode.removeChild(row);
}
function putBack() {
var tbl = document.getElementById("existingFriends");
tbl.appendChild(row);
}
</script>
Picture Output: Before Click
Picture Output: After Click
Both of the below answers solved the problem of moving one row to a different table. I am not going to bother fixing the formatting issue as I am now required to convert everything to react and react does not have value or onclick javascript functions.
You can give the table cell with the add button a class so it can be selected with a query selector and removed.
To make the adding button more dynamic, you should pass this as an argument to the function and set row as the parentNode of the parentNode of the button so the function will work for more than one row.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Your Friends</h1>
<div class="mx-auto" style="width: 700;">
<table id="existingFriends" class="table table-striped table-dark table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Office</th>
<th scope="col">Friend Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dwayne 'The Rock' Johnson</td>
<td>Dallas></td>
<td>Top Dog/BFF</td>
</tr>
</tbody>
</table>
</div>
<h1>Suggested Friends</h1>
<div class="table-container" style="width:500;" align="center;">
<table id="addFriends" class="table table-striped table-dark table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Office</th>
<th scope="col">Friend Level</th>
<th scope="col">Add</th>
</tr>
</thead>
<tbody>
<tr id="ryan">
<td>Ryan Reynolds</td>
<td>Dallas</td>
<td>Acquaintance</td>
<td class="addColumn">
<a role="button" class="btn btn-success btn-sm" value="Shift Row" onclick="shiftFunc(this); putBack();">
<i class="fas fa-check-square"></i>
</a>
</td>
</tr>
<tr id="daniel">
<td>Daniel </td>
<td>Dallas</td>
<td>Acquaintance</td>
<td class="addColumn">
<a role="button" class="btn btn-success btn-sm" value="Shift Row" onclick="shiftFunc(this); putBack();">
<i class="fas fa-check-square"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<script language="javascript">
var row = document.getElementById("ryan");
function shiftFunc(elem) {
row = elem.parentNode.parentNode;
row.parentNode.removeChild(row);
}
function putBack() {
var tbl = document.getElementById("existingFriends");
var add = row.querySelector('.addColumn');
row.removeChild(add);
tbl.appendChild(row);
}
</script>
</body>
</html>
your javascript should look like this ...
<script language="javascript">
var row = document.getElementById("ryan");
function shiftFunc() {
row.parentNode.removeChild(row);
}
function putBack() {
var tbl = document.getElementById("existingFriends");
row.lastElementChild.remove();
tbl.appendChild(row);
}
</script>
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>
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>