We Keep Coding

Remove class before clicking on another table row HTML CSS JAVASCRIPT

The below code retrieves the table html element and contains an onclick function. On this it calls a bunch of functions which works completely fine. The last part of the function is to highlight the table row using the class .primary. There should only ever be one row highlighted with this class. How do I change the function so that it removes the class before you click on another row. At the moment if you click on a row it highlights the entire row yellow. But when you click on another row it also highlights thats one yellow. I just want one row to be highlighted each time:
var table = document.getElementById("tabledt");
if (table) {
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].onclick = function() {
if (this.classList.contains('selected')) {
highlightMarker(prevHighlightMarker, false);
tableText(this);
highlightMarker(cMarkers[$(this).data('id')], true);
this.classList.add("primary");
}
};
}
}
.primary {
background-color: yellow !important;
}

I think you are using jquery. There is a function in jquery that is useful in this cases.
siblings()
siblings selects all the all the elements with same parent. and you can filter it as you wish. https://api.jquery.com/siblings/
In this case you can do this way:
$("#tabledt tr").click(function(){
$(this).siblings('tr').removeClass('primary');
}

Highlight selected table cell C# Menu

I have a dynamic Menu populating from database. I have issues in highlighting the currently selected Menu, I am using ASP.net C#. Please check the code below.
HTML
function highlight(clMenu) {
clMenu.id = "clMenu";
}
<form id="Form1" method="post" runat="server">
<asp:Table ID="tblMenu" runat="server" Width="100%">
</asp:Table>
</form>
C#
TableRow rwMenu = new TableRow();
ConnectionCls ConObj = new ConnectionCls();
string StrQuery = "select * from Menus where isenabled=1";
ConObj.GetSqlDataTable(ref Dt, StrQuery);
if (Dt.Rows.Count > 0)
{
for (i = 0; i <= Dt.Rows.Count - 1; i++)
{
string Href = Dt.Rows[i]["url"].ToString();
clMenu.Text = "" + Dt.Rows[i]["MenuName"] + "";
clMenu.Attributes.Add("onclick", "highlight(this)");
rwMenu.Cells.Add(clMenu);
tblMenu.Rows.Add(rwMenu);
}
}
Everything is working perfectly except the menu onclick event. When i click on a Menu its background color i am able to change successfully, on clicking another menu its background color also changing but the previous selected menu its not clearing
CSS
#clMenu {
background-color:#EE3D43;
}

I will recommend to go for CSS class attachment instead of setting DOM element's id; because logically there has to be unique ids to each and every DOM element. But single CSS class can be assigned to many elements though.
So please have a look at below changes:
CSS:
.clMenu {
background-color:#EE3D43;
}
Javascript code:
function highlight(domElem) {
$(".clMenu").removeClass('clMenu'); //removing highlight class from previously clicked menu
$(domElem).addClass('clMenu'); //adding highlight class to currently clicked menu
}

If this class are used only for this anchors only then try this
function highlight(clMenu){
$(this).attr('id').click(function () {
$(document).find('.anchorColor').removeClass('anchorColor');
var aId = $(this).attr('id');
$(this).addClass('anchorColor');
});
}
and instead of doing the css with id try with class:
.anchorColor {
background-color:#EE3D43;
}

Hiding TR when TD contains specific class

I have the below Javascript code on my PHP page, I pass the table name and a variable to the function. The "ALL" portion of the code works fine, parses through the page and flips all of the CSS style display descriptors from 'none' to '' or back.
Where I'm running into issues is the "RED" portion. It is supposed to hide all TR which contain a TD of the class "RedCell" but I cannot seem to get this part working as intended. Please help.
JAVASCRIPT
function expandCollapseTable(tableObj, which)
{
if (which == 'ALL')
{
var rowCount = tableObj.rows.length;
for(var row=0; row<rowCount; row++)
{
rowObj = tableObj.rows[row];
rowObj.style.display = (rowObj.style.display=='none') ? '' : 'none';
}
return;
}
if (which == 'RED')
{
$('td.RedCell').find('td.RedCell').closest('tr').style.display = 'none';
return;
}
else
{
return;
}
}
CSS
.ResultTable td.RedCell{
background-color:#FF4747;
}
HTML BUTTONS AND EXAMPLE TABLE
<input type="button" value="Show/hide ALL" onclick="expandCollapseTable(TheTable, 'ALL')" />
<input type="button" value="Hide Red" onclick="expandCollapseTable(TheTable, 'RED')" />
<table id="TheTable" class="ResultTable" style="padding: 0px; background: #FFFFFF;" align="center">
<tr><td class="RedCell">2014-07-17 10:04</td><td>1998847</td><td>137717</td></tr>
<tr><td>2014-08-06 10:44</td><td>2009211</td><td>106345</td>
<tr><td class="RedCell">2014-07-31 16:47</td><td>2006727</td><td>138438</td>
So the first and third row would be hidden and second row left visible
CodePen version of code http://codepen.io/anon/pen/DrKLm

It should be:
$('td.RedCell', tableObj).closest('tr').hide();
The call to .find() was looking for another td.RedCell inside the first one.
Also, you can't use the .style property with jQuery objects, that's for DOM elements. To hide something with jQuery, use .hide() or .css("display", "none").
And you need to restrict your searching to within the given tableObj.
BTW, why aren't you using jQuery for the ALL option? That entire loop can be replaced with:
$("tr", tableObj).toggle();

Instead of going from the child up to the parent, use the jQuery :has selector to filter elements based on descendents.
$(tableObj).find('tr:has(td.RedCell)').hide();
In addition, you'll probably want to hide all of the cells only if none are already hidden. If any are hidden, you'll want to show those and keep the rest visible. Here's an example of that...
var rows = $(tableObj).find('tr:gt(0)'); // Skips the first row
if(rows.is(':hidden')) {
// Contains elements which are hidden
rows.show();
} else {
rows.hide();
}
The result would be:
function expandCollapseTable(tableObj, which) {
var rows = $(tableObj).find('tr:gt(0)');
if(which == 'RED') {
// First snippet
rows.has('td.RedCell').hide();
} else if(which == 'ALL') {
// Second snippet
if(rows.is(':hidden')) {
rows.show();
} else {
rows.hide();
}
}
}
http://codepen.io/anon/pen/xlmcK
Extra programming candy:
The second snippet could be reduced to rows[rows.is(':hidden')?'show':'hide']();

Two problems, the .find is saying to find descendents of the td.RedCell's that are td.RedCells.
There aren't any of those...
Then, use .css to set the style.
So this:
$('td.RedCell').closest('tr').css('display', 'none');

Javascript Collapsible Menu (hide the other elements)

I have the following working Javascript function:
function collapsible(zap) {
if (document.getElementById) {
var abra = document.getElementById(zap).style;
if (abra.display == "block") {
abra.display = "none";
} else {
abra.display = "block";
}
return false;
} else {
return true;
}
}
When I use the following in html code it displays or hides the "element" div:
<li>Element</li>
Thats working fine. But the problem is, that I want to use the function for multiple links, and then the other elements, that were clicked before, stay, open.
How can I reprogram the code, so that only one div stays open and the other gets closed if i click on another link?
Thanks beforehand!

If you could use jQuery and more importantly jQueryUI accordion I think it would accomplish exactly what you're looking for.
However, without using those two, here is how I would structure it. Like mentioned above, I would use classes to modify the styles of the divs you want shown or hidden. Then the js code can just toggle those classes on each of your elements. The slightly more difficult part (without jquery) is modifying class values since in your final application you may have lots of classes on each div. This is just a very crude example to get you going.
Working JSFiddle Example
Sample DOM
<div >
<li>Element1</li>
<div id='elem1' class='myelem visible'>
Element 1 contents
</div>
</div>
<div >
<li>Element2</li>
<div id='elem2' class='myelem'>
Element 2 contents
</div>
</div>
<div >
<li>Element3</li>
<div id='elem3' class='myelem'>
Element 3 contents
</div>
</div>
Sample JS
window['collapsible'] = function(zap) {
if (document.getElementById)
{
var visDivs = document.getElementsByClassName('visible');
for(var i = 0; i < visDivs.length; i++)
{
visDivs[i].className = visDivs[i].className.replace('visible','');
}
document.getElementById(zap).className += " visible";
return false;
}
else
return true;
}
Sample CSS:
.myelem {
display: none;
}
.visible {
display: block;
}

The way to go is to create a class(or maybe two), like collapsible and active or open that has this style(display: block or none) and then you working adding or removing the class.
The logic would be:
Links that has the class collapsible when clicked would add the active or open class which would give the behavior that remains opens(or active) by css.
If you want to hide others elements you would look for the elements with the class collapsible and then remove the active(or open) class if has any.

Here is my solution: http://jsfiddle.net/g5oc0uoq/
$('.content').hide();
$('.listelement').on('click', function(){
if(!($(this).children('.content').is(':visible'))){
$('.content').slideUp();
$(this).children('.content').slideDown();
} else {
$('.content').slideUp();
}
});
show() and hide() can be used instead of slideUp() and slideDown() if you have performance issues.

Hide a table row with filtering jquery

I have the following example http://jsfiddle.net/zidski/MxqRu/1/
When you click on 2010 I need valuation to disappear with the list items.
Here is the code which I am using to do this:
$("#yearfilter a").live("click", function(e) {
e.preventDefault();
//var v = $(this).val();
var v = $(this).attr("data-value");
if(v.length > 0) {
$('tr.reports').show();
$('tr.reports ul').hide();
$('tr.reports ul.year-'+v).show();
$('tr.reports').each(function() {
if($('ul:visible', this).size() == 0) {
$(this).hide();
}
});
} else {
$('tr.reports').show();
$('tr.reports ul').show();
}
});

I have done it in my project something like this:
function toggleRow(row_id) {
row_selector = "#row_" + row_id;
$(row_selector).toggleClass("shown hidden")
}
Then in the CSS:
.hidden {display:none;}
.shown {}
Then in the HTML I have alternating table rows, where the odd rows act as headings for the content in the even rows. Clicking an odd row toggles the visibility of the corresponding even row.
...
<tr onclick="toggleRow(17)">...</tr>
<tr class="hidden" id="row_17">...</tr>
...

Give each tr an ID something like id="row_2010" then look for that and hide the whole entire row at once.
UPDATE
I would strongly suggest not using so many tables and use more classes to classify your data structure. It would help your javascript be much more clean, concise and function easier.
UPDATE
I adjusted all your javacsript and some of your html. Here is a fully working example jsFiddle Demo