Hiding a Table Row?

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?

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

<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>

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?

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

<!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>

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

<!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>

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/_webapp_1202752/Rte_107_-_Salem,_MA

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.

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.

You’re welcome :slight_smile:

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 :slight_smile: