Develop Reference

A bootstrap table not as expected

I am using Bootstrap to draw a simple two-columns table exactly as the one in the Bootstrap page: http://getbootstrap.com/css/#tables.
For that I am using a javascript to render it as you can see here:
$(\"#rep\").empty()
$(\"#rep\").append("<br><br><table class=\\"table table-bordered table-striped\\"><tr><th><strong>Title</strong></th><th><strong>Description</strong></th></tr>")
//for (var i = 0; i < ratings.length; i++) {
for (var key in ratings){
var table = "";
table = "<tr> <th scope=\\"row\\"><code>"
table += key
table += "</code></th> <td>"
table += ratings[key]
table += "</td></tr>"
$(\"#rep\").append(table);
}
$(\"#rep\").append("</table>")
}, "json")
The problem is that I don't get the same, and I obtaine a table with the two columns' titles not aligned with the other rows. Like you can see here:
Does anyone know what could be the problem ?
Thank you in advance !

There are several issues with your code :
1) You are not using <colgroup> as the bootstrap example. Thats why the table not is aligned properly.
2) You are not using <thead> or <tbody> at all, thats another reason why the table not is aligned properly, and the reason why your .table-striped table not is striped. The CSS for striping the rows is
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #F9F9F9;
}
Having said this, why are you regenerating the entire table from scratch? I would empty <tbody> only :
$("#rep table tbody").empty();
and then just append new rows, like this :
var tr =
'<tr>'+
'<th scope="row">'+
'<code>'+key+'</code>'+
'</th>'+
'<td>'+ratings[key]+'</td>'+
'</tr>';
$("#rep table tbody").append(tr);
here is a demonstration -> http://jsfiddle.net/j11mj21x/

jQuery how to remove dynamically appended rows?

If I append rows to my table like this:
$('#tbody_upload').append('<tr id="' + data.originalFiles[counter].name + '"><td>' + 'Uploading...' + '</td><td></td><td></td><td></td></tr>');
how can I remove it from another event?
$('#' + this.name).remove();
that function doesn't work, also appended items don't appear in source of the page.

If you want remove the element that triggers the event to be removed (as appears from this.name) you can simply do
$(this).remove();

Maybe you should name your table and then with a selector select the body and first errase it and then append data so every time you get new data, the table deletes the old data and puts the new one.
<table id="yourtableName" border="1" class="hoverTable">
<thead>
</thead>
<tbody>
</tbody>
</table>
var gridBody = your tr code;
$('#yourtableName tbody').empty().append(gridBody);

JQuery Append Data at end of table

<table id="myTable0" name="myTable0">
<tbody>
<tr>
</tr>
</tbody>
</table>
<table id="myTable1" name="myTable1">
<tbody>
<tr>
</tr>
</tbody>
</table>
I need some JQuery that will attempt to append new html to the end of a table and do it on the enter key, it will also select the correct table to append it to as there are numerous tables.
Here is my code that doesn't work but attempts to do this:
for (i=0; i<2; i++)
{
$("#newComment" + i).keyup(function(event){
if(event.keyCode == 13){
var $test= $('<tr><td>content here</td></tr>');
$('#myTable '+ i + ' > tbody:last').append($test);
}
}
The line that is throwing me problems is the Jquery select which follows:
$('#myTable '+ i + ' > tbody:last').append($newdiv1);

Try this:
$('#myTable' + i + ' > tbody:last').append($newdiv1);
The space $('#myTable ' is the problem..
You are having space between #myTable and 0..
You need #myTable0 while you were having #myTable 0

Yup this is very simple
just do like this
$('#myTable'+ i).find('tr:last').append($test);
And thats done.

Is there a typo? I think you mean $test instead if $newdiv1 in a problematic line.
I can see you have only one <tbody> tag so the ':last' selector is not necessary. I think that
$('#myTable' + i + ' tbody').append($test);
will be fine.
Edit: Yup, as Rajat Singhal said remove sapce in selector after #myTable.

jquery table select and data retrieval

I am using a html table that contains available times for scheduling. I want the user to be able to click on a time and from that be able to get the column header, which is the staff persons name, and the value of the cell - the time. I than want to change the contents of the cell to 'NA' and set the cell background to some color. I have been playing with this for awhile with no luck. I am new to javascripts and jquery. Any help would be greatly appreciated.

This should be a doable jquery task as long as you have the appropriate selectors. So you need a way to associate each time cell with a header cell. To do this i would add a user id to the cells in the header and the body:
<th class="header" id="1">Bob</th>
<td class="selectable" id="10" name="1">10:00 AM</td>
Then for the jquery:
$("table#timetable tbody tr td").click(function(){
var user_id = $(this).attr('name');
var user_name = $("table#timetable thead tr th#" + user_id).html();
var time = $(this).attr('id');
$(this).html('N/A');
$(this).css('background':'#990000');
alert(user_id + ' ' + user_name + ' ' + time);
});

JQuery's appendTo is very slow!

I have a html table that I reorder based on a CSV list of custom attribute values that I have for each table row. I am using the following function to do it:
for (var i = 0; i < arrCSV.length; i++)
{
$('#' + tableId)
.find('[fname = ' + arrCSV[i] + ']')
.eq(0)
.parents('tr')
.eq(0)
.appendTo('#' + tableId);
}
The table structure is:
<table>
<tr>
<td fname='f1'>something here</td>
</tr>
<tr>
<td fname='f2'>something here</td>
</tr>
</table>
The CSV could be something like this "f2, f1"
I find this is very very slow performing function. Any help in optimizing it is really appreciated.
EDIT:
Based on the article at http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly, one can achieve the greatest boost in performance by calling append only once with the html concatenated string. Can someone help in using this technique to my problem? I am not sure how to go about getting the s HTML in the for loop and appending it once.

I would suggest finding the elements as few times as possible. Store all the matching rows into a "hash" using the attribute value of interest as the key. Go through your CSV, pick the corresponding row out of the hash, push it into an array, then finally append the elements of the array to the table using the jQuery object previously found.
var table = $('#' + tableId);
var rowHash = {};
table.find('[fname]').each( function() {
rowHash[$(this).attr('fname')] = $(this).closest('tr');
});
var rows = [];
for (var i = 0; i < arrCSV.length; ++i)
{
var row = rowHash[arrCSV[i]];
if (row) {
rows.push(row);
}
}
$(rows).appendTo(table);
EDIT: This seems like a slight improvement to my previous code where I was appending each row to the table as it was found. I tested on a table with 1000 rows and it seems to take about 1sec to sort a table that needs to be completely inverted.

If you want to append html only once (like that learningjquery.com article), try following:
$(document).ready(
function()
{
var arrCSV = ['f2', 'f1'];
var tableId = 'mainTable';
var newTable = [];
for (var i = 0; i < arrCSV.length; i++)
{
var row = $('#' + tableId)
.find('[fname = ' + arrCSV[i] + ']')
.eq(0)
.parents('tr')
.eq(0);
newTable.push(row.html());
}
$('#' + tableId).html(newTable.join(''));
};
});
Live version: http://jsbin.com/uwipo
Code: http://jsbin.com/uwipo/edit
Though I personally feel that you should profile your code first and see if it's append which is slow OR that 'find' method call. I am thinking that for a huge table, using 'find method' to find a custom attribute could be slow. But again, there is no point in any guesswork, profile the code and find it out.
If the 'find' method is slow, will it be possible to use id attribute on td instead of giving custom attribute.
e.g.
<table>
<tr>
<td id='f1'>something here</td>
</tr>
<tr>
<td id='f2'>something here</td>
</tr>
</table>
Then your code to find the parent row could be as simple as:
('#' + arrCsv[i]).parent('tr')
EDIT: As pointed out by tvanfosson, this code assumes that arrCSV contains attribute for all the rows. The final table will only contain those rows which are present in arrCSV. Also, this code does not copy 'thead', 'tfoot' section from the original table, though it should be easy to write code which does.

You may have to rethink your algorithm.
Without changing the algorithm, a slight optimization would be:
var $table = $("#" + tableId);
for (var i = 0; i < arrCSV.length; i++)
{
$('[fname = ' + arrCSV[i] + ']:first',$table).closest('tr').appendTo($table);
}

Wait a second...
$('#' + tableId)
Get #myTable
.find('[fname = ' + arrCSV[i] + ']')
Find anything with an attribute of fname equal to i
.eq(0)
Give me the first item of the previous expression
.parents('tr')
Find the parents of type TR
.eq(0)
Give me the first in the previous expression
.appendTo('#' + tableId);
Add that TR to #myTable
Okay. Now that I've broken it down - are you duplicating a Table Row only? If so, the .append() isn't your problem, your choices of selectors is. To further compound my confusion here, the only tags with an attribute of fname are your TR's, so why are you going to their parents() and seeking out the first TR? You're basically asking for TR tags to be placed within TR tags - but that isn't what your Markup example shows.