Hiding a Table Row?

**pinago** · Dec 30, 2010 06:57

Does anyone know the javascript to be able to have a table row collapse when there is no text in one cell, but there is text in the next cell? I have a 2-column table with titles in the left column and want the right column to be populated by a user. If the user doesn't populate the right cells or row, I'd like that row -including the constant/visible text that is in the left col- to be hidden and that row to collapse or move up... possible?

**Winelover** · Dec 30, 2010 09:54

This jQuery-hack (tested on 1.4.4) might be a starter for you?

Code:

<script type="text/javascript">
  $(document).ready(function () {
    $('#tableDiv tr').each(function () {
      var tdText = $(this).children('td:nth-child(2)').text();
      if (tdText == '')
        $(this).hide();
    });
  });
</script>

<div id="tableDiv">
<table>
  <tr>
    <td>Rowheader 1</td>
    <td>Some text</td>
  </tr>
  <tr>
    <td>Rowheader 2</td>
    <td></td>
  </tr>
  <tr>
    <td>Rowheader 3</td>
    <td>Some other text</td>
  </tr>
</table>
</div>

**aidos** · Dec 30, 2010 14:09

Originally Posted by pinago

.. possible?

That's fairly straight forward with some plain javascript. But what event do you want to trigger the table row collapse (basically all you need to do is remove the row from the DOM)?

On page load I assume the right column is empty, so at what stage/event do you want any rows with empty right columns to be removed. A button click maybe?

Can you the code you have so far?

**aidos** · Dec 30, 2010 14:43

this code uses a button to delete rows that have empty right columns. You can tweak it to suit your needs.

Code JavaScript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            function getElementsByClassName(oElm, strTagName, strClassName) {
                var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
                var arrReturnElements = new Array();
                strClassName = strClassName.replace(/\-/g, "\\-");
                var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
                var oElement;
                for(var i=0; i<arrElements.length; i++) {
                    oElement = arrElements[i];
                    if(oRegExp.test(oElement.className)) {
                        arrReturnElements.push(oElement);
                    }
                }
                return (arrReturnElements)
            }
 
            function getRowNum(obj){
                var par=obj.parentNode;
                while(par.nodeName.toLowerCase()!='tr'){
                    par=par.parentNode;
                }
                return par.rowIndex;
            }
 
            function delRows() {
                var tblO = document.getElementById('table1'); //get the table obj
                var inpO = getElementsByClassName(tblO,'input','rCol'); //get the right col textboxes
                //loop thru inpO and delete the row if rCol is empty
                for(i=0; i < inpO.length; i++) {
                    if(inpO[i].value == '') {
                        tblO.deleteRow(getRowNum(inpO[i]));
                    }
                }
            }
        </script>
    </head>
    <body>
        <table cellspacing="20" id="table1">
            <tr>
                <td>title 1</td>
                <td><input class="rCol" type="text" name="txt1" /></td>
            </tr>
            <tr>
                <td>title 2</td>
                <td><input class="rCol" type="text" name="txt2" /></td>
            </tr>
            <tr>
                <td>title 3</td>
                <td><input class="rCol" type="text" name="txt3" /></td>
            </tr>
            <tr>
                <td>title 4</td>
                <td><input class="rCol" type="text" name="txt4" /></td>
            </tr>
        </table>
        <button onclick="delRows();">Delete empty rows</button>
    </body>
</html>

**aidos** · Dec 30, 2010 18:30

This is another version with 2 buttons. One to hide empty rows and one to redisplay the empty rows.

Code JavaScript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            function getElementsByClassName(oElm, strTagName, strClassName) {
                var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
                var arrReturnElements = new Array();
                strClassName = strClassName.replace(/\-/g, "\\-");
                var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
                var oElement;
                for(var i=0; i<arrElements.length; i++) {
                    oElement = arrElements[i];
                    if(oRegExp.test(oElement.className)) {
                        arrReturnElements.push(oElement);
                    }
                }
                return (arrReturnElements)
            }
 
            function getTableRow(obj){
                var par=obj.parentNode;
                while(par.nodeName.toLowerCase()!='tr'){
                    par=par.parentNode;
                }
                return par;
            }
 
            function showHideRows(action) {
                switch (action) {
                    case 'hide':
                        //loop thru inpO and hide the row if rCol is empty
                        for(i=0; i < inpO.length; i++) {
                            if(inpO[i].value == '') {
                                getTableRow(inpO[i]).style.display = 'none';
                            }
                        }
                        break;
                    case 'show':
                        var trO;
                        for(i=0; i < inpO.length; i++) {
                            trO = getTableRow(inpO[i]);
                            if(trO.style.display == 'none') {
                                trO.style.display = '';
                            }
                        }
                        break;
                }
            }
 
            window.onload=function() {
                tblO = document.getElementById('table1'); //get the table obj
                inpO = getElementsByClassName(tblO,'input','rCol'); //get the right col textboxes
            }
        </script>
    </head>
    <body>
        <table cellspacing="20" id="table1">
            <tr>
                <td>title 1</td>
                <td><input class="rCol" type="text" name="txt1" /></td>
            </tr>
            <tr>
                <td>title 2</td>
                <td><input class="rCol" type="text" name="txt2" /></td>
            </tr>
            <tr>
                <td>title 3</td>
                <td><input class="rCol" type="text" name="txt3" /></td>
            </tr>
            <tr>
                <td>title 4</td>
                <td><input class="rCol" type="text" name="txt4" /></td>
            </tr>
        </table>
        <button onclick="showHideRows('hide');">Hide empty rows</button>
        <button onclick="showHideRows('show');">Show empty rows</button>
    </body>
</html>

**pinago** · Dec 30, 2010 20:27

Hi, thanks for the responses.

I have not written code for this, but this could be a good start... The "event" that would trigger the collapsed cell would be when the cell is left empty. The table is in place with the titles in the left col and nothing in the right. It's then fed to a CMS where the client can populate a form. If they do not fill in criteria for that category, then the right cell will be empty and therefore I do not want it to show. So, I think the js for this should simply be straightforward as I can put the code right into the backend/direct page where the table is inserted. You can see the staging site for this page at to see how viewers will see the page. You will see the title on the left and some right cells empty:
http://icbrealty.wsiefusion.net/_web...07_-_Salem,_MA

**aidos** · Dec 30, 2010 20:42

If it's the table of property information in your link that might have some empty values, then I don't think javascript is the best way to hide the empty cells.

I think a better way of doing this, assuming all the table data is stored in a database table somewhere, is to use something like PHP to generate the html table dynamically on the server based on the information in the database table that is not null when you retrieve it.

So after all the information for a property has been retrieved, you loop through all the columns and display the property data in a html table row only when the value for that column is not null or not empty.

**pinago** · Dec 30, 2010 21:46

Hmm. Okay, I am checking further into the cms software to see if this can be manipulated further. Thanks for the help! Happy new year.

**aidos** · Dec 30, 2010 21:50

You're welcome

Bear in mind that if you go for the javascript solution, it won't work in the relatively small number of javascript disabled browsers that visit your website. A server side solution will work in all cases.

Happy New Year to you as well

User Tag List

Thread: Hiding a Table Row?

Thread Tools

Display

Hiding a Table Row?

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions