/    Sign up×
Community /Pin to ProfileBookmark

Javascript to toggle colour of table rows

Copy linkTweet thisAlerts:
Aug 29.2019

I’ve got some code in VBA which generates a HTML file, but to make it a bit more user-friendly, I want to include some JavaScript functions:

  • 1. To toggle the colour on rows, so they can be marked as ‘dealt with’ (and toggled back if clicked in error).

  • 2. To hide any rows that are irrelevant, with an ‘unhide all’ button.

  • 3. To be able to search for rows containing a specific string and hide the others.

    • I’ve started with the first one and already I’m struggling. On my HTML file, the code is currently:

    `<tr id=’ABC’ class=’unchecked’ onclick=changeColor(‘ABC’)>`

    In the corresponding JS file, I have the following:

    `function changeColor(row) {
    var thisRow = document.getElementById(row);
    thisRow.classList.toggle(‘checked’);
    thisRow.classList.toggle(‘unchecked’);
    }`

    Any ideas why this isn’t working? I have a CSS file, with the following:

    `tr:checked {
    background-color: #0F0;
    }

    tr:unchecked {
    background-color: #F00;
    }`
    I know the javascript is running on click, but it’s not actually changing anything on the page – any ideas why not?

    Thanks
    Chris

    to post a comment
    CSSHTMLJavaScript

    1 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @SempervivumAug 29.2019 — The reason why it doesn't work is that you are toggling the classes; in order to refer to the classes you need to use a dot instead of a colon: `tr.checked</C> Additionally your code can be simplified a bit: One class is sufficient; the curren row can be referred to by <C>this`:
    &lt;table&gt;
    &lt;tr id="ABC" onclick="changeColor(this);"&gt;
    &lt;td&gt;XYZ&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;

    <i> </i>&lt;script&gt;
    <i> </i> function changeColor(thisRow) {
    <i> </i> thisRow.classList.toggle('checked');
    <i> </i> }
    <i> </i>&lt;/script&gt;
    <i> </i>&lt;style&gt;
    <i> </i> tr.checked {
    <i> </i> background-color: #0F0;
    <i> </i> }

    <i> </i> tr {
    <i> </i> background-color: #F00;
    <i> </i> }
    <i> </i>&lt;/style&gt;
    ×

    Success!

    Help @ccordner spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.6,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...