Develop Reference

document.getElementById variable change value of class with jquery

I am using this code:
table_div = document.getElementById('exporttbl');
Now I need to use jquery to change all values of th and td with specific class? (but just in variable table_div. And not on the page.)
Example:
I need to put this
<th class="one">AAA<th><td class="one">BBB<td>
into this
<th class="one">RRR<th><td class="one">RRR<td>
In the next step I am using
var table_html = table_div.outerHTML.replace(/ /g, '%20');
so I would like to be able to use it.

Since your using jQuery you can do a .find(".one") on the element with the id exporttbl and change the text like so:
$("#exporttbl").find(".one").text("AAA");
Also note you need to close your <th> and <hr> elements. This would work for a table that looks like so:
<table id="exporttbl">
<th class="one">AAA</th><td class="one">BBB</td>
<th class="one">CCC</th><td class="one">DDD</td>
</table>
Here is an example.
For more information see jQuery documentation - https://api.jquery.com/find/

I think that some of the confusion here is that you are using
table_div = document.getElementById('exporttbl');
which is pure javascript but then you say that you want to use jQuery.
"Now I need to use jquery to change all values of th and td with specific class? (but just in variable table_div. And not on the page.)"
This will return the jQuery object for that table.
$('#exporttbl')
For all of the th, just add a find:
$('#exporttbl').find('th.one')
and for all of the td:
$('#exporttbl').find('td.one')
These will find all of the th/td with class = 'one' inside of the table with id = 'exporttbl'. Then you can do whatever you want with them. It sounds like you want to change the text so the following would work:
$('#exporttbl').find('th.one').text('RRR');
$('#exporttbl').find('td.one').text('RRR');
You could use
$("#exporttbl").find(".one").text("AAA");
as suggested but that will find all items with class = "one" inside of the table. That's fine as long as the th/td you want are the only items with that class. If there is anything else with that class then you'll need to be more specific, as I was.
Also, using a selector like 'th.one' is typically faster than just '.one' which may or may not be an issue depending on the size of the application.

checkbox selected addclass to a child

I'm trying to add a new class "ok" to an <a href> when it's checked.
I'm using bootstrap, jquery and bootstrap table from http://wenzhixin.net.cn/p/bootstrap-table.
the jsfiddle : http://jsfiddle.net/x0wegnhs/1/
Can you help me to release that ?
<tr>
<td class="bs-checkbox"><input data-index="0" name="btSelectItem" type="checkbox"></td>
<td style="text-align: left; ">file 1</td>
</tr>

Use closest to find the nearest tr, then find to find the anchor link. Use toggleClass with a boolean value to turn on/off that ok class based on the checked state.
http://jsfiddle.net/TrueBlueAussie/x0wegnhs/6/
$(':checkbox').change(function () {
$(this).closest('tr').find('td a').toggleClass('ok', $(this).is(':checked'));
});
Side notes on jQuery vs direct access:
As #Karl-André Gagnon points out this can, apparently, be shortened a little by going RAW JS for the checked property like this:
$(':checkbox').change(function () {
$(this).closest('tr').find('td a').toggleClass('ok', this.checked));
});
However, I would normally have had a variable for the $(this) element and my selector constants, so:
$this.is(checkedSelector)
becomes the following when minified:
t.is(c)
which is then actually shorter than:
this.checked
because this and the checked property cannot be minified :)

You do not need to find closest tr as somebody mentioned. You must do for each loop with jquery. When you do that, you are positioned at input tag (your "this" let me say it like that is referenced to input field when you loop). So you need first go out your input tag because you can't use next() because there is no other tags except parent tags after that input tag in that hierarchy position. That's why you need to use first parent() (to get outside where you are), so you could be positioned in td parent tag. Then you use next() to go to next td tag, and then you use find("a") to find your a tag and add to it class "ok".
$(document).ready(function(){
$("input[name=btSelectItem]").each(function () {
if (this.checked){
$(this).parent().next().find("a").addClass("ok");
}
});
});
You asked for the solution of this:
I'm trying to add a new class "ok" to an when it's checked.
You can find it here - with piece of code I described, class will be added on any a tag next to it's checkbox. You can inspect the source and see for yourself that class ok is added to checked checkbox.
http://jsfiddle.net/upquya6p/2/

dalekjs clicks on a link that contains text but it doesnt work

What I am trying to do is to get an element out of a list. I want to take the text in a link and click on the link if it contains the right text. this is the html-code:
<table>
<td>
<tr><a href='...'>I need help</a></tr>
<tr><a href='...'>Oh hello</a></tr>
<tr><a href='...'>Lorem ipsum</a></tr>
</td>
</table>
I tried this:
.click('table > td > tr > a:contains("I need help")')
But for some reason it doesn't work.
I can't use this:
.click('table > td > tr:nth-child(1) > a)
because there will be added more tr tags as the site gets bigger.
Any ideas ?

You did not create table properly, it should be:
<table>
<tr><td><a href='...'>I need help</a></td></tr>
<tr><td><a href='...'>Oh hello</a></td></tr>
<tr><td><a href='...'>Lorem ipsum</a></td></tr>
</table>
and this js code working properly
$(document).ready(function(){
$("table tr td a:contains('I need help')").click(function(){
});
});

First of all, your HTML code is a bit twisted; a <td> has to be a child of an <tr> element, not the way around. I suggest to read the MDN Docs regarding <table> elements.
Regarding your problem with Dalek; Dalek uses the CSS selector engine of the browser that it executes. This will change in the future (Replaced by Sizzle as a unified selector engine), but I have no estimation when this future exactly will be.
Regarding the :contains() pseudo selector - As far as I know, this is gone. The current CSS3 spec has removed it & therefor you can't use that in your Dalek selectors.

Jquery removes a div from a table row element

I want to insert some table cells at a specific location into a table, so I mark this location with a , e.g.
<tr>
<td>first</td>
<div class='insert-here'></div>
<td>last</td>
</tr>
However, jquery removes the div where it should be included, for example
$('<tr><div class="asd"></div></tr>') returns [<tr></tr>]
The simple solution is to tag the first cell and insert after this. Since I am using backbone views, the view will have the context of the entire row, instead of just its cells.
Has anyone come up with a nice solution to this?

<tr> elements may only contain <td> or <th> elements as children.

something like this?
$("tr td .insert-here").before("<div id='new_div'>helo</div>");
$("tr td .insert-here").remove();

slideToggle table row using Jquery

I have been trying for over a week now to slideToggle a table row when the 'more info' button is clicked but nothing seems to be working at all.
I'm new to Jquery so if anyone ca help me slideToggle the 'more-info-1', 'more-info-2', 'more-info-3' tr tags. the main problem is that those id's are created dynamically through php and I don't understand how to select them in Jquery - like using 'more-info-' or something.
I would like it to work like this example:
Here minus the iframes of course.
The user will click the 'more info' button and then the 'more-info-' tr will slide down.
Here is the page source: (I don't know how to insert HTML properly on Stack OverFlow, is there a special way of doing it - the code button does not work properly with HTML)
html
div id="output-listings"
div class="main-info"
table class="listings"
tbody
tr id="more-info-1" class="mi-1"
td
div id="more-1" class="more-information"/div
/td
/tr
tr id="main-info-1"
tdLeftlane News/td
tdwww.leftlanenews.com//td
tda id="link-1" class="more-info-link" href="#"More info/a/td
/tr
tr id="more-info-2" class="mi-2"
td
div id="more-2" class="more-information"/div
/td
/tr
tr id="main-info-2"
tdMotor Authority/td
tdwww.motorauthority.com/ /td
tda id="link-2" class="more-info-link" href="#"More info/a/td
/tr
tr id="more-info-3" class="mi-3"
td
div id="more-3" class="more-information"/div
/td
/tr
tr id="main-info-3"
tdAutoblog/td
tdhttp://www.autoblog.com//td
tda id="link-3" class="more-info-link" href="#"More info/a/td
/tr
/tbody
/table
/div
/div!--end output-listings--
/html
I would greatly appreciate the help.

Though craig's response works, you can limit your code and allow jquery to grab all of your TR elements within a certain scope, and parsing out the id as he suggested, etc.
$(".listings tbody tr").each(function(index) {
// hide by default
$(this).css({'display': 'none'});
// set the onclicks
$(this).click(function() {
// your dosomething can change your appearance
dosomething(the_id_you_parse_out);
});
});
Not sure if thats working code, I just threw it together so you could get the gist of how to use jquery's selector.

From a quick glance it looks like you want something like this.
$('#link-1').click(function(){
$('#more-info-1').slideToggle()
})
You can also generalize this script to work with all three by changing how the classes are set up, or by having the inner function parse the number of th link that is clicked and feed that into the inner jQuery call:
$('.more-info-link').click(function(){
var id = $(this).attr('id');
var num = id.substr(id.length-1,1);
$('#more-info-'+num).slideToggle();
})

To keep the trs from being visible add style='display:none' to them.

Depending on whether you need to assign a specific id to your elements for another purpose, you can actually do this without needing to give individual id's.
In this example, on load we first hide any tr that have the class toggleable. Then we tell jQuery to jump up the dom a couple of levels, and hide the next tr - this removes the need to call an id.
Example jQuery for this:
$(document).ready(function(){
$("#tableToggle tr.toggleable").hide();
$("#tableToggle .tableToggleButton").click(function(){
$(this).parent().parent().next('tr').slideToggle();
});
});
Example modified table:
<table id="tableToggle">
<tbody>
<tr>
<td><div class="tableToggleButton">More info 1</div></td>
</tr>
<tr class="toggleable">
<td>Main info 1</td>
</tr>
<tr>
<td><div class="tableToggleButton">More info 1</div></td>
</tr>
<tr class="toggleable">
<td>Main info 1</td>
</tr>
</tbody>
</table>

Since jquery code usually executes only when the DOM is ready, you'll always see the TR's even if only for a millisecond until your js code hides it if you don't use CSS initially to hide it.
So most of the contributors here probably answered your question. I'd just like to add that you could initially hide the TR's using CSS and then use JS to do the rest.
A good rule of thumb is to try and get your "default" pageview by only using CSS, and then add the rich functionality with the jquery code. Or at least that's what I'd do.