show and hide table row on click for JQUERY

Question

I'm working on a project in ASP and I'm not used to Javascript or Jquery

I found some code that if I click on a row, it will change the color.

I now want to change the display to normal when I click on a row and then hide it if I click on any other row.

What I have so far

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>INFO</th> 
</tr> 
</thead> 
<tbody> 
<tr onclick="changeMe(this);"> 
    <td>INFO</td> 
            <tr class="versionRow" style ="display:none">
                <td>INFO</td>
            </tr>
</tr> 
</tbody> 
</table> 

And my script for changing the color.

<script>
    var whosChanged = null;

    function changeMe(el) {
        el.style.backgroundColor = "#00FF00";
        el.style.color = "#000000";

        if (whosChanged != null) {
            whosChanged.style.backgroundColor = ""
            whosChanged.style.color = ""
        }

        whosChanged = el;
    }
</script>

I just want to be able to display the row with the class versionRow when I click on it.

Any ideas or suggestions? Thank you.

Answer 1

It's been a while since I've done this without jQuery, try this

<script>
    var whosChanged = null;

    function changeMe(el) {
        el.style.backgroundColor = "#00FF00";
        el.style.color = "#000000";

        if (whosChanged != null) {
            whosChanged.style.backgroundColor = ""
            whosChanged.style.color = ""
        }

        whosChanged = el;

        // ok so you are using jquery. The above isn't at all!
        // in which case it's so simple
        el.find('.versionRow').show();
    }
</script>

Answer 2

The Problem with this is that you cant add an row within an row. So your browser (at least chrome) make instead of this html part:

<tr onclick="changeMe(this);"> 
    <td>INFO</td> 
            <tr class="versionRow" style ="display:none">
                <td>INFO</td>
            </tr>
</tr> 

This:

<tr onclick="changeMe(this);"> 
    <td>INFO</td>
</tr> 
<tr class="versionRow" style ="display:none">
    <td>INFO</td>
</tr>

So if you only have one element with the class name versionRow, there should be no problem when you reformat the code like the browser does. All you have to do is to add this line of jquery code:

$('.versionRow').css("display","block");

But if you want to display the versionBlock of the child wich you clicked you must reformat the html to. It can look like something like this:

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>INFO</th> 
</tr> 
</thead> 
<tbody> 
<tr onclick="changeMe(this);" > 
    <td>INFO</td> <td><span style="display:none;" class="versionRow" >INFO</span></td>
</tr>
</tbody> 
</table> ​​​​​​​​​​​​​​​​​​​​​​​​​​

And the script will look like this:

var whosChanged = null;

    function changeMe(el) {
        el.style.backgroundColor = "#00FF00";
        el.style.color = "#000000";

        $('span.versionRow',el).css("display","block");

        if (whosChanged != null) {
            whosChanged.style.backgroundColor = ""
            whosChanged.style.color = ""
        }

        whosChanged = el;
    }​

JSFIDDLE Demo

Answer 3

Here's one approach:

function hasClass(el, needle) {
    if (!el || !needle) {
        return false;
    }
    else {
        var classes = el.className.split(/\s+/);
        for (var i = 0, len = classes.length; i < len; i++) {
            if (classes[i] == needle) {
                return true;
            }
        }
        return false;
    }
}

function nextElementSiblingShim(el) {
    if (!el) {
        return false;
    }
    else {
        return el.nextSibling.nodeType == 1 ? el.nextSibling : nextElementSiblingShim(el.nextSibling);
    }
}

function changeMe(el) {
    if (!el) {
        return false;
    }
    else {
        var nextElem = el.nextElementSibling || nextElementSiblingShim(el);
        if (hasClass(nextElem, 'versionRow')) {
            nextElem.style.display = window.getComputedStyle(nextElem, null).display !== 'none' ? 'none' : 'table-row';
        }
    }
}

var rows = document.getElementsByClassName('changeMe');

for (var i = 0, len = rows.length; i < len; i++) {
    rows[i].onclick = function(){
        changeMe(this);
    };
}​​​​​​

This does rely on well-formed HTML, though: as noted in my comment to your question a tr is only a valid child of a table, thead, tbody and tfoot elements. It is not a valid child of another tr. You could nest a table inside of a td, but there should be no elements inside of a tr except for td and th. That said, the following HTML will allow the above script(s) to work:

<table id="myTable" class="tablesorter">
    <thead>
        <tr>
            <th>INFO</th>
        </tr>
    </thead>
    <tbody>
        <tr class="changeMe">
            <td>INFO</td>
        </tr>
        <tr class="versionRow">
            <td>INFO</td>
        </tr>
    </tbody>
</table>​​​​​​​

JS Fiddle demo.

Note that I've taken out the onclick event-handlers, to separate the behaviour from the mark-up, and, hopefully, make things more maintainable in future. I've also moved the (invalid) nested tr from its parent and added it as a sibling.