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
Related
When I just data-bind one of the attributes, they work. But when I combine them with attr, they don't work. Knockout 3.4.2
<table data-bind="foreach: listPlaces">
<tr>
<td>
<button data-bind="attr: {click: $parent.onClick, text: marker.title}"></button>
</td>
</tr>
</table>
marker.title just shows a string, and onClick opens an info window in google maps.
Your binds should be made like so
<table data-bind="foreach: listPlaces">
<tr>
<td>
<button data-bind="click: $parent.onClick, text: marker.title"></button>
</td>
</tr>
</table>
First of all the text binding should NOT be withing the attr tags, as it is an internal bind used by knockout to update the content of your element and it is expected to work like that.
Now for the click handler, the above is the correct way to attach a click handler, maybe you could get away with an attr: { onClick : 'MyFunc'} but i both doubt it and dont recomend it!
I want to create tooltips with qTip but they have a lot of ridiculous examples on their page that is waaaaaaaaaaay to complicated.
I want something like:
<span qtip="This is the text in my tooltip">This text has a tooltip</span>
is that possible?
The $(document).ready is not an option since I have a loop with several cells that needs tooltips all of them.
Meta code:
foreach Customer in List<Customers>
{
<tr>
<td>
<span qtip="Tooltip for Name">Customer.Name</span>
</td>
<td>
<span qtip="Tooltip for Address">Customer.Address</span>
</td>
<td>
<span qtip="Tooltip for Phonenumber">Customer.Phonenumber</span>
</td>
</tr>
}
Is this possible with qtip or is there something else that can generate nice looking tooltips that works similar to the above?
Thanks for all help.
The docs suggest you should be able to use the following JS:
$('[qtip!=""]').qtip({
content: {
attr: 'qtip'
}
});
This should grab all elements with a qtip attribute, and apply qTip to them.
Though I'm curious what you mean by
The $(document).ready is not an option since I have a loop with several cells that needs tooltips all of them.
Are you saying your list of customers is added to dynamically without reloading the page? If so please show where that happens.
For safety you should really use $(document).ready if your customer list doesn't change.
Here's an example based on the question:
$(document).ready(function() {
$('[qtip!=""]').qtip({
content: {
attr: 'qtip'
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/qtip2/3.0.3/basic/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/qtip2/3.0.3/basic/jquery.qtip.min.css">
<table>
<tbody>
<tr>
<td>
<span qtip="Tooltip for Name">Customer.Name</span>
</td>
<td>
<span qtip="Tooltip for Address">Customer.Address</span>
</td>
<td>
<span qtip="Tooltip for Phonenumber">Customer.Phonenumber</span>
</td>
</tr>
</tbody>
</table>
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.
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')";
I have a 3x3 table of td's each with id's (id='a1'...id='c3'). I'd like to be able to click on any of the 9 td's and to alert the id of that td.
Here is my Coffeescript (in the asset pipeline)
$(document).ready ->
$("td").click ->
alert(#I would like to alert the id of whichever of the 9 td cell's have been clicked on)
Here's my index.html.erb
<table>
<tbody>
<tr>
<td id='a1'>A1</td>
<td id='b1'>B1</td>
<td id='c1'>C1</td>
</tr>
<tr>
<td id='a2'>A2</td>
<td id='b2'>B2</td>
<td id='c2'>C2</td>
</tr>
<tr>
<td id='a3'>A3</td>
<td id='b3'>B3</td>
<td id='c3'>C3</td>
</tr>
</tbody>
</table>
I'm horrible at JS so any help is appreciated!
$('td').click: (e)->
alert $(#).id
Same in CoffeeScript
Also, storing user data with html element is very easy with data-* attributes, for example:
<td data-id="42"></td>
And getting this id is easy with jQuery data method like follows:
var id = $('td').data('id');
First off, using jQuery on yields better performance than attaching a click handler to each td, especially if you have lots of tds:
$('table').on 'click', 'td', (event) ->
# event.currentTarget is the td which was clicked
alert event.currentTarget.id
event.currentTarget will be a DOM element object, and so every attribute will be available as a property of the object. The other answers referring to $(this).id are wrong, since $(this) (or $(event.currentTarget)) is a jQuery object, and as such attributes are available with the attr method: $(this).attr('id').