Can you change a table background attribute with Javascript? - javascript

How can I change the background attribute of a table with JQuery?
I do not want to use the style.background attribute. It needs to be the background attribute of the table. Yes, I know this is deprecated but I'm working with Google's Caja and that strips out any background-image CSS properties, but not backgrounds in tables. All very odd but I'd like to get this working.
I need:
<table background="image.png" border="1" bordercolor="#888" cellspacing="0" >
<tbody>
<tr>
<td style="width: 60px;"> </td>
</tr>
<tr>
<td style="width: 60px;"> </td>
</tr>
</tbody>
</table>

Use the following code after giving the id tid to table
document.getElementById("tid").style.backgroundImage="url('URL of the image')";
DEMO

Add the id to the table, then use
document.getElementById('myawesometableid').setAttribute('background', 'image.png');

Something like that:
$table.attr('background', newImageUrl)

The .css method can be handy.
$('table').css("background-color", "#000000");

this will help you
$('#tableId').css('background-image', ImageUrl);
.css()
or using JavaScript
document.getElementById("tableId").style.backgroundImage="url('ImageUrl.png')";

Related

Selecting elements based on absence of class-attribute in HTML DOM

Using the HTML DOM, I would like to select almost all td tags except for those td tags that have a class-attribute of "xyz".
With document.selectElementsByTagname["td"] I can get all the td-elements. However, I don't want all but only those where the class-attribute != "xyz".
Since there are no predicates in html DOM, I currently don't see a way to achieve this. Is there still a way to do it?
You can use querySelectorAll with :not() pseudo class selector.
document.querySelectorAll("td:not(.xyz)")
Array.from(document.querySelectorAll("td:not(.xyz)")).forEach(function(e) {
e.style.color = "red";
})
<table>
<tr>
<td class="xyz">a</td>
<td class="xyz">a</td>
<td>a</td>
<td class="xyz">a</td>
<td>a</td>
<td class="xyz">a</td>
</tr>
</table>
You do like this:
document.querySelector("td:not(.xyz)")

jQuery.after won't accept </tr> to end an element after starting one

I have a table that is generated by some other software, each row contains 50 columns and I'm trying to break the columns by adding a </tr><tr> to the end of a <td> element.
This is the code that is generated on the fly:
<tbody>
<tr>
<td class="col1" scope="col">08/22/2014</td>
<td class="col2" scope="col">Share</td>
<td class="col3" scope="col">Success</td>
<td class="col4" scope="col">Some notes</td>
<td class="col5" scope="col">8/23/2014</td>
...etc
<td class="col51" scope="col">End column</td>
If I use this Jquery:
$( ".col4").after('</tr><tr><td> </td>');
It appends but doesn't respect the </tr>....it ignores it and adds the <tr> on, resulting this code.
<td class="col3" scope="col">Success</td>
<td class="col4" scope="col">Some notes</td>
<tr>
<td> </td>
</tr>
<td class="col5" scope="col">etc...</td>
Wonder what the best way to get JQUERY to append that <TR> for me? When I modify the code in Firebug, breaking the rows gives me the desired output, just not sure how to get JQUERY to give me the </tr>.
jsFiddle Example
Detach the last 2 cells, append them to tbody and wrap them with tr
$('.col4').nextAll().detach().appendTo('tbody').wrapAll('<tr />')
You cannot insert tags separately using JQuery. For instance, take the following code, which inserts a <p> element into the body:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<script>
$("body").append("<p>");
</script>
</body>
</html>
Using the Firefox inspector, this is what the DOM looks like:
Thus, $("...").append("<p>"), $("...").append("</p>"), $("...").append("<p></p>") all modify the DOM in the same way.
You cannot handle incomplete or illegally formatted HTML as DOM elements. You want to gather up the correctly formatted children before that column and stuff them into a new complete <tr>.
If you want to handle HTML as text, you need to turn it into text with html() and paste it together into actual, correctly closed HTML, and then convert it back.

Why can I get the value attribute from a table with jQuery and is it safe to use

So I figured I would try to add the 'value' attribute to a TD tag because I need to store a value in a table and really kind of wanted it to be not so obvious, to my amazement, using jQuery I was able to retrieve this value.
My question is why am I able to get this value when it isn't a valid attribute and since I can, would it be safe to use.
HTML
<table id="tblTest">
<tr>
<td value="0">Value is zero</td>
</tr>
<tr>
<td value="1">Value is one</td>
</tr>
</table>
Javascript:
$('#tblTest').on('click','tr', function(){
alert($(this).children(':first').attr('value'));
});
I have created a fiddle for it http://jsfiddle.net/r2Lqp/
If I understand the question, my answer is this: you can add any attributes for personal use if they are not reserved in standards HTML.

get background color of a css class applied to an element

Say, I have the following CSS class:
.upComing{ background:#ccc; font-weight:bold; }
and in my HTML I have a table which some rows have that class applied, like so:
<table>
<tr> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> </tr>
<tr class='upComing'> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> </tr>
<tr class='upComing'> <td></td> <td></td> </tr>
</table>
so far, so good, but via JavaScript I have events that listen on td clicks and I want to get the color of the row (I know I can get the class of the row, but in this case I need to be able to get the color from the class).
I need to do this because the table can be exported to an excel file and the row colors don't get applied on the excel file if they're on a CSS class, I want to apply this color to each td before sending the html to the excel generator.
PS: the table is dynamically generated from a jQuery plugin we created, it's still a work in progress, but when we feel confident enough with it we'll release it for the public.
--Update--
Here's an update on this topic, there's indeed a pure javascript solution for this, I had to take a dive into jQuery's source code to check this. Here's the solution:
1) point to the desired element
var tr = $("tr.upComing").first()[0];
2) get the COMPUTED STYLE of the element
var css = window.getComputedStyle( tr );
3) get the PROPERTY VALUE of the COMPUTED STYLE
var color = css.getPropertyValue( "background-color" );
As of this moment I've only tested in FF, Safari, Chromium and Opera on a Mac, if someone could try this on IE and give us feedback that'll be grand.
You can use the jquery CSS method to get the background color from an element: http://api.jquery.com/css/
var color = $(this).css("background-color");
The following should do it
$('.upComing:eq(0)').css('backgroundColor')
If it helps, I have had the same problem and found out, that in your case using:
a = document.getElementsByClassName('upcoming');
console.log(a.style.backgroundColor);
would work IF you do not use:
document.addEventListener("DOMContentLoaded", function(event) {});<
but instead refer to the js file just before the closing body tag, which is considered dirty though.

Select cell in html table generated by foreach

please help me with knockout.js code
I try select element in table by id and change it's css style, but all rows have same id and I can't using function getElementById. How I can do this simple thing ?
<tbody data-bind="foreach: times">
<tr>
<td id=$index() data-bind="click: $root.select.bind($data, $index(), 0)> </td>
....
<td id=$index() data-bind="click: $root.select.bind($data, $index(), 19)> </td>
<tr>
</tbody>
Try to use such code:
<tbody data-bind="foreach: times">
<tr>
<td data-bind="attr: {id: $index()}, click: $root.select.bind($data, $index(), 0)></td>
<tr>
</tbody>
Read more about attr binding here: http://knockoutjs.com/documentation/attr-binding.html
Id's should always be unique. Assign the same class to all elements you're interested in and use a bit of jquery:
document.getElementsByClassName('class_name')
EDIT: Good point. I was originally going to suggest using jquery and then remembered this function. If you are using jquery library, you can also try this:
$('.class_name').each(function(index) {
...do something...
});
EDIT: to answer your question, there are a few ways to do this:
$('.class_name').attr('id', new_id)
or
$('.class_name').addClass('class_name')
depending on what exactly you're trying to do

Categories

Resources