We Keep Coding

Delete table rows if table data does not contain a specific class

I got a question regarding removing table rows within a table. I got the following HTML:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td>disabled</td>
<td>disabled</td>
<td>Specifies that a drop-down list should be disabled</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
I need a mechanism that looks whether the first <td> does not contain the html5badge class and delete the parent: <tr>.
To do this I created the following jQuery code:
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
var classname = $('table tr td').not('.html5badge');
console.log(classname)
for (i = 0; i < classname.length; i++) {
$(classname[i].parentNode).remove();
}
});
});
This works but it does not exactly what I want. As you can see in my JSFIDDLE it will delete all the table rows. But what I want is the following desired output:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
The desired output is that the <tr> that contained the text: disabled is been removed! Based on the fact that the <td> within this <tr> does not contained the class: html5badge.
How can I achieve this?

You can use filter() to retrieve the tr elements which do not contain td.html5badge and remove them:
$(".onlyhtml5").click(function(e) {
e.preventDefault();
$('tr').filter(function() {
return $(this).find('td.html5badge').length == 0;
}).remove();
});
Updated fiddle

simply make it
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
$('table tr td').not('.html5badge').each( funtion(){
$( this ).parent().remove();
} );
});
});

Footables column sorting is duplicating rows in table, Why?

I am adding footables to a table but the table has to have a tbody for each row. This is because I am adding footable sorting and filtering to an existing system that generates the html this way.
It seems to be causing the column sorting at the to be duplicating the table rows each time you try to sort the table by column heading and I cant see why.
The table structure is kinda like this:
<table data-filter="#filter" class="footable table demo">
<thead>
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Status</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Job Title1</td>
<td>Active</td>
<td>Description1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Name2</td>
<td>Job Title2</td>
<td>Disabled</td>
<td>Description2</td>
</tr>
</tbody>
</table>
javascript:
$(function () {
$("table").footable().bind("footable_filtering", function (e) {
var selected = $(".filter-status").find(":selected").text();
if (selected && selected.length > 0) {
e.filter += (e.filter && e.filter.length > 0) ? " " + selected : selected;
e.clear = !e.filter;
}
});
$(".clear-filter").click(function (e) {
e.preventDefault();
$(".filter-status").val("");
$("table.demo").trigger("footable_clear_filter");
});
$(".filter-status").change(function (e) {
e.preventDefault();
$("table.demo").trigger("footable_filter", {
filter: $("#filter").val()
});
});
});
I have also set up a working jsfiddle that demonstrates the issue:https://jsfiddle.net/35ht6kup/9/
Anybody have any idea how to resolve this?

You could rebuild the table with jQuery, example (to be refined with a better selector than 'table'):
$(document).ready(function(){
var thead = $('table thead');
var tbodyhtml;
$('table tbody').each(function(){
tbodyhtml += $(this).html();
});
$('table').html(thead);
$('table').append('<tbody>'+tbodyhtml+'</tbody>');
});

Jquery select tbody but not from nested tables

I am trying to append data to a table, that gets selected using jquery. The problem is, this table may have nested tables within it. What happens is that when I append the data, not just the parent table's tbody gets appended but so too does all the children tables tbody. Here is my code:
var template = window.app.getTemplate('myTemplate');
var image = {id: imageId, name: imageName, imageList: imageTypes, extension: ext, thumbNail: thumbNailPath};
$("#MyTable tbody:first").append(template(image));
Where myTemplate is set up like this:
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
<tr>
</tr>
<td></td>
</tr>
and MyTable is set up like this:
<table id="MyTable" data-attr="images">
<thead>
</thead>
<tbody>
</tbody>
</table>
Like I said, when the append happens, if there is more than one table within tbody, all tbody's get appended to. So, how do I select only the first?
thanks

JQuery uses the CSS selectors to reach the element.
$("#MyTable > tbody:first")
E > F Matches any F element that is a child of an element E.
See more at http://www.w3.org/TR/CSS2/selector.html#child-selectors

Maybe if you update your jquery selector
$("#MyTable > tbody:first")

Try:
$("#MyTable > tbody").append(template(image));

Add table row with jQuery before button

I have this table, and I want to add Rows up the button, in the same rowId. For example, on clicking the Add Row 1 button, i want to add a row in row1, under "Some content 1", and so on.
<table id="table1">
<thead>
<th>Heading 1</th>
<th>Heading 2</th>
</thead>
<tbody>
<tr id="row1">
<td>Some content 1<td>
<td><button id="addButton1">Add Row 1</button><td>
</tr>
<tr id="row2">
<td>Some content 2<td>
<td><button id="addButton2">Add Row 2</button><td>
</tr>
<tbody>
</table>
This is the script I use so far:
$("#addBtn").on("click", function () {
$("#table1 tbody").append("<tr><td>1</td><td>1</td></tr>");
});
This is adding rows at the end of the table. How can I add rows in between, in the same section, using jQuery?

Try to use .closest() along with .after() to achieve what you want, and you should use id starts with selector in this context or you can add one common class for all of that buttons and use that as a selector.
$("[id^=addButton]").on("click", function () {
$(this).closest('tr').after("<tr><td>1</td><td>1</td></tr>");
});
Side Note: I have edited some of your ugly html in order to make your code valid
DEMO

You can do like this.
$("#table1 button").on("click", function () {
$(this).parents('tr').after("<tr><td>1</td><td>1</td></tr>");
});

How to get row id from row Index in table using JavaScript

Suppose this is my table:
<table>
<tr id="a">
<TD>a</TD>
</tr>
<tr id="b">
<TD>b</TD>
</tr>
</table>
How can I get row id using the row index from a table?
Above is just an example where id is static but in my case my id is dynamic, so I can't use
document.getElementById().

Assuming you have only one table on your page:
document.getElementsByTagName("tr")[index].id;
Preferably though, you'd give your table a id, though, and get your row like this:
<table id="tableId">
<tr id="a">
<td>a</td>
</tr>
<tr id="b">
<td>b</td>
</tr>
</table>
var table = document.getElementById("tableId");
var row = table.rows[index];
console.log(row.id);
This way, you can be certain you don't get any interference, if you have multiple tables in your page.

"So, How can i get row id using row Index from a table"
You would select the table, and use the .rows property to get the row by index.
var table = document.getElementsByTagName("table")[0]; // first table
var secondRow = table.rows[1]; // second row
Then you just get the ID in the typical manner.
console.log(secondRow.id); // "b"
DEMO: http://jsfiddle.net/MErPk/

Answer has been edited
With CSS3 you can use the nth-child selctor. Here the example shows the rowIndex = 2
alert(document.querySelector("table tr:nth-child(2)").id);
In jQuery you can do this with
alert($("table tr:nth-child(2)").attr('id'));
The same syntax nth-child() can be used in CSS
<style>
tr:nth-child(2) {
color: red;
}
</style>