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