We Keep Coding

jQuery: Detach table rows then append back to same position

I am trying to remove/append table rows using jQuery's detach() method. I'd rather use this method than jQuery's hide/show to keep certain css styles. The detach function is tied to a checkbox that will hide any rows that contain "No".
The problem I am having is my table has sortable headers, and if I sort any column before I use this function, the table rows do not get put back into the right position.
$(document).ready(function () {
var tablerows;
$('#indexTable tr').each(function(i) {
$(this).data('initial-index', i);
});
$('#customSwitch1').change(function () {
if (tablerows) {
$(tablerows).appendTo('#indexTable').each(function(){
var oldIndex = $(this).data('initial-index');
$('#indexTable tr').eq(oldIndex).before(this);
});
tablerows = null;
} else {
tablerows = $('#indexTable tr:contains(No)').detach();
}
});
});
How can I put the rows back into the position before detachment, or even back to the position when the table is first loaded?

Jquery add data to html before adding to DOM

I am building html on the fly need to add data before I add it to DOM. Since I am looping thru' lot of information, I would like to add the relevant data info along with the dom I am building instead of adding the html and then looping thru again to add the data.
result.forEach(function(record) {
html += '<div id ="' record.ID + '">test content </div> ';
//add data to above
});
I can do another loop here after adding it to DOM
$(body).append(html);
testresult.forEach(function(record) {
$("#" +record.ID).data(record);
});

Instead of concatenating strings to piece together your HTML, you may way to try something like this:
result.forEach(function(record) {
$('.selector').append(function () {
var $div = $('<div></div>');
$div.attr('id', record.testID).text('some text');
return $div;
});
});
This creates a new div jquery object for each item in result. You can use the record object to add attributes, data, text, etc to you object. It will be added the DOM when the callback passed into .append returns your new jquery DOM object.

Start trying to use jQuery to create your html elements so you can take fully advantage of jQuery and its plugins.
Ex:
var div = $("<div></div>") // create the element
.text("test content") // change the inner text
.attr("id", record.testID); // set the element id
div.appendTo("body");
You can check out [http://www.w3schools.com/jquery/] as a great source for learning jQuery.

You have quotes problem in the following line :
html += '<div id =record.testID' + '>test content </div> ';
________^______________________^___^_____________________^
You should fix that using double quotes because as it's now the string will be considered as '<div id =record.testID'.
html += '<div id="'+record.testID+'">test content </div>';
Or you could use separated definition :
$.each(result, function(index,record) {
var div = $('<div>test content</div>');
div.attr('id', record.testID);
div.data('test', record.testDATA);
$('body').append(div);
})
Hope this helps.
var result = [{testID: 1,testDATA: 'data 1'},{testID: 2,testDATA: 'data 2'},{testID: 3,testDATA: 'data 3'}]
var html='';
$.each(result, function(index,record) {
var div = $('<div>test content</div>');
div.attr('id', record.testID);
div.data('test', record.testDATA);
console.log(div.data('test'));
$('body').append(div);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to add table columns and rows dynamically with the correct number of cells?

I'm looking to dynamically add rows and columns to a table, and I've gotten pretty far researching how to do this with jQuery. I've successfully, been able to add columns that have the correct number of rows and remove an ENTIRE row. What I have not been able to do is add a row with the CORRECT number of columns and remove an ENTIRE column (all rows gone!).
Here is the script I have so far:
jQuery(window).load( function($) {
// Add column function
jQuery('#ldrm-add-col').click(function() {
jQuery('.ldrm thead tr').append('<th class="rb-top">Test</th>');
jQuery('.ldrm tr:gt(0)').append('<td>Col</td>');
console.log('autocomplete');
});
// Add row function
jQuery('#ldrm-add-row').click(function() {
jQuery('.ldrm tbody').append('<tr><td class="remove-row"><span class="btn">Remove</span></td><td class="rb-left">Test</td><td>Test</td></tr>');
console.log('autocomplete');
});
// Remove row function
jQuery(document).on('click','td.remove-row .btn', function() {
jQuery(this).closest('tr').remove();
});
});
So, if I start with three columns and click add row, it works fine right now because it adds 3 rows. However, if I click add column and it appends a 4th column and then I click add row, there is a cell missing because the script doesn't know that another column was added.
http://jsfiddle.net/2kws0aLx/
Any suggestions on how I can improve the add row script to take into account any dynamically added columns?

For your add row function you will need to account for how many columns that are currently in the table. I did a quick and dirty IIFE to show what I mean.
http://jsfiddle.net/2kws0aLx/1/
// Add row function
jQuery('#ldrm-add-row').click(function() {
// -2 to account for the two empty th's at top left
var numOfCol = $('thead th').length - 2;
jQuery('.ldrm tbody').append('<tr><td class="remove-row"><span class="btn">Remove</span></td><td class="rb-left">Test</td>' + (function() { var str = ''; for(var i=0; i < numOfCol; i++) { str += '<td>Test</td>'; } return str; })());
console.log('autocomplete');
});

Remove rows from a table which I collected from a loop (JQuery)

I have a table that I loop with JQuery in order to find rows that match certain conditions:
$('#sometable').find('tr').each(function () {
var row = $(this); //<----
if(row.find('input[type="checkbox"]').is(':checked')) {
//etc
}
}
My question is, is there a way to remove each matched row? I mean is there a way to collect these row variables inside my if(row.find('input[type="checkbox"]').is(':checked')) so that I can remove the specific rows from my table directly?
Note that my rows don't have a unique id

You may want:
$('#proposedtable tr:contains(input:checkbox:checked)').remove();
or
$('#proposedtable input:checkbox:checked').closest('tr').remove();

Try this:
var filteredRows = $('#sometable').find('tr').filter(function(){
return $(this).find('input[type="checkbox"]').is(':checked'));
});
$(filteredRows).remove();
The above function will gather all the rows(tr) and then filter those rows based on the checked state of checkbox. Later the filtered rows will be removed.
To make it as array, use Array.prototype.slice.call()
var arrFilteredRows = Array.prototype.slice.call(filteredRows);

Is this help you ?
http://jsfiddle.net/LGdA3/
<pre><code>
$('input#myButton').on('click', function(){
$('table#someTable td input[type="checkbox"]:checked').each(function(){
$(this).parents('tr').first().remove();
});
});
</code></pre>

Deleting rows in table Javascript

I'm printing table using function:
function findL(val){
var i;
//alert(splitted + " " + JSDate);
for(i=0;i<jsData.length; i++)
{
if(jsData[i].get_date() == val)
{
$('<tr>').append($('<td>').html(jsData[i].get_startT))
.append($('<td>').html(jsData[i].get_endT))
.append($('<td>').html(jsData[i].get_prow))
.append($('<td>').html(jsData[i].get_przedm))
.append($('<td>').html(jsData[i].get_sala))
.appendTo('#pzTbody');
}
}}
As an argument function takes date from datepicker, and when I pick another date it adds to the previously viewed rows.
My problem is that I tried plenty ways to cleaning/deleting old rows before next search.
I tried deleteRow(), .parentNode in loop etc. Anyone know how to delete appended rows?

From the code I assuem pzTbody is the id of your table. To clean the table body and remove all rows do this:
$("#pzTbody").empty();
If you just want to remove the last row, use this:
$("#pzTbody tr:last-child").remove();