We Keep Coding

"Show All" won't redraw/refresh the table

I have created a single HTML page with a static table. I am using the DataTables jQuery library to help make searching the table easier. I created a drop down menu to filter the table by the "Categories" column (column 2). The filter works for everything EXCEPT if I were to select the "All" option after I have filtered the table by selecting another option. I want the table to redraw itself but can't seem to get it to work. Here is my code (the actual table is 3x as long but I cut it short for this question):
HTML:
<section id="autocad-table">
<div class="table-container">
<div class="category-filter">
<label for="Category">What Type Of Code Do You Need?</label>
<select class="dropdown" name="Category" id="categoryFilter">
<option value="0">All</option>
<option value="1">Category 1</option>
<option value="2">Category 2</option>
<option value="3">Category 3</option>
</select>
</div>
<table id="commandsTable" class="stripe hover">
<thead>
<th>Command</th>
<th>Description</th>
<th>Category</th>
</thead>
<tbody id="commandsTableBody">
<tr>
<td>0_FILLET</td>
<td>Create a 0" radius fillet</td>
<td>Category 1</td>
</tr>
<tr>
<td>ALLFLAT</td>
<td>Flatten all objects in all blocks & layouts</td>
<td>Category 2</td>
</tr>
<tr>
<td>ANNO_TO_SQUEEZE</td>
<td>Convert an annotation to the SQUEEZE text style</td>
<td>Category 2</td>
</tr>
<tr>
<td>ARR</td>
<td>Creates an array of a selected object at a specified angle</td>
<td>Category 2, Category 1</td>
</tr>
<tr>
<td>ATC</td>
<td>Changes an arc into a circle</td>
<td>Category 3</td>
</tr>
<tr>
<td>BA</td>
<td>Bend Allowance</td>
<td>Category 3</td>
</tr>
<tr>
<td>BB</td>
<td>BOM Ball</td>
<td>Category 3</td>
</tr>
</tbody>
</table>
</div>
</section>
The Javascript:
$(document).ready( function () {
var oTable = $('#commandsTable').DataTable( {
"paging": false,
"ordering": false,
"info": false,
"searchHighlight": true,
});
$('#categoryFilter').change(function () {
var selectedValue = $(this).val();
if (selectedValue == '0') { //check if "All" is selected
oTable.search(selectedValue).draw();
} else {
oTable.column(2).search(selectedValue).draw();
}
})
} );
Again, the table will filter with both the text search field and the drop down. However, once I select "All" from the drop down, the table does not reset. What did I do wrong? Thank you for your help in advance.

One approach is to change the relevant <select> option:
<option value="">All</option>
And then remove the if logic which you no longer need:
$('#categoryFilter').change(function () {
var selectedValue = $(this).val();
oTable.column(2).search(selectedValue).draw();
})
Because the option's value is now an empty string this will unfilter your table.

You could use
oTable.columns().search("").draw()
to reset the search

How to delete a table row by id except specific id

I have atable where I want to delete all its rows except some rows with specific ids.
I did the follwoing:
for(var y=0; y<table.rows.length; y++)
{
console.log("deleting row "+ y);
var initialRow=document.getElementById("initial-row");
if (table.rows[y].id!=initialRow)
{
table.deleteRow(y);
console.log("row deleted");
}
else continue;
}
But this did not work. Any suggestions?
EDIT:
Here is the HTML table:
<table align='center' cellspacing=1 cellpadding=1 id="data-table" border=1>
<tr id="head">
<th>Name</th>
<th>Type</th>
<th>Action</th>
</tr>
<tr id="initial-row">
<td><input type="text" id="text-field"></td>
<td>
<select name="levels-list" id="levels-list">
<option value="A" id="option-1">A</option>
<option value="B" id="option-2">B</option>
<option value="C" id="option-3">C</option>
</select>
</td>
<td><input type="button" class="add" id="add-button" value="Add"></td>
</tr>
</table>
I am adding rows dynamically int the javascript. Then, I need to delete a row, and refresh the whole table as the added rows ids are dynamic. In order to refresh the table, I want to delete all the old rows except the header and the initial row that was in the HTML page originally. Could not do this correctly.

You're comparing an element id (a string) to a DOM element object. You can remove the getElementById call and simply do:
if (table.rows[y].id!="initial-row")

jQuery/javascript add and remove classes on change

I am trying to create an change event so when a user selects an option from a dropdown, the corresponding row in the table is highlighted (via adding a class).
I have tried two things.. jQuery and javascript.
Here is my jQuery:
$("#phoneType").change(function() {
if (document.getElementById("optionSelect").value == 2) {
var selectedStatus = parseInt(document.getElementById("optionSelect").value);
$('.clickable-row').removeClass("cra-children-item-selected");
$(this).addClass('cra-children-item-selected');
}
});
Note that I am using javascript for the first two lines because I kept getting "val() is not a function" errors.
I tried using javascript to simply add/remove classes, but it doesn't seem to like my syntax...
document.getElementsByClassName("clickable-row").className = "clickable-row";
document.getElementById(selectedStatus).className = "clickable-row item-selected");
What I don't understand is why the jQuery isn't working... I have another function that works perfectly:
$(".clickable-row").click(function(event) {
console.log($(this).attr('id'));
$('.clickable-row').removeClass("item-selected");
$(this).addClass('item-selected');
});
Why is the code above (on click) working, but not my on change function?
Here is HTML:
<table class="table table-striped table-bordered">
<tr>
<th scope="col">Type</th>
<th scope="col">Number</th>
</tr>
<tr id="1" class="clickable-row">
<td>
Work
</td>
<td>
705-556-6677
</td>
</tr>
<tr id="6" class="clickable-row">
<td>
Cellular phone
</td>
<td>
613-444-7777
</td>
</tr>
</table>
<select name="phoneType" id="phoneType">
<option value="-1">Select</option>
<option value="3">Home</option>
<option value="1">Work</option>
<option value="6">Cellular phone</option>
</select>

Check this, it's actually working.
$("#phoneType").change(function() {
var val = $(this).val();
$("tr").removeClass("selected");
$("#tr" + val).addClass("selected");
})
.selected {border: solid 1px #000; background-color:blue;};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<th scope="col">Type</th>
<th scope="col">Number</th>
</tr>
<tr id="tr1" class="clickable-row">
<td>
Work
</td>
<td>
705-556-6677
</td>
</tr>
<tr id="tr6" class="clickable-row">
<td>
Cellular phone
</td>
<td>
613-444-7777
</td>
</tr>
</table>
<select name="phoneType" id="phoneType">
<option value="-1">Select</option>
<option value="3">Home</option>
<option value="1">Work</option>
<option value="6">Cellular phone</option>
</select>

Based on the HTML you presented, it seems the conditional is never true:
if (document.getElementById("optionSelect").value == 2) {
and should be rewritten referring to the select element for an option value that actually exists
$("#phoneType").change(function() {
var t = $(this),
tVal = t.val();
if (tVal === '3') {
console.log(tVal);
}
});

I would highly recommend you don't try to use id="1" as your row IDs. Use HTML5 data attributes instead:
<tr class="clickable-row" data-id="6">
Then simple jQuery which will select the row:
$("#phoneType").change(function() {
var id = parseInt($(this).val());
var $row = $('.clickable-row[data-id="' + id + '"]');
$('.clickable-row').removeClass("cra-children-item-selected");
if (id > 0) {
$row.addClass('cra-children-item-selected');
}
});

Using html select to make ajax refresh to filter table

As mentioned in the title, I want to know how to make an HTML select box to make an ajax request and use that to filter table. I have searched a lot and was not able to find a good solution.
How can i get it to filter??
My source code on jsfiddle.net:
<select>
<option value="all">All</option>
<option value="tim">Tim</option>
<option value="cook">Cook</option>
</select>
<br>
<br>
<br>
<table border="1">
<tr>
<th>Name</th>
<th>Year</th>
</tr>
<tr>
<td>Tim</td>
<td>2015</td>
</tr>
<tr>
<td>Cook</td>
<td>2015</td>
</tr>
</table>

Your example is a little odd because you are filtering down to only one row, but here is how you can make it work.
First, give your <select> and <table> each an id. I chose something generic:
<select id='column-select'>
<option value="all">All</option>
<option value="tim">Tim</option>
<option value="cook">Cook</option>
</select>
<br>
<br>
<br>
<table id='data' border="1">
<tr>
<th>Name</th>
<th>Year</th>
</tr>
<tr>
<td>Tim</td>
<td>2015</td>
</tr>
<tr>
<td>Cook</td>
<td>2015</td>
</tr>
</table>
Now, just use some Jquery to filter out the rows you don't want when the column changes
$(document).ready(function() { // Do nothing until document is ready
$("#column-select").change(function() { // On <select> change...
var selection = $("#column-select").val();
if (selection == "all")
{
$("#data tr").show(); // Show all rows
} else
{
$("#data tr").each(function() { // For each row
if ($(this).find("th").length == 0) // If this is not a heading row
{
if ($(this).find("td").eq(0).text().toLowerCase() == selection)
{
// Show rows where the first column matches
$(this).show();
} else
}
// Hide rows where the first column does not match
$(this).hide();
}
}
});
}
});
});
Here is a jsfiddle to demonstrate.

Dynamically Add and Remove Table Rows

I am both adding and removing table rows with jQuery. I can add rows easily, but am having trouble removing ones that were created.
You can view the page in action here: http://freshbaby.com/v20/wic/request_quote.cfm, with the relevant code pasted below.
HTML
<table style="width:600px;" id="product-list" summary="Lists details about products users wish to purchase">
<thead valign="top" align="left">
<tr>
<th>Products</th>
<th>Language</th>
<th>Quantity</th>
<th></th>
</tr>
</thead>
<tbody valign="top" align="left">
<tr>
<td>
<cfselect query="getProductListing" name="product" size="1" display="name" value="name" queryPosition="below">
<option value=""></option>
</cfselect>
</td>
<td>
<select name="language" size="1">
<option value="English">English</option>
<option value="Spanish">Spanish</option>
</select>
</td>
<td>
<cfinput name="quantity" required="yes" message="Enter your desired quantity" size="10" maxlength="3" mask="999">
</td>
<td valign="bottom">Add Another Product</td>
</tr>
</tbody>
</table>
JavaScript:
<script>
$(function() {
var i = 1;
$(".addrow").click(function() {
$("table#product-list tbody > tr:first").clone().find("input").each(function() {
$(this).attr({
'id': function(_, id) { return id + i },
'value': ''
});
}).end().find("a.addrow").removeClass('addrow').addClass('removerow').text('< Remove This Product')
.end().appendTo("table#product-list tbody");
i++;
return false;
});
$("a.removerow").click(function() {
//This should traverse up to the parent TR
$(this).parent().parent().remove();
return false;
});
});
</script>
When I click the link to remove the row that said link is contained in, nothing happens. No script error, so it has to be logic.

Try this instead
$("#product-list").on('click','a.removerow',function(e) {
e.preventDefault();
//This should traverse up to the parent TR
$(this).closest('tr').remove();
return false;
});
This will ensure that newly created elements can be removed. When you use the $("a.removerow").click(.. it only affects the elements in existence (none) and not the ones that will be dynamically created.