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

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.