We Keep Coding

jQuery .append() not working as desired

Here is my code where I am composing a table:
$("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr>");
$("#results").append("<tr><td>John</td><td>1231231234</td></tr>");
$("#results").append("</table>");
When I apply border to this table using CSS, it doesnt get applied properly. Please refer to this fiddle: http://jsfiddle.net/23NQX/1/
What am I doing wrong here?

create variable table.. append <tr> to it... and append the final table to result
try this
var table=$('<table>');
table.append('<tr><th>Name</th><th>Phone Number</th></tr>');
table.append("<tr><td>John</td><td>1231231234</td></tr>");
$("#results").append(table);
more clear and readable.
append does accept additional arguments, so you can even do
table.append('<tr><th>Name</th><th>Phone Number</th></tr>',"<tr><td>John</td><td>1231231234</td></tr>");
but i prefer to go with first...
fiddle

Appending unclosed tags will auto close the tag if you don't close them yourself, so in your case it will create 2 tables. So put the string together in one append.
$("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr><tr><td>John</td><td>1231231234</td></tr></table>");
DEMO

You have to first create the table and then append rows to the table.
Like this:
$("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr></table>");
$("#results > table").append("<tr><td>John</td><td>1231231234</td></tr>");
Check out this fiddle

Create the table with your first append, then append to the table
$("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr></table>");
$("#results").children("table").append("<tr><td>John</td><td>1231231234</td></tr>");

I always find it helps to think of things the other way around:
// create the table
$("<table>")
// append the header
.append("<tr><th>Name</th><th>Phone Number</th></tr>")
// append a row to the table
.append("<tr><td>John</td><td>1231231234</td></tr>")
// append the table to the DOM
.appendTo($("#results"));
Here's a fiddle showing this works as you want, and is easier to read.

I offer you to use next structure:
$("#results").append($("<table>")
.append($("<tr>")
.append($("<th>").html("Name"))
.append($("<th>").html("Phone Number"))
)
.append($("<tr>")
.append($("<td>").html("John"))
.append($("<td>").html("123123123"))
)
)
It's easy to modify and read.
DEMO: http://jsfiddle.net/23NQX/7/

for a simple approach
$("#results").append("<table id='table'><tr><th>Name</th><th>Phone Number</th</tr></table>");
$("#table tr:last").after("<tr><td>John</td><td>1231231234</td></tr>");

$("#results").append("<table id='my_table' border='1'><tr><th>Name</th><th>Phone Number</th></tr></table>");
$("#my_table").append("<tr><td>John</td><td>1231231234</td></tr>");

highlight a row in grid using ext js 4.1

I'm trying to highlight a row and I've googled for a while however all solutions use functions that don't even exist such as getRow() or highlight().
Does anyone have a solution for it?
I've tried the above and the getView().select(record)
Neither has worked
Thanks

Would selecting the row suffice?
gridPanel.getSelectionModel().select([recordToSelect]);

You can use the rowClass to modify a row based on record conditions.
yourGrid.getView().getRowClass = function(record, rowIndex, rowParams, store){
return record.get('status').toLowerCase(); // class selection condition
}
See the JSFiddle example for this (very basic example, just show that the row class get ressetted after each change of the record.)

grid.getSelectionModel().select(0)

jquery find table cell with value

I have a table with id trends_table. I want the cell with the exact match of "Page Fans"
$j("#trends_table td:contains('Page Fans')")
This gives me all cells that contain, how do I do equals? I have fiddled with a bunch of syntax but nothing I can find works.
I see this, Jquery find table cell where value is X but dont see how I would do it for a given table, dont understand the context.
thanks
Joel

Try using a filter. See below,
$j('#trends_table td').filter(function () {
return $.trim($(this).text()) == 'Page Fans';
});

$('#trends_table td').filter(function() {
return $(this).text() == 'Page Fans';
}).css('background-color', 'red');
Here is an example of what you try to accomplish.
http://jsfiddle.net/bQdpp/1/ .In this example I just turn the cells red, take care if more then 1 cell is returned then all the cells are turned red.

Optimizing jquery selector for Chrome

I have the following jquery code to loop over 525 (I know, alot!) checkboxes:
var elements = $("#profile-list table tr input[type=checkbox].email-checkout:not(:checked)");
$.each(elements, function(i) {
$(elements[i]).attr('checked', 'checked');
});
UPDATE The html looks like this:
<table>
<tr>
<th>Name</th>
<th>Title</th>
<th>E-mail</th>
<th>Telephone</th>
<th id="email_check"><img src="check_black.png"/></th>
</tr>
<?php foreach ($this->profiles as $profile): ?>
<tr>
<?php echo $this->presentProfile($profile, 'list') ?>
</tr>
<?php endforeach; ?>
This basically loops over all profiles in the database and creates a table row for each profile, where the last table data includes a checkbox, which one can select to send email to. If the user clicks the table header with the id of "email_check" then the javascript code should kick in, and that's where Chrome fails.
I attach the event with the following code:
$("#email_check img").live('click', function() {
//my code
}
When I run this code in Firefox (mac), it goes smoothly but when I run it in Chrome (mac) it takes forever and ends up giving me the window where chrome offers me the option of killing the window, so basically it never completes this loop.
I've been trying to optimize this selector as much as I can, and since jquery 1.3, I understand that they switched from left to right to right to left selector, which basically means that I should try to make my right most selector as specific as I can. Can it be any more specific than I currently have?
Or is it the loop that just takes so long? I have tried switching from $.each to just a regular for() without a positive result.
Any tips or ideas how I can fix this?
Ingiber

I really don't think this is a selector issue at all.
Your selector is a valid selector for querySelectorAll, which means it will be extremely fast.
I tested the exact selector in Chrome on Mac against a table with 250 rows, and the result was instantaneous.
I'd guess that there's something else going on.

Try removing the table tr part of the selector. It isn't adding anything.

Try this:
// console.time("test");
var elements = $("#profile-list input[type=checkbox].email-checkout").get();
var len = elements.length;
for (var i = 0; i < len; i += 1) {
elements[i].checked = true;
}
// console.timeEnd("test");
(So, first we select all check-boxes that are of the class "email-checkout" and are inside the #profile-list element. Then we just set their checked property to true. I assume, this is as fast as it can be.)

You could always give each check box a select/deselect event that will add/remove a class from the checkbox, then use the class as the selector.

You can use a .each() on the set to use the elements directly, like this:
$("#profile-list table tr input[type=checkbox].email-checkout").each(function() {
this.checked = true;
});
Also note the removal of :not(:checked) above...if you're going to check them all, that selector is more expensive that actually checking them anyway. More importantly is that this.checked = true; is tremendously cheaper than $(elements[i]).attr('checked', 'checked'); which happens every time.

Did you profile this? What is taking too long, getting the elements or looping over them? The only way to really speed up code is to profile and fix the slow parts.
FWIW, I would try
var elements = $("#profile-list").find("input[type=checkbox].email-checkout").get();
...
and see what happens.

Add an onlclick on the checkbox
$("#profile-list input[type=checkbox].email-checkout").click(function() {
var obj = $(this);
obj.hasClass("checked") ? obj.removeClass("checked") : obj.addClass("checked");
});
s = $("input[type=checkbox].email-checkout.checked");

How to select a tag with a variable value in jQuery

I am very new to jquery/javscript.
I have a simple question.
Lets say i have a tag like this:
<Table id="mytable" >
<Table>
And i want to add some rows to this table.
Then we do like:
$("#mytable").append("<tr><td>value</td></tr>");
//some thing like this may not be having the right syntax
Now my question is lets the id of the table is in a variable for example:
var table="mytable"; //which is coming from the back end
Now my using the "table" variable how can I append the row..?
Is that going to be
$("#"+table).append("<tr><td>value</td></tr>");//
Can some one help me out in this simple thing?
Thanks,
Swati

that's correct!
var tableId = 'myTable';
$('#' + tableId).append('your row');
will append whatever you put in the 'your row' to the table with the id 'myTable'

That's exactly how you would do it. The selector is only expecting a string, so any form of concatenation or string logic via ternary operators will do the trick. This is a very powerful feature of jQuery selectors.

Yes, you can reference an ID like that by storing a variable in advance. This would append table rows/cells. You may need to dig deeper between the rows and cells depending on what you need to do though. :)
$(document).ready(function () {
var table = "myTable";
$("#" + table).append("<tr><td>row1</td><tr>");
});