We Keep Coding

Remove empty cells and their label cells from a table

I've got a two-row table (label row and data row) that gets filled in with all relevant information about a running service, however, about half of the cells are empty at any given time depending on which test is run.
I'm looking for a jquery statement that will find all empty cells and hide them along with the label for that cell. I've searched quite a bit and found this code that is meant to hide the empty cells
$('table#yourTable tr').each(function(){
if($(this).children('td:empty').length === $(this).children('td').length){
$(this).hide();
}
});
However, my "empty" cells are populated with "&nbsp" and not truly empty. Is there a way to hide a cell and its associated label cell?

You can use .filter()
$(document).ready(function() {
var elems = $("tr").filter(function() {
return this.querySelector("td").innerHTML === " "
});
elems.hide();
})

following code will hide all of your not truly empty cell and it's label cell.
$(function () {
var $label = $('tr:first');
$('tr:last td').each(function (index, td) {
var $td = $(td);
if ($td.html() != ' ') return;
$td.hide();
$label.find('td:eq(' + index + ')').hide();
});
});

Get Row column text using jquery

I trying to get the text of input fields of each row and its columns on a save click button. Rows can be more than one. I want all the texts of all the rows and their respective columns.I don't know how to put it in a loop to get all the inputs values of more than one row. Below is what i tried to get only the one row input value and I am getting undefined :
$('#btnSave').click(function() {
$("#tab_logic").find('tr').each(function() {
if ($(this).find('input[type="text"]')) {
var data1 = $(this).find('td:eq(0):input[type="text"]').val();
alert(data1);
}
});
});
Any help would be very much appreciated. Thanks in Advance.

Loop through each td and then check if it has any text field using the length peroperty,
$("#tab_logic tr td").each(function() {
if ($(this).find('input[type="text"]').length > 0)) {
var data1 = $(this).find('input[type="text"]').val();
alert(data1);
}
});
To Get the values into an array, use
var arr = $("#tab_logic tr td input[type='text']").map(function() {
return $(this).val();
}).get();

Exclude particular row from each loop based on Class Name

How to exclude a particular row based on its class-name using Jquery.
filterBySensor= function (event) {
j("#example tr").hide(); //hide all rows
j("#example tr:first").show();
var snsrname = j("#ulsensor option:selected").text(); //retrieve wanted status
if(snsrname == "All")
j("#example tr").show(); //show all rows if want to see All
else {
j("#example tr").each(function() { //loop over each row
var celldata = j.trim(j(this).find("td:eq(4)").text());
if(celldata == snsrname) { //check value of TD
j(this).show(); //show the row
}
});
}
}
The above code works perfectly and checks every row in the table.
But I want to exclude some rows based on its classname.
For example: There are 3 rows with classname GROUP and I need to exclude them from loop. Any help will be appreciated. Thanx in advance

Try using .not() method of jQuery :-
j("#example tr").not(".group").each(function() { //loop over each row except for rows having group class name.
var celldata = j.trim(j(this).find("td:eq(4)").text());
if(celldata == snsrname) { //check value of TD
j(this).show(); //show the row
}
});
OR(You can use not the way shown below)
j("#example tr:not(.group)").each(function() { //loop over each row except for rows having group class name.
var celldata = j.trim(j(this).find("td:eq(4)").text());
if(celldata == snsrname) { //check value of TD
j(this).show(); //show the row
}
});

creating a 2 column table dynamically using jquery

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++;
});

Use Javascript to scroll in HTML tables?

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) );
}