Hide/Show table columns dynamicly with JavaScript

Question

I have a button, when I press it, I must show a hidden column I have in my table. But my problem is that I only show one row.

<a href="#" class="btn-xl btn-default" id="btn_callkit" onclick="call();return false;" style="width: 150px;color: white;">KIT</a> 
 <table id="example0" class="table  table-striped">

        <br/>
            <thead>
                <tr>
                    <th id="kit_head" style="display:none;">KIT</th>
                    <th>Material</th>
                    <th>Info</th>
                 </tr>
             </thead>

                    <?php
                        $rol = mysql_query("SELECT * from pg  WHERE pg.dataset = 2 ");
                            if (mysql_num_rows($rol) != 0) { 
                                while($item = mysql_fetch_array($rol)) { 


                                    $id = $item['id'];  
                                    $info = $item['info'];  
                                    $code = $item['lote_code'];
                    ?>

             <tr id="infodata_<?=$id;?>">


                    <td id="line" style="display:none;">

                        <div class="checkbox  checkbox-circle" style="text-align:center;margin-top:40px;">
                            <input id="check_<?=$id;?>" type="checkbox">
                            <label for="check_<?=$id;?>">

                            </label>
                        </div>

                    </td>

                    <td><?php echo $info;?></td>

                    <td><?php echo $code;?></td>


                </tr>
        <? }} ?>
        </tbody>
        </table>

My Javascript has this code:

function call()
{
    document.getElementById('kit_head').style.display = 'block'; 
    document.getElementById('line').style.display = 'block'; 
}

What may I do it to show all of the rows that my database has inside?

Try using a class instead of an id, e.g. use <th class="toggleColumn" and document.getElementByClass('toggleColumn') — JustBaron
– JustBaron, Commented Mar 20, 2017 at 14:40
You are specifically changing the display of the first element that have an id of "Line" and "kit_head". Instead you can go with <tr> that wrap — user3127648
– user3127648, Commented Mar 20, 2017 at 14:51

Matt · Accepted Answer · 2017-03-20 15:55:47Z

1

You are using an ID for the cell line.

getElementById - as the name implies - will return a single element, this will always be true because IDs are intended for single use. So your code:

document.getElementById('line').style.display = 'block';

Is getting the first matching element and setting the style attribute as defined.

Instead you should use a class which is intended to be the designation of many related elements or elements sharing common rules.

Then you can get all matching elements, loop over them and set the desired style attribute.

The DOM API exposes lots of methods for retrieving elements by their class name, you should consult the list of browser versions you intend to support and pick an appropriate technique from those available.

Edit: As a sidenote, KennyDope is correct in saying that best practice is generally to toggle classes in order to manipulate styles. It's much easier to keep track of and modify classes than it is inline styles.

edited Mar 20, 2017 at 15:55

answered Mar 20, 2017 at 14:43

Matt

4,1273 gold badges31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tzshand Over a year ago

This is the correct answer. Always use classes when an element name will be reused.

MattDAVM Over a year ago

My problem is that now it appears "Uncaught TypeError: document.getElementByClass is not a function"

Matt Over a year ago

Because that isn't a valid method, probably a typo from another answer. Take a look at the docs on Mozilla Developer Network.

Matt Over a year ago

A few options from the top of my head are getElementsByClassName querySelector querySelectorAll pay attention to what these methods return and how to iterate over the results, it's not always intuitive.

Stan Winiecki · Accepted Answer · 2017-03-20 14:49:53Z

0

id property must be unique on the page.

Conversely, class property is, as the name suggests, a class of objects, and multiple objects can share the same class.

So if you want to show/hide a column, the specific <td> in each row must be assgined the same class, which then will be manipulated by Javascript, using getElementByClassName.

NB, getElementByClassName returns an array of objects, and you have to walk the array to change the display style in each.

answered Mar 20, 2017 at 14:49

Stan Winiecki

1641 silver badge5 bronze badges

Comments

KennyDope · Accepted Answer · 2017-03-20 15:47:37Z

0

Best practice is to toggle classes instead of inline styles.

Your code will then something like this:

<table class="table table-striped">
    <tr>
        <td class="toggle">Toggle field</td>
        <td class="toggle">Toggle field</td>
        <td>Other field</td>
    </tr>
</table>

<button id="btn_callkit">toggle</button>

<script>
   function toggle (t) {
        var listTd = document.getElementsByClassName("toggle");
        var i;

        for (i = 0; i < listTd.length; i++) {           
            listTd[i].classList.toggle('hidden');
        }           
    }

    document.getElementById('btn_callkit').addEventListener('click', toggle);
</script>

edited Mar 20, 2017 at 15:47

answered Mar 20, 2017 at 14:46

KennyDope

4992 gold badges4 silver badges15 bronze badges

Collectives™ on Stack Overflow

Hide/Show table columns dynamicly with JavaScript

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related