Applying less generated css to all the html table except th elements - javascript

I have the following html code
<textarea name="mytextarea" id="mytextarea" rows="10" cols="50">
color:red;
.yellow {
color : yellow;
}
</textarea><br/>
<button id="mybutton">Parse</button><br/>
Content parsed : <br/>
<p id="parsedContent"></p>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Ya</td>
<td class="yellow">Hey</td>
<td>Ho</td>
</tr>
<tr>
<th>2</th>
<td>11</td>
<td>100</td>
<td>27</td>
</tr>
<tr>
<th>3</th>
<td>sadd</td>
<td>zaa</td>
<td>ddd</td>
</tr>
</tbody>
</table>
This is used to generate some css via a user input and insert dynamically the css generated to the head of the document.
I use the folowing javascript code to generate the css with the lesscss parser:
$('#mybutton').on('click',function(){
content = 'table tbody {'+$('#mytextarea').val()+'}';
var parser = new(less.Parser);
parser.parse(content, function (err, tree) {
if (!err) {
if($('#headCss').length===0){
$('head').append('<style id="headCss"></style>');
}
css = tree.toCSS();
console.log(tree);
$('#headCss').text(css);
$('#parsedContent').text(css);
}else{
$('#parsedContent').text(err);
}
});
});
$('#mybutton').click();
I need to apply the css generated to the table but it should not be applied to the table head (column and rows).
Is there a way to do this with only pure css on the textarea (not less).
Here a jsfiddle with the code : http://jsfiddle.net/Jiwoks/Lkz0mhor/
In this exemple I don't want row headers to be red, only td elements.
Any help much appreciated

You can put this code in the js.
I just noticed that you used <th>s as the header, so the :not(:first-child) is not needed.
content = 'table tbody td {'+$('#mytextarea').val()+'}';
In the JS.
Now this code selects the tds, which prevents the .yellow class from having any effect, since it looks for an element inside the td with the .yellow class, rather than the td itself.
You can get around this by modifying the input:
color:red;
&.yellow {
color : yellow;
}
However, since you want only pure css in the textarea input, you can modify it inside the code instead. For example with this line:
content = content.replace(/^\./mg, '&.');
It replaces all dots at the start of a line with &.
http://jsfiddle.net/Lkz0mhor/3/

Related

Why am I not able to apply a class to the span element close to the checkbox?

I have several tr's which is dynamically displayed inside the tbody.
In each tr,
There is a checkbox and beside the checkbox a span. Now am trying to add a class to the span close to the checkbox on click.
I have spent couple of days but can't get the exact thing I went. The closest I did was applying q class to all the spans.
I have searched here also, yet to find the solution. This is the html.
<table id="course">
<thead class="thead">
<tr>Course</TR>
<tr>description</tr>
<tr>units</tr>
<tbody id="courses">
<!-- this is where the tr's will be displayed -->
<!--example-->
<!--Row 1-->
<tr>
<td><input type="checkbox"><span class="button is-link">MATHS</span></td>
<td>Elementary Maths</td>
<td>1</td>
</tr>
<!--Row 2-->
<tr>
<td><input type="checkbox"><span class="button is-link">SCIENCE</span></td>
<td>Elementary Bla Bla</td>
<td>1</td>
</tr>
</tbody>
</table>
This is the last code I tried to use.
$("#courses").on('change','.checkbox',function (){
$(this).closest("thead").find("span").removeClass("is-link").addClass("is-success");
});
Also tried this below, and it worked but it affected both spans.
$("#courses").on('change','.checkbox',function (){
$("#courses").find("span").removeClass("is-link").addClass("is-success");
});
I changed it to this. It's not working too
$("#courses").on('change','.checkbox',function (){
$(this). closest ("thead").find("span").removeClass("is-link").addClass("is-success");
});
These are few of what I have tried to no avail!!
Thanks for your answers in adv!!
All the jQuery is inside $(document).ready(function (){. Juss omitted it here
There's a few issues here:
The checkbox input has no .checkbox class. You need to either add the class or use the :checkbox selector instead.
The table HTML is malformed. The <thead> element needs to be closed, the tbody should be a sibling of the thead (and not a child), and the content in the thead row should be in td or th cells.
The DOM traversal logic is flawed, partially due to the malformed HTML.
To do what you require you need to just get the closest('td') and find() the target span from there. Also note that in this case you can use toggleClass() instead of separate addClass()/removeClass() calls.
With those issues corrected, the code would look something like this:
$("#courses").on('change', ':checkbox', function() {
$(this).closest('td').find("span").toggleClass("is-link is-success");
});
.is-link { color: #00C; }
.is-success { color: #0C0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="course">
<thead class="thead">
<tr>
<td>Course</td>
<td>description</td>
<td>units</td>
</tr>
</thead>
<tbody id="courses">
<tr>
<td><input type="checkbox"><span class="button is-link">MATHS</span></td>
<td>Elementary Maths</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox"><span class="button is-link">SCIENCE</span></td>
<td>Elementary Bla Bla</td>
<td>1</td>
</tr>
</tbody>
</table>

Javascript - Highlight a column name when clicking on it only

I have a html table (with column names: T1, T2, T3). I want to highlight a column name (T1) ONLY when it is clicked on by the user, the rest of the column names don’t have a highlight (T2, T3). Then when the user clicks on another column name (T2), it is highlighted, but I want all the other column names to be reset with no highlight (T1, T3).
How can I do it using only javascript, css, and/or html? Please dont include JQuery, I cannot use it.
var elems = document.querySelectorAll('td');
var fnClick = function(){
var ie = document.querySelectorAll('td');
for(var x = 0; x < ie.length; x++){
elems[x].classList.remove("red");
}
this.classList.add("red");
}
for (var i = 0; i < elems.length; i++){
elems[i].addEventListener("click", fnClick);
}
.red { background-color: red; }
<table>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
When clicking, iterate through all column names and remove the class, lets say, "highlight".
After that add the class "highlight" to the column name clicked.
Or, look for elements by class name "highlight", and remove the class from all of them, then proceed to add the class to the clicked element.
First of all add an unique class to all the column elements for example- T1 for T1, T2 for T2, etc.
Then create a css class "highlight" with appropriate background color to create the highlight effect.
Then within the tags write an onclick function call like <td class="T1" onclick="addHighlight(T1)">...</td>
After that you can use JavaScript to create a function 'addHighlight' which is triggered when the user clicks on a column element. Within that function you can use getElemenstbyClassname to access the elements with class name of the column that was clicked(you passed in the class name use it as a parameter) and addClass method to add the class highlight.
To remove the highlight effect once another column is clicked just search for elements with the class "highlights" and use removeClass to remove that class and thus the highlight effect.
Refer to w3schools.com for further guidance. All is clearly explained there :)
You can do this by styling the :focus pseudo class for your td elements. In order to make your td element focus-able you would have to set the tabindex attribute to your td elements as well.
Index.html
<html>
<head>
<title>
Table Highlight
</title>
<style>
table {
border: solid;
}
td {
width: 100px;
height: 100px;
border: dotted 1px;
}
td:focus {
background-color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<td tabindex="1">T1</td>
<td tabindex="1">T2</td>
<td tabindex="1">T2</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
</table>
</body>
</html>
Here is a codepen as POC:
https://codepen.io/anon/pen/eKMgvJ
If you want to highlight the corresponding column name (table head element) of the clicked table cell, then you would need to add a click handler on your table.

Apply css to tr with custom data attribute in JQuery

I have a table, each tr element has a custom data attribute and I want to apply style to certain values.
In HTML:
<table id="notify" class="t_notify">
<tr data-notify="101">
<td>data</td>
<td>data</td>
</tr>
<tr data-notify="102">
<td>data</td>
<td>data</td>
</tr>
<!-- and goes -->
</table>
With CSS:
.t_notify>tbody>tr{background:#BBB;}
.t_notify>tbody>tr:hover{background:transparent;}
I tried in Jquery to make this when I click in a certain tr element, for example:
$("#notify > tbody > tr").attr("[data-notify='101']").css({"background":"#CCC"});
But this doesn't work. I would like some help.
Good Approach
Your query must be in the selector, like so :
$("#notify > tbody > tr[data-notify='101']").css({"background":"#CCC"});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="notify" class="t_notify">
<tr data-notify="101">
<td>data</td>
<td>data</td>
</tr>
<tr data-notify="102">
<td>data</td>
<td>data</td>
</tr>
<!-- and goes -->
</table>
attr()
The attr() function returns the value of the attribute or sets it. In your case, you want neither. Hope it helps.
Your issue is that attr() is intended to be used to get/set an attribute. It doesn't filter the elements in a collection. Instead you should use the attribute selector in the primary jQuery object.
Also, just to note that in the example below I changed the highlight colour as #BBB is very hard to spot against #CCC. I also amended the code to use addClass(), as you should avoid the use of css() where possible, as it ties the JS code too closely to the UI. Finally, I amended the CSS rules so that operator precedence works for all scenarios.
$("#notify > tbody > tr[data-notify='101']").addClass('foo');
.t_notify tr {
background: #BBB;
}
.t_notify > tbody > tr:hover {
background: transparent;
}
.t_notify tr.foo {
background-color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="notify" class="t_notify">
<tr data-notify="101">
<td>data</td>
<td>data</td>
</tr>
<tr data-notify="102">
<td>data</td>
<td>data</td>
</tr>
<!-- and goes on... -->
</table>
Put the data in the selector: Demon on JsFiddle
$("#notify > tbody > tr[data-notify='101']").css({"background":"#CCC"});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="notify" class="t_notify">
<tr data-notify="101">
<td>data</td>
<td>data</td>
</tr>
<tr data-notify="102">
<td>data</td>
<td>data</td>
</tr>
<!-- and goes -->
</table>
The CSS attribute selector matches elements based on the presence or value of a given attribute.
/* <a> elements with a title attribute */
a[title] {
color: purple;
}
/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
color: green;
}
/* <a> elements with an href containing "example" */
a[href*="example"] {
font-size: 2em;
}
/* <a> elements with an href ending ".org" */
a[href$=".org"] {
font-style: italic;
}
source
$("#notify > tbody > tr").attr("[data-notify='101']")
should be:
$("#notify > tbody > tr[data-notify='101']")

Table row hover, background change and click but have some child cells in the row have different properties

<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('go.html');">
<td>1</td>
<td>John/td>
<td>Dump</td>
</tr>
</table>
Javascript:
function ChangeColor(tableRow, highLight)
{if (highLight)
{tableRow.style.backgroundColor = '#F5FFDB';}
else
{tableRow.style.backgroundColor = '';}}
function DoNav(theUrl)
{document.location.href = theUrl;}
I use the following structure to draw the table. When I hover on a row it changes the background and anywhere I click on the row it will jump to the url. What I'm trying to do is have some id identifier (that maybe goes into <td>) which basically tells certain columns in a row to behave differently. Namely this is what I'm looking for:
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr>
<td id="hover_go_style_1">1</td>
<td id="hover_go_style_1">John</td>
<td id="hover_go_style_2">Dump</td>
</tr>
</table>
Any ideas?
EDIT:
I forgot to mention... the id="hover_go_style_1" would take me to one url and id="hover_go_style_2" would take me to another url. That's the "difference". As it is now with onClick the whole row takes me to one url, but in essence im trying to isolate cells. Not sure how to explain this better.
You should be using CSS for your hover color, it's much simpler there. Your click event can be much nicer hooked up and handled completely in your JavaScript also. I've added a data-url (HTML5-compatible) attribute to your row to define the URL.
jsFiddle
HTML
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr data-url="go.html">
<td>1</td>
<td>John</td>
<td>Dump</td>
</tr>
</table>
JS
$('tr[data-url]').click(function () {
window.location.href = $(this).attr('data-url');
});
CSS
tr:hover td {
background-color:#F5FFDB;
}
/* Style the third column differently */
tr:hover td:nth-child(3) {
background-color:#F00;
}

What is the most efficient way to reload CSS after adding data dynamically using jQuery?

This row was added after an ajax call:
<tr id="product1" class = "success">
<td>1</td>
<td>product one</td>
</tr>
the class success puts a green background to the row, but obviously this style is lost because the row was added dynamically.
I've seen solutions by dynamic loads of CSS, but I want to know which would be the most efficient if you get to have an extensive stylesheet.
thanks
i'm using boostrap:
<table id = "table_result" class="table">
<thead id ="table_result_search">
<tr>
<th>#</th>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
and Jquery:
//ajax
var tr = TrTableResult(id,nombre, stock, price, n);
$("#table_result_search").append(tr);
//fin ajax
function TrTableResult(id,nombre,stock,price,n){
var color = new Array("success", "error", "warning", "info");
var tr = '<tr id ="'+id+'" class="' + color[n] + '">';
tr+= '<td>'+ id +'</td>';
tr+= '<td>'+ product+'</td>';
tr+= '<td>'+ price +'</td>';
tr+= '<td>'+ stock +'</td>';
tr+= '</tr>';
return tr;
}
Updated answer:
Now that you've quoted your markup and code, it's clear that you do have the table class, so the original answer below isn't it.
But note that you're appending your tr to your thead element:
$("#table_result_search").append(tr);
Where your markup is:
<thead id ="table_result_search">
You're not seeing any effect of the success class because the rule is:
.table tbody tr.success > td {
background-color: #dff0d8;
}
Note the tbody in there. So the selector doesn't match, because you're appending the row to a thead, not a tbody.
Original answer:
As several of us have pointed out in the comments, CSS is applied by the browser to all elements that match the relevant selectors, whether added dynamically or not.
If the problem is that the success class doesn't seem to be working, it's probably that you're missing the table class from your table element (yes, really).
The rule in bootstrap's CSS is:
.table tbody tr.success > td {
background-color: #dff0d8;
}
Note that it starts with a class selector (.table), not a tag selector (table).
So for instance, this markup will not apply those styles to the td in this table:
<table>
<tbody>
<tr id="product1" class = "success">
<td>1</td>
<td>product one</td>
</tr>
</tbody>
</table>
Live Example | Source
But this markup (only change is to the table tag) will:
<table class="table">
<tbody>
<tr id="product1" class = "success">
<td>1</td>
<td>product one</td>
</tr>
</tbody>
</table>
Live Example | Source

Categories