jQuery .append() not working as desired - javascript

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>");

Related

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)

Modify table structure (merge cells) with jQuery

I have a table
<table>
<tr><td>9:00</td><td id='ts9'>task1</td></tr>
<tr><td>10:00</td><td id='ts10'></td></tr>
<tr><td>11:00</td><td id='ts11'>task2</td></tr>
<tr><td>12:00</td><td id='ts12'>task3</td></tr>
</table>
and I need to merge cells with id 10 and 11 in one because that task takes 2 hours. I am using jQuery.
I thought about:
$("#ts9").attr('colSpan', 2);
But it wont work.
If you must use jQuery, then this works:
$('#ts10')
.text($('#ts11').text())
.attr('rowspan','2')
.closest('tbody')
.find('#ts11')
.remove();​
JS Fiddle demo.
Or, somewhat more concisely:
$('#ts10')
.text($('#ts11').remove().text())
.attr('rowspan','2');​
JS Fiddle demo.
And a slightly more...useful approach, which will merge cells of adjacent rows with the class of two:
$('tr td.two').each(
function(){
var that = $(this),
next = that.parent().next().find('.two');
if (next.length){
that
.text(next.remove().text())
.attr('rowspan','2');
}
});
JS Fiddle demo.
This works for me. Merges cells with same text: Logic: for each cell, if next cell same text, remove next cell, increment colSpan. (Note "colSpan", not "colspan" - apparently a browser compat issue)
$('#tblData tbody tr:first-child td').each(function(){
var colSpan=1;
while( $(this).text() == $(this).next().text() ){
$(this).next().remove();
colSpan++;
}
$(this).attr('colSpan',colSpan);
});
You actually need to add rowspan to ds10 and then remove ts11 from the second row here. Change you code from colspan to rowspan, add the following
$("#ts11").remove();
and you should get result you need.
But i didn't personally try changing rowspan/colspan attributes via jquery, i'm just assuming it works well. Hope it helps.
p.s.: corrected numbers, thought u need to merge 9 and 10 first :)

JQuery addclass to another div (but not parent) if no data is found

I have this to add a class to the main table that the report is in if there is no data returned.
$('#report-area table td:contains("Sorry, your search did not return any data")').parents('#report-area').addClass('no-report-data')
However, I have another div area "#report-footer" but it's not inside #report-area. I'd like to also add the .no-report-data class to "#report-footer" as well but in this case I don't think the .parents selector will work. Is there another selector I can use to do this?
ID attributes are unique per-page so you can just say this:
$('#report-footer').addClass('no-report-data');
You could also skip the parents altogether and do them both at once:
if($('#report-area table td:contains("Sorry, your search did not return any data")').length)
$('#report-area, #report-footer').addClass('no-report-data');
Reference link http://visualjquery.com/
I think that this might work
var uglySelector = 'table td:contains("Sorry, your search did not return any data")';
$('#reportArea:has(#report-area ' + uglySelector +'), #report-footer ' + uglySelector).addClass('no-report-data');
I recommend you to avoid that long creepy selector ("table td:contains..."), when you write the message "Sorry..." message, just add a class to that td to distinct it later.
How about something like this? It's not real sexy, but should work....
var $noData = $('#report-area table td:contains("Sorry, your search did not return any data")').parents('#reportArea');
if ($noData.length)
{
$noData.addClass('no-report-data');
$("#report-footer").addClass('no-report-data');
}

Adding a dynamically created div to another div with jquery

I am creating two divs:
var div_day=document.createElement("div");
var div_dateValue=document.createElement("div");
I then want to add div_day to an existing calendar div and div_dateValue to div_day:
$('#calendar').append(div_day)
$(div_day).append(div_dateValue);
div_day gets added to calendar, but div_dateValue does not get added to div_day, and the script stops there. No errors in the console but it is in a loop and should have more div_days (each with a unique id). I am new to jquery so any help is appreciated.
In my search I have found how to add divs, but not to add a dynamically created div to another dynamically created div.
Thanks for your help!
Kevin
div_day.appendChild(div_dateValue)
$('#calendar').append(div_day)
Something else must be going on (even with your missing semi-colon). Your example works fine here:
http://jsfiddle.net/P4rh5/
But, instead of creating divs with straight javascript, you can do it with jQuery:
var div_day = $("<div>");
var div_dateValue = $("<div>");
$('#calendar').append(div_day);
$(div_day).append(div_dateValue);
Of course, you could do this in a single step:
$('#calendar').append("<div><div></div></div>");
$('<div><div></div></div>').appendTo("#calendar");
Try this and mark it as answer if it helps

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>");
});

Categories