#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2011
    Posts
    7
    Rep Power
    0

    Dispaly row count


    Code:
    <html>
    <head>
    <script>
    function displayResult()
    {
    alert(document.getElementById("myTable").rows.length);
    }
    </script>
    </head>
    <body>
    
    <table id="myTable" border="1">
      <tr>
        <td>cell 1</td>
        <td>cell 2</td>
      </tr>
      <tr>
        <td>cell 3</td>
        <td>cell 4</td>
      </tr>
    </table>
    <br>
    <button type="button" onclick="displayResult()">Show number of rows in table</button>
    
    </body>
    How can I display

    I have ?? rows in my table.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    101
    Rep Power
    27
    .... the code you posted works? It says 2, which is correct.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2011
    Posts
    7
    Rep Power
    0
    Originally Posted by mod_speling
    .... the code you posted works? It says 2, which is correct.
    Can i have count come up without an alert
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    101
    Rep Power
    27
    Come up where? If you want to add content to the page dynamically, you'd be best off starting with a library like prototype or jQuery or whatever, and using its element generation capabilities. Since jQuery is very popular on this board, here's an example of adding an element to a web page using jQuery:
    Code:
    function displayResult() {
        $(document.body).append("<div>The table has this many rows: "+$("#myTable tr").length+"</div>");
    }
  8. #5
  9. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,119
    Rep Power
    119
    Just to add to mod_speling's jQuery example; here's the basic JavaScript way to go about this:
    Code:
    function displayResult()
    {
    var rowLen = document.getElementById("myTable").rows.length;
    var newDIV = document.createElement("div");
    newDIV.innerHTML = rowLen;
    document.body.appendChild(newDIV);
    }
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2011
    Posts
    7
    Rep Power
    0
    Originally Posted by web_loone08
    Just to add to mod_speling's jQuery example; here's the basic JavaScript way to go about this:
    Code:
    function displayResult()
    {
    var rowLen = document.getElementById("myTable").rows.length;
    var newDIV = document.createElement("div");
    newDIV.innerHTML = rowLen;
    document.body.appendChild(newDIV);
    }
    Code:
    <html>
    <head>
    <style type="text/css">
    table.hover td {
    	border-width: 2px;
    	padding: 0.5px;
    	border-style: solid;
    	border-color: blue;
    }
    </style>
    
    </head>
    <body>
    
    <p> Total entries is now at...//( Number of rows minus one for header>
    <table class="hover" border=1>
      <tr>
        <td width="50%">Name</td>
      </tr>
      <tr>
        <td width="50%">entry 1</td>
      </tr>
      <tr>
        <td width="50%">entry 2</td>
      </tr>
      <tr>
        <td width="50%">entry 3</td>
      </tr>
    </table></body></html>
    Here's what I'm trying to do. ( stripped down). My table has a class rather than a ID.
    I tried many ideas but can't get solution that works?
    Cheers Peter
  12. #7
  13. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,007
    Rep Power
    2791
    It is possible to reference the table with via the class attribute but why do you not just add an ID?

    Comments on this post

    • web_loone08 agrees
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,119
    Rep Power
    119
    You can use access the table via the table's class or id. I am assuming you are going to have several of these tables; otherwise, if you only have one... as Winters said; you are better off with accessing it by it's id attribute. Look into:
    Code:
    document.getElementsByClassName()
    Code:
    document.querySelector()
    or... you could go about doing it like so:
    Code:
    <script>
    function displayResult()
    {
    var tableClassCount = 0;
    var classInQuestion = "hover";
    var tables = document.getElementsByTagName("table");
    for(i=0;i<tables.length;i++){
      if(tables.className == classInQuestion){
       tableClassCount++;
       var newDIV = document.createElement("div");
       newDIV.innerHTML = "There is " + rowLen + " in table #" + tableClassCount;
       document.getElementById("count").appendChild(newDIV);
      }
     }
    }
    </script>
    
    <div id="count"></div>
    or... yet another, less complicated and easier way to do this would be to do like mod_speling suggested... and use jQuery, because that will simplify your whole process of doing this. The jQuery library offers such simplified APIs for doing things like this; it makes using regular JS, a thing of the past, for most modern developers.

IMN logo majestic logo threadwatch logo seochat tools logo