SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pinago View Post
    .. 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?

  4. #4
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  5. #5
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  6. #6
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •