I have the following markup and I am trying to remove all the div classes that have a class called "control".
<table role="presentation" data-name="tab_2_section_6" class="section">
<colgroup>
<col style="width:100%;">
<col>
</colgroup>
<tbody>
<tr role="group">
<td colspan="1" rowspan="1" role="radiogroup">
<div class="info">
<div class="validators"></div>
</div>
<div class="control">
<span>some text</span>
</div>
</td>
<td class="cell zero-cell"></td>
</tr>
<tr role="group">
<td colspan="1" rowspan="1" role="radiogroup">
<div class="info"></label>
<div class="validators"></div>
</div>
<div class="control">
<span>some text</span>
</div>
</td>
<td class="cell zero-cell"></td>
</tr>
</tbody>
I am using the following js snippet but the problem is it removes all the div classes that have "control" class assigned on the whole page.
var $unwantedclassess = $("td:has(div.control):has(div.control)");
if ($unwantedclassess) {
$unwantedclassess.find(".control").removeClass('control');
}
I just need it for the table "data-name="tab2_section_6". So I have tried like this as well but it fails and doesn't remove any class.
var $unwantedclassess = $("table[data-name='tab_2_section_6']td:has(div.control):has(div.control)");
Related
I am trying to enable a pop-up window with information on the clicked table element.
Therefore I wanna get the element ID of the clicked element. Thanks :D
Problem
I always get the same ID//table element no matter which table entry I click.
HTML Page with a table which displays data from the database
{%extends 'main/base.html'%}
{%block main%}
<div class="container-xxl d-flex justify-content-center">
<div class="container-fluid" style='background-color:aquamarine;'></div>
<div class="container-fluid" style='background-color:rgba(190, 90, 230, 0.308); height:10em;'></div>
<div class="container-fluid" style='background-color:aquamarine;'></div>
</div>
<div class="container-xxl d-flex justify-content-center">
<form action='' method="POST">
{%csrf_token%}
<input type='text' name='isbn' placeholder="ISBN-13 Number...">
<button type='submit'>Add</button>
</form>
</div>
<div class="container-xxl d-flex justify-content-center" id='table'>
<table class='table table-hover'>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Author</th>
<th>Kategorie</th>
<th>Seitenzahl</th>
</tr>
</thead>
<tbody>
{%for book in book_table%}
<!--tr onClick()-->
<tr onClick='get_element_ID()'>
<td id='ID'>{{book.id}}</td>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
<td>{{book.kategorie}}</td>
<td>{{book.seitenzahl}}</td>
</tr>
{%endfor%}
</tbody>
<tfoot>
<tr>
<td>
<p>footer</p>
</td>
</tr>
</tfoot>
</table>
</div>
<script>
function get_element_ID(){
var id = (this).document.getElementById('ID');
console.log(id);
}
</script>
{%endblock main%}
Picture of HTML Page with Table
Picture of console log output
in the HTML DOM u can't have more than 1 item with the same id, for all of your td tags the id is ID, so if u change the <td id="ID"> with <td id={{book.id}}> , each td must have the correct id.
You are getting ID 1 all the time because when you do getElementByID("ID") the DOM returns the first element it finds with that ID, since there should be no more.
Like mentioned above the issue was the rather silly mistake that the requested ID in getElementById('ID') was always the same.
This know works like it should:
{%extends 'main/base.html'%}
{%block main%}
<div class="container-xxl d-flex justify-content-center">
<div class="container-fluid" style='background-color:aquamarine;'></div>
<div class="container-fluid" style='background-color:rgba(190, 90, 230, 0.308); height:10em;'></div>
<div class="container-fluid" style='background-color:aquamarine;'></div>
</div>
<div class="container-xxl d-flex justify-content-center">
<form action='' method="POST">
{%csrf_token%}
<input type='text' name='isbn' placeholder="ISBN-13 Number...">
<button type='submit'>Add</button>
</form>
</div>
<div class="container-xxl d-flex justify-content-center" id='table'>
<table class='table table-hover'>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Author</th>
<th>Kategorie</th>
<th>Seitenzahl</th>
</tr>
</thead>
<tbody>
{%for book in book_table%}
<!--tr onClick()-->
<tr onClick='get_element_ID("{{book.id}}")'>
<td id="{{book.id}}">{{book.id}}</td>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
<td>{{book.kategorie}}</td>
<td>{{book.seitenzahl}}</td>
</tr>
{%endfor%}
</tbody>
<tfoot>
<tr>
<td>
<p>footer</p>
</td>
</tr>
</tfoot>
</table>
</div>
<script>
function get_element_ID(id){
var book_id = document.getElementById(id);
console.log(book_id);
}
</script>
{%endblock main%}
Output console
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>
I have a webpage which has too many divs in it.I want to keep a portion of webpage page fixed even when It is scrolling down
The Problem
I tried it with many combinations.But the problem is due to too many divs I am not able to "cut" a section of webpage with a div to which I can assign class having position:fixed.Any help will be really appreciated
My actual HTML code (I am using django so there are many django/jinja variables in it ignore them)
{% block content %}
<div class="content-wrapper">
<div class="row">
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h4 class="card-title">My Webpage</h4>
<p class="card-description" style="color:black;">
Zone for Gasoline:A, Year :2018
</p>
<div class="row">
<div class="col-md-12">
<div class="btn-group btn-block mb-4" aria-label="Brand placement algorithm steps">
<div class="col md-4">
<button type="button" class="btn btn-block btn-outline-secondary"> Step 1 </button>
</div>
<div class="col md-4">
<button type="button" class="btn btn-block btn-outline-secondary" > Step 2 </button>
</div>
<div class="col md-4">
<button type="button" class="btn btn-block btn-primary"> Step 3 </button>
</div>
</div>
</div>
</div>
<div id="capture-this">
<div class="gridster">
<table border = "1" class=".table-responsive">
<tr>
<th colspan="4" style="background-color:#05345c;">Zone 1</th>
<th colspan="4" style="background-color:#05345c;">Zone 2</th>
<th colspan="4" style="background-color:#05345c;">Zone 3</th>
{% ifequal request.session.step 4 %}
<th colspan="4" style="background-color:#05345c;">Period 4</th>
{% endifequal %}
</tr>
<tr>
<td width="400" align="center" style="background-color:#0085ca">T1</td>
<td width="400" align="center" style="background-color:#0085ca">T2</td>
<td width="400" align="center" style="background-color:#0085ca">T3</td>
<td width="400" align="center" style="background-color:#0085ca">T4</td>
<td width="400" align="center" style="background-color:#0085ca">T1</td>
<td width="400" align="center" style="background-color:#0085ca">T2</td>
<td width="400" align="center" style="background-color:#0085ca">T3</td>
<td width="400" align="center" style="background-color:#0085ca">T4</td>
<td width="400" align="center" style="background-color:#0085ca">T1</td>
<td width="400" align="center" style="background-color:#0085ca">T2</td>
<td width="400" align="center" style="background-color:#0085ca">T3</td>
<td width="400" align="center" style="background-color:#0085ca">T4</td>
{% ifequal request.session.step 4 %}
<td width="400" align="center" style="background-color:#0085ca">T1</td>
<td width="400" align="center" style="background-color:#0085ca">T2</td>
<td width="400" align="center" style="background-color:#0085ca">T3</td>
<td width="400" align="center" style="background-color:#0085ca">T4</td>
{% endifequal %}
</tr>
</table>
<!---I want webpage till here to remain fixed -->
<ul>
</ul>
</div>
</div>
{% block content_controls %}
{% endblock %}
</div>
</div>
</div>
</div>
</div>
What I want
I basically want webpage till </table> tag to remain fixed.I am using Gridster which has widgets in the form of <li> elements so those will come under the <ul>.
There will be too many such <li> elements so when user scrolls down the <table> and above content should be fixed
A rough Fiddle(The fiddle is to get idea how the webpage looks like)
In fiddle I am expecting that till table row having value T1,T2, T3, T4 .... the webpage should remain fix
So, I have a small table with some content, which with the click of a button can be expanded to show a container div with extra content.
I'm trying to tie a function to this action, but when I do, the function seems to get fired once per number of table row.
JSFiddle:
https://jsfiddle.net/jtby9c12/
Table:
<button id="toggle-descriptions-button">+</button>
<table>
<tbody>
<tr>
<th class="table-header-1">Download</th>
<th class="table-header-2">Size</th>
<th class="table-header-3">Notes</th>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: block;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
</tbody>
</table>
*The actual table contains 22 rows and descriptions, this just shows the structure sample.
Jquery:
var descriptions = $(".div-container")
var descButton = $("#toggle-descriptions-button")
descButton.click(function(){
console.log("Button Clicked!")
descriptions.toggle(400, function() {
console.log("I'm a fucntion!")
});
});
As you can see, it calls the function 22 times, and I'm trying to get it to call just once.
I'm looking to get a single call back for the function, it's one state change for all descriptions, I only need one return.
To achieve this you can use the promise() returned from the toggle() calls. Attach a done() event handler to it, which will fire after all the promises have been resolved:
var $descriptions = $(".div-container")
var $descButton = $("#toggle-descriptions-button")
$descButton.click(function() {
console.log("Button Clicked!")
$descriptions.toggle(400).promise().done(function() {
console.log("I'm a function!")
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle-descriptions-button">+</button>
<table>
<tbody>
<tr>
<th class="table-header-1">Download</th>
<th class="table-header-2">Size</th>
<th class="table-header-3">Notes</th>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
<tr>
<td class="column-1">Item
<div class="div-container" style="display: none;">
<div class="div-gallery">
<img src="#">
<br style="clear: both">
</div>
<div class="div-description">Description Text</div>
</div>
</td>
<td class="column-2">1.2MB</td>
<td class="column-3">Note</td>
</tr>
</tbody>
</table>
This is a two part question, I have searched under multiple tags to find an answer to no avail.
I have a table containing 4 columns and 4 nuggets, I am trying to get them to auto align on the page load so that the four columns take the whole width of the page across the bottom. I would like it to look the same whether the user is on a 22" wide screen or a 15" screen:
Would this best be done by JavaScript or is there a more efficient
way of doing this?
How would you achieve this?
Edit: sorry I should have been more specific, this is my code:
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#c1bdb6;">
<tbody>
<tr>
<td align="right" valign="top" id="col-1">
<div id="nugget1" align="right" style="height: 459px;">
<div id="nugget1-content" align="left">
<h2 class="menutitle"> FAQ's </h2>
</div>
</div>
</td>
<td valign="top" id="col-2">
<div id="nugget2" align="center" style="height: 459px;">
<h2 class="menutitle"> Contacts </h2>
</div>
</td>
<td valign="top" id="col-3">
<div id="nugget3" align="center" style="height: 459px;">
<h2 class="menutitle"> Calendar </h2>
<ul class="vertmenu">
<li>
Shared Calendars
</li>
</div>
</td>
<td valign="top" id="col-4">
<div id="nugget4" align="center" style="height: 459px;">
<h2 class="menutitle"> Mail </h2>
</div>
</td>
</tr>
</tbody>
</table>
Unless there's a particular reason why you're using such outdated HTML (tables for layout, use of things like valign and align in the HTML, etc), the most efficient (with regards to page load) way of achieving what you want is by restructuring your HTML to something more along the lines of:
<div id="nuggets">
<div id="nugget1">
<h2 class="menutitle"> FAQ's </h2>
</div>
<div id="nugget2" class="col">
<h2 class="menutitle"> Contacts </h2>
</div>
<div id="nugget3">
<h2 class="menutitle"> Calendar </h2>
<ul class="vertmenu">
<li>
Shared Calendars
</li>
</div>
<div id="nugget4">
<h2 class="menutitle"> Mail </h2>
</div>
</div>
You can then have CSS along the lines of:
#nuggets {
height: 459px;
}
#nuggets > div {
width: 25%;
height: 459px;
float: left;
text-align: center;
}
Assuming a nugget is a table cell, this is probably what you're looking for:
This sounds like a job for CSS.
Relevant CSS:
table {
width: 100%;
}
You can try setting the table width to correspond to screen resolution, perhaps using this ?
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
Body html here
</td>
</tr>
</table>
If you are using the actual HTML <table> tag for your table, then the easiest way to do it is with the <colgroup> tag.
In your case, the code would be:
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#c1bdb6;">
<colgroup width="25%" />
<tbody>
<tr>
<td align="right" valign="top" id="col-1">
<div id="nugget1" align="right" style="height: 459px;">
<div id="nugget1-content" align="left">
<h2 class="menutitle"> FAQ's </h2>
</div>
</div>
</td>
<td valign="top" id="col-2">
<div id="nugget2" align="center" style="height: 459px;">
<h2 class="menutitle"> Contacts </h2>
</div>
</td>
<td valign="top" id="col-3">
<div id="nugget3" align="center" style="height: 459px;">
<h2 class="menutitle"> Calendar </h2>
<ul class="vertmenu">
<li>
Shared Calendars
</li>
</div>
</td>
<td valign="top" id="col-4">
<div id="nugget4" align="center" style="height: 459px;">
<h2 class="menutitle"> Mail </h2>
</div>
</td>
</tr>
</tbody>
Any attributes in the <colgroup> will apply to all of the columns in that group. If you have specific styling that you'd like to do to any of the individual columns, you can add <col> tags within the <colgroup> for each column, to define them. You can also nest <colgroup> tags inside each other.