Develop Reference

Datatable Methods not working after adding Row with append

Ive got a problem to solve. With .append() I do add new rows which have input fields. But the problem is, that after appending new rows no methods work on them. No methods like search, responsive button etc.
I tried a lot but I couldnt figure it out...After clicking on a button a new Row gets added to the #table.
var poAddRowTable = $('#table').DataTable();
$('button').on('click', function () {
addRowFunc(true)
});
addRowFunc = function () {
var previousRow = $('#table tr:last');
var newRow = $(previousRow).clone(true, true);
$('#table tbody').append(newRow);
$("html, body").scrollTop($(document).height());
}

You should consider to use DataTable.row.add() for adding a new row to the data table.
Your addRowFunc should be updated like this
addRowFunc = function () {
// Clone data from last row
var lastRow = $('#table tr:last');
var newRowdata = [];
$('#table tr:last').find('td').each(function() {
newRowdata.push($(this).text());
});
// Add new row to table
poAddRowTable.row.add(newRowdata).draw();
$("html, body").scrollTop($(document).height());
}

I guess you have to refresh your table after appending, the following link can help :
How to refresh a simple Datatables table when adding new rows with jQuery

Jquery Mobile Table Reflow

I'm trying to create my own script for a mobile version of my tables on my website.
Im currently using the script below to get the size of the table, and create new tables for each row, duplicating the headers into each new table.... (see: http://api.jquerymobile.com/table-reflow/ ) to get an idea of what I'm trying to achieve.
My script is as follows, but their is a js fiddle included at the bottom for a better example.
My problem is that I am only able to create 1 inside each table, where it should really be 3 rows, inside of each table. Again check the fiddle below for a proper example. Can anyone see why it is only creating 1 row in the table?
<script>
$(document).ready(function(){
var TableSize = $("table thead tr th").not("table.mobile_table thead tr th").size(); // Get # of columns
var i = 1;
var TableRowCount = $("table tbody tr").size(); // Get # of body rows
$("table thead tr th").each(function(){
$(this).attr("id", i++); // Give headers incrementing ID
});
for ( var CreateTables = 1; CreateTables < TableRowCount; CreateTables++ ){ // Create new table class="mobile_table" for each row
$("table").after("<table class='mobile_table'></table>");
}
$("table.mobile_table").each(function(){// Insert original headers into each row of new table as first column
var h = 1;
while ( ++h < TableSize){ // this is where the error is, it gives me the stuff below but x3 (the number of created tables)......
$("table.mobile_table").after("<tr><td></td><td></td><td></td></tr>");
}
});
console.log(TableSize);
console.log(TableRowCount);
});
</script>
See the fiddle: http://jsfiddle.net/Yf7KV/

Do you mean like this: http://jsfiddle.net/Yf7KV/2/
JS
$(this).append("<tr><td class='mobile_col_1'>Col 1</td><td class='mobile_col_2'>Col 2</td></tr>");
Explanation: Append will alllow you to append elements one after the another. html replaces with what you currently have

Select the row TH of related TD

http://jsfiddle.net/wT3Ev/
How do i retrieve the text that is in the row TH of the selected td?
Yes i found some related posts, but nothing that does the trick for me.
I tried:
$(document).on("click", "#sTab td,#pvTab td", function () {
alert($('#sTab tr').find('th:nth-child(' + $(this).parent().index() + ')').innerHTML);
alert($(this).parent());
var th = $(this).closest('table').find('th').eq( this.cellIndex );
alert(th.innerHTML);
}

I'd suggest:
/* binds a click-handler to the 'tbody' element,
filters those clicks to only those that originate on a 'td' element:
*/
$('tbody').on('click', 'td', function(){
/* gets the siblings of the clicked 'td' element, filters those siblings
for 'th' elements, gets the first of those matching elements,
and then retrieves the text of that element, assigning it to the variable:
*/
var thText = $(this).siblings('th').first().text();
console.log(thText);
});
JS Fiddle demo.
Or, using a little more DOM (a tiny, tiny efficiency increase):
// same as above:
$('tbody').on('click', 'td', function(){
/* using DOM (not jQuery), moving from the clicked 'td' element
to its parentNode ('tr'), retrieving the first of its children
(JavaScript is zero-indexed, the first child is at position '0'),
and retrieving its textContent (the text of the 'th'):
*/
var thText = this.parentNode.children[0].textContent;
console.log(thText);
});
JS Fiddle demo.
References:
first().
on().
siblings().
text().

This should work:
var index = $(this).index();
console.log($(this).parents("table").find("th:eq(" + index + ")").text());
Edit: row header: console.log($(this).closest("tr").find("th").text());
Fiddle: http://jsfiddle.net/wT3Ev/4/

You weren't too far off. This works with your example:
$(document).on("click", "#sTab td,#pvTab td", function () {
var tdIndex = $(this).index(),
table = $(this).closest('table'),
headingIndex = tdIndex + 1,
thText = table.find('th:nth-child(' + headingIndex + ')').text();
alert(thText);
});

$(this).parent().find('th').html();
edit: explanation - row is always cell's parent so no need to look for index - just look for header in the row where you have the cell.
http://jsfiddle.net/qA6R9/

Using JQuery to switch selected row of table

I have a table. When a row is clicked on, it is given .active and the row is highlighted. I need to work on other ways to change the selected row other than clicking on it. For my example, I've chosen a next button.
http://jsfiddle.net/dHxKW/
I can do the logic behind what happens when it gets to the end of the table or anything else like that.
I just need help figuring out how to get the index of the TR with class active so that I can increase the index, which then I can give the next row the active class... That's all I need to do... how to get that row index.
This is some of the stuff I've tried that doesn't work...
alert( $('table tr .active').index() );
var row = $('table tr.active').first();
alert(row.index() );
alert($("table").index( $('table tr .active') ));
This is what I'm using as a reference (https://stackoverflow.com/a/469910/623952)
var index = $("table tr").index($(this));
but I can't get the selectors right...
Solution.....
it would have never worked... I wrote bad code:
$(this).children("tr").addClass("active"); (this = clicked on tr in the click function)
But new code:
http://jsfiddle.net/dHxKW
$("#table_one").on("click", "tr", function () {
$(".active").removeClass("active");
$(this).children("td").addClass("active");
// removed line: $(this).children("tr").addClass("active");
$(this).addClass("active");
});
$('#btn_next').on('click', function ()
{
// right here **********
var n = $('tr.active').next();
$(".active").removeClass("active");
n.children("td").addClass("active");
n.addClass("active");
});
** Just as a note, I am adding the class to both the tr and td's... I'm not sure if this is the best way but tr doesn't have background properties, so I just added it to both. I think this might be the reason for my confusion....

The issue is that the "active" class is not being added to the "tr" elements.
In this line you are looking for tr children of this, but this is a tr, thus no children get selected: $(this).children("tr").addClass("active");
Instead try $(this).addClass("active");

var counter = 0;
var index = -1
$('table tr').each(function(){
if( ! $(this).hasClass('active')) {
counter++;
}
else index = counter;
})

$('td.active').parent().index('tr')
will get you the index.
jsFiddle example
jsFiddle example 2
BTW, the link in your click function $(this).children("tr").addClass("active"); would seem to do nothing as it searches for a child row of a row.

$('table tr .active').removeClass('active').parent().next().children('td').addClass('active');
this should do it

Add new item to bottom of scrollabe div

I'm trying to append a div to the bottom of a another div, by clicking a button in javascript, but once the height of the outer container is reached, it no longer scrolls the list to the bottom, after an insert.
Please see the fiddle here
If you click the red add button until you get to about 13 items in the list, it seems something goes wrong with the scrollTop function, and it it no longer functions correctly (hovers around the same spot in).
I'm pretty lost on this, and have tried a bunch of different combinations of css settings for both the container and side div. Please help me.

I've reformatted your code to be more jQuery-esque. The main change, however, was to change the list.scrollTop() function so that it just scrolls to the bottom of list:
$(document).ready(function() {
var list = $("#q-d-list");
$(document).on('click', '#add', function() {
$('.active', list).removeClass("active");
var count = list.children().length + 1;
var active = $('<div />', {
'data-qid': count,
'class': 'mli active'
}).text('q' + count).appendTo(list);
list.scrollTop(list[0].scrollHeight);
});
});​
Demo: http://jsfiddle.net/MrvcB/19/

Use
list.scrollTop(list.get(0).scrollHeight);
rather than
list.scrollTop($(".active").offset().top);

Try:
$(document).ready(function () {
var count = 2;
$("#add").live("click", function () {
var list= $("#q-d-list");
// remove the active class from the old item
var $clone = $(list.find("div:last-child").removeClass("active").clone());
count+=1;
var str_count = "q"+count.toString();
$clone.addClass("active").attr("data-qid",str_count).text(str_count);
list.append($clone);
list.scrollTop(list.get(0).scrollHeight);
});
});
http://jsfiddle.net/H4Kb3/