I have a few table in a scrollbox. Upon loading the page I would like it to automatically scroll to the first empty table row using Javascript. Is this possible?
$("table tr").each(function() {
var cell = $.trim($(this).find('td').text());
if (cell.length == 0){
var el = cell;
el.scrollIntoView(true);
}
Once you have the empty row, you can scroll to it like this.
function scrollIntoView(el){
window.scrollTop( el.offset().top - ($(window).height()/2) );
}
Related
I am trying to generate a table dynamically using ajax call. To simplify things i have just added my code to js fiddle here -> http://jsfiddle.net/5yLrE/81/
As you click on the button "HI" first two columns are created properly.. but some how as the td length reaches 2 . its not creating another row. The reason is that when i do find on the table elements its actually retrieving the children table elements. Can some one pls help.
I want a two column table.. Thank you.
sample code:
var tr = $("#maintable tbody tr:first");
if(!tr.length || tr.find("td:first").length >= max) {
$("#maintable").append("<tr>");
}
if(count==0) {
$("#maintable tr:last").append("<td>hi"+content+"</td>");
}
Basically the matching of descendants was allowing for great great grandchildren etc. Just needed to make the matching more specific.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/5yLrE/91/
max = 2
$("button").click(function () {
var content = $('#template').html();
var $table = $("#maintable");
var tr = $table.find(">tbody>tr:last");
if (!tr.length || tr.find(">td").length >= max) {
// Append a blank row
tr = $("<tr>");
$table.append(tr);
}
tr.append("<td>hi " + content + "</td>");
});
This one always targets the last row and adds a row if it does not exists at all (or there are too many divs already) which is what I gather you intended.
I also used the templating I suggested to separate messy HTML strings from the code.
You will want to check the length of the table cells before incrementing a new table row. After you have reached your max column length, reset the row and start over.
JSFiddle
max_columns = 2;
count=0;
$("button").click(function() {
var content='column';
if(count==max_columns||!$('#maintable tr').length){
$("#maintable").append("<tr>");
count=0;
}
if(count!=max_columns)
$("#maintable tr:last").append("<td>"+content+"</td>");
else
$("#maintable tr:first").append("<td>"+content+"</td>");
count++;
});
I have a table in HTML with pagination. I need to convert the table to csv. The following code used to get all visible rows in the current page of the table.
$(el).find('tr').each(function() {
var tmpRow = [];
$(this).filter(':visible').find('td').each(function() {
if ($(this).css('display') != 'none')
tmpRow[tmpRow.length] = formatData($(this).html());
});
row2CSV(tmpRow);
});
So, how can I select all rows in the table no matter pagination or not rather than select current visible rows. Please help me ! Thank you!
Try this
$(el).find('tr').each(function() {
var tmpRow = [];
$(this).find('td').each(function() {
tmpRow[tmpRow.length] = formatData($(this).html());
});
row2CSV(tmpRow);
});
Removed :visible check and following condition
$(this).css('display') != 'none'
I have a table which is being generated from server side and it looks like this.
Now the requirement is to hide all the column of Category B, remove duplicate rows for Category A and show entries of corresponding entries of Category B in expand-collapse way. Each A1 Name Column cell will have a expand button and when it is clicked the entries of B columns of that row will be shown below that.
I'm able to hide B category and remove duplicate rows by
var hide_duplicate_row = function () {
var seen = {};
$('td:nth-child(2)').each(function () {
var txt = $(this).text();
if (seen[txt])
$(this).closest('tr').hide();
else
seen[txt] = true;
});
};
var show_only_head = function(){
$('td:nth-child(4),th:nth-child(4)').hide();
$('td:nth-child(3),th:nth-child(3)').hide();
}
hide_duplicate_row();
show_only_head();
Fiddle: http://jsfiddle.net/ME3kG/3/
but I'm stuck with the expand collapse part, how do I populate the B category's row data in this way? Any input on this will be appreciated, thanks.
Full table:
Desired table:
Here is the plan for this:
Goes through the table rows one by one:
$('table tr').each(function () {
On each row get the content you need:
var cell_3 = $("td:nth-child(3)", this).html(); // a3
var cell_4 = $("td:nth-child(4)", this).html(); // a4
While you are still processing the current row modify the A1 column like this:
$( "td:nth-child(1)", this ).append( '<div class="toggle">' + cell_3 + ' - ' + cell_4 + '</div>' );
Now you should have a newly generated DIV in each A1 column. You'll need to assign a toggle functionality on 'click' event and you should be done. The END.
It seems you are developing using jQuery and this is the reason to explain you the idea, not giving you the exact code. :-)
EDIT 1:
Here is the final code, according to the few specific requirements: http://jsfiddle.net/ME3kG/26/ and some formatting: http://jsfiddle.net/ME3kG/30/
Add a div in your td which is hidden onload and display it on click event
I'm trying to get the count of the number of rows on the current dataTables page. If I do this:
alert($('.tableViewer tbody tr').length)
It gives me the a non-accurate row count (I think it adds the current page and the last one?).
Anyway, I'm just trying to get the row count on the page I'm actually on. Does anyone know how to do this?
Here's my delete button:
function fnDelete(elem){
if (selected.length>0) {
var c;
c = confirm('Are you sure you want to delete the selected ${displayTableName}?');
if (c) {
// Create delete url from editor url...
var deleteURL = (urlstr.substring(0, urlstr.lastIndexOf('/') + 1)) + "delete.do";
alert($('.tableViewer tbody tr').length)
deleteRecord(deleteURL,selected[0]);
alert($('.tableViewer tbody tr').length)
if ( $('.tableViewer tbody tr').length === 1) {
setTimeout(function() { oTable.fnPageChange('last'); }, 100);
}
}
}
}
The tr elements may be on the page, but not visible. Try this!
$('.tableViewer tbody tr:visible').length
I've written a short method to append rows to a table. It is as follows:
/*--------------------------------------------------*/
/* Append a row to the documentation heading table. */
/*--------------------------------------------------*/
function append_heading(heading, style, default_content, node_enabled, leaf_enabled)
{
// Grab the table body.
var tbody = $("#headings_table_body");
// Generate our cells.
var headingCell = $('<td class="heading_column"></td>');
var styleCell = $('<td class="style_column"></td>');
var defaultCell = $('<td class="default_column"></td>');
var nodesCell = $('<td class="nodes_column ticked"></td>');
var leavesCell = $('<td class="leaves_column ticked"></td>');
// Fill in various cells.
headingCell.append(heading);
styleCell.append(style);
defaultCell.append(default_content);
// Tick some cells cross the others.
if(node_enabled)
{
nodesCell.addClass("ticked");
}
else
{
nodesCell.addClass("crossed");
}
if(leaf_enabled)
{
leavesCell.addClass("ticked");
}
else
{
leavesCell.addClass("crossed");
}
// Add all the cells to one big row.
var tr = $("<tr></tr>")
.append(headingCell)
.append(styleCell)
.append(defaultCell)
.append(nodesCell)
.append(leavesCell);
// Append the row to the table.
tbody.append(tr);
$(tr).hide();
$(tr).slideDown("slow");
}
It appends the rows as expected, all nicely filled out and styled. The problem is, slideDown doesn't animate: It's current behaviour is analogous to me calling hide() and show(), it simply appears. How can I get this to animate correctly? Any help is appreciated, thanks.
jQuery is NOT able to animate tables directly. All that you need is to wrap the content of each td cell in the row into div with display:none and make slideDown animation for them! To make you life easier :)))
tr.find('td').wrapInner('<div style="display: none;" />');
tr.appendTo(tbody);
tr.find('td > div')
.slideDown('slow', function(){
var $set = $(this);
$set.replaceWith($set.contents());
});
If you want to animate the whole table, it should be placed into div with animation applied to that div.
I assume it's because it does not know the height of the appended TR, try explicitly defining the height of the TR in your CSS or amend the code to do
$(tr).height($(tr).height());
$(tr).hide();
$(tr).slideDown("slow");