Display 2 tables in one HTML page

Author Message
kya_karey

  • Total Posts : 39
  • Scores: 0
  • Reward points : 0
  • Joined: 5/11/2005
  • Location: India
  • Status: offline
Display 2 tables in one HTML page Wednesday, May 11, 2005 8:35 PM (permalink)
0
Hi !!!!
I would like to display 2 tables in the same html page using VB script.
In my code first table is alreday there when page is loaded but other table is going to display when someone click the button.
I am able to display the table but it used to go on the second page but I would like to display it below the first table.

My Code ::

<html>
<body>

sub TableCreate()
document.write("<table border=1>")
document.write("<tr>")
document.write("<th >" + "Id" + "</th>")
document.write("<th >" + "FirstName" + "</th>")
document.write("<th >" + "LastName" + "</th>")
document.write("<th >" + "Degress" + "</th>")
document.write("</tr>")
document.write("</table>")
end sub

TableCreate

<INPUT TYPE="SUBMIT" NAME="Btnedit" VALUE="Check For Edit Value">

Sub Btnedit_OnClick()
TableCreate
end sub

</html>
</body>

Would please send me ans how can i display 2 tables in the same html page.

Thanks in advance
 
#1
    Zifter

    • Total Posts : 315
    • Scores: 0
    • Reward points : 0
    • Joined: 1/5/2005
    • Location: Belgium
    • Status: offline
    Re: Display 2 tables in one HTML page Wednesday, May 11, 2005 9:34 PM (permalink)
    0
    You will need to put the first table in an element, like a form or a div or a span or ...
    Then you can simply append a second table (or wathever you want) to the innerHTML of this element.
    An example:
    <html>
<head>
<script language=VbScript>
Function AddTable()
strTable2 = "<P>"
strTable2 = strTable2 & "<table border=1>"
strTable2 = strTable2 & "<tr><td>A</td><td>B</td><td>C</td></tr>"
strTable2 = strTable2 & "<tr><td>D</td><td>E</td><td>F</td></tr>"
strTable2 = strTable2 & "<tr><td>G</td><td>H</td><td>I</td></tr>"
strTable2 = strTable2 & "</table>"
Table1.InnerHTML = Table1.innerHTML & strTable2
End Function
</script>
</head>
<body>
<div id=Table1>
<table border=1>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</div>
<input type="Button" value="Add Table" OnClick="AddTable()">
</body>
</html>

    HTH
     
    #2
      kya_karey

      • Total Posts : 39
      • Scores: 0
      • Reward points : 0
      • Joined: 5/11/2005
      • Location: India
      • Status: offline
      Re: Display 2 tables in one HTML page Thursday, May 12, 2005 2:30 AM (permalink)
      0
      Thanks Zifter.

      I got error like 'Table1' is required

      My code is ::: document.write("<div id=""Table1"">")

      Table1.InnerHTML = Table1.innerHTML & strTable2


      Would you please tell me where is the error.
       
      #3
        Zifter

        • Total Posts : 315
        • Scores: 0
        • Reward points : 0
        • Joined: 1/5/2005
        • Location: Belgium
        • Status: offline
        Re: Display 2 tables in one HTML page Thursday, May 12, 2005 3:57 AM (permalink)
        0
        I don't understand why you need that line, I thought you said that the first table is already on the page...
        Anyhow, there's nothing wrong with your one line of code.
        Most probably you have overwritten your table or some other code, but with only one line of code I can only guess...
         
        #4
          kya_karey

          • Total Posts : 39
          • Scores: 0
          • Reward points : 0
          • Joined: 5/11/2005
          • Location: India
          • Status: offline
          Re: Display 2 tables in one HTML page Thursday, May 12, 2005 9:13 PM (permalink)
          0
          Hello Zifter,

          here is my code

          woould you please tell me where is the error ???
          b'coz I am getting the same error like "Table1" is required.

          <html>
          <head>
          <script type="text/vbscript">
          function TableCreate()
          strTable2 = strTable2 & document.write("<p>")
          strTable2 = strTable2 & document.write("<table border=1>")
          strTable2 = strTable2 & document.write("<tr>")
          strTable2 = strTable2 & document.write("<th >" + "Annotation" + "</th>")
          strTable2 = strTable2 & document.write("<th >" + "EntityID" + "</th>")
          strTable2 = strTable2 & document.write("<th >" + "ProfileName" + "</th>")
          strTable2= strTable2 & document.write("<th >" + "ServiceCategory" + "</th>")
          strTable2 = strTable2 & document.write("<th >" + "PCR" + "</th>")
          strTable2 = strTable2 & document.write("<th >" + "CDVT" + "</th>")
          strTable2 = strTable2 & document.write("<th >" + "FrameDiscard" + "</th>")
          if x.length-1 > 10 then
          if x.item(11).getAttribute("serviceCategory")="nrtVbr" then
          strTable2 = strTable2 & document.write("<th >" + "SCR" + "</th>")
          strTable2 = strTable2 & document.write("<th >" + "MBS" + "</th>")
          end if
          elseif y.length > 0 then
          if y.item(1).getAttribute("serviceCategory")="nrtVbr" then
          strTable2 = strTable2 & document.write("<th >" + "SCR" + "</th>")
          strTable2 = strTable2 & document.write("<th >" + "MBS" + "</th>")
          end if
          end if
          strTable2 = strTable2 & document.write("</tr>")
          Table1.InnerHTML = Table1.innerHTML & strTable2
          end function
          </script>
          </head>

          <body>
          <h1>Edit the Value</h1>
          <br></br>

          <INPUT TYPE="Button" NAME="Btnedit" VALUE="Check For Edit Value" onclick="TableCreate()">
          <script type="text/vbscript">

          set xmlDoc=CreateObject("Microsoft.XMLDOM")
          xmlDoc.async="false"

          //xmlDoc.load("NBV2_HSDPA_1STM1_40M_6BB_4VC_1VP_01.xml")
          xmlDoc.load("NBV2_HSDPA_4E1_8M_IMA_4BB_3VC_2VP_01.xml")

          set x=xmlDoc.getElementsByTagName("CbrTrafficDescriptor")
          set y=xmlDoc.getElementsByTagName("VbrTrafficDescriptor")

          dim pcr_value(80)
          dim cdvt_value(80)
          dim scr_value(80)
          dim mbs_value(80)
          dim text_name(500)

          document.write("<div id=""Table1"">")
          document.write("<table border=1>")
          document.write("<tr>")
          document.write("<th >" + "Annotation" + "</th>")
          document.write("<th >" + "EntityID" + "</th>")
          document.write("<th >" + "ProfileName" + "</th>")
          document.write("<th >" + "ServiceCategory" + "</th>")
          document.write("<th >" + "PCR" + "</th>")
          document.write("<th >" + "CDVT" + "</th>")
          document.write("<th >" + "FrameDiscard" + "</th>")
          if x.length-1 > 10 then
          if x.item(11).getAttribute("serviceCategory")="nrtVbr" then
          document.write("<th >" + "SCR" + "</th>")
          document.write("<th >" + "MBS" + "</th>")
          end if
          elseif y.length > 0 then
          if y.item(1).getAttribute("serviceCategory")="nrtVbr" then
          document.write("<th >" + "SCR" + "</th>")
          document.write("<th >" + "MBS" + "</th>")
          end if
          end if
          document.write("</tr>")

          For i = 0 to x.length-1
          Document.write("<tr>")
          Document.write("<td >" + x.item(i).text + "</td>")
          Document.write("<td>"+x.item(i).getAttribute("managedEntityId")+"</td>")
          Document.write("<td>"+x.item(i).getAttribute("profileName")+"</td>")
          Document.write("<td>"+x.item(i).getAttribute("serviceCategory")+"</td>")
          if i = 6 then
          Document.write("<td>"+x.item(i).getAttribute("pcr")+"</td>")
          Document.write("<td>"+x.item(i).getAttribute("cdvt")+"</td>")
          elseif i = 9 then
          Document.write("<td>"+x.item(i).getAttribute("pcr")+"</td>")
          elseif i = 10 then
          Document.write("<td>"+x.item(i).getAttribute("pcr")+"</td>")
          else
          Document.Write "<TD><INPUT TYPE=" & Chr(34) & "Text" & Chr(34) & " NAME=" & Chr(34) & "Text" & i & Chr(34) & " VALUE=" & x.item(i).getAttribute("pcr") & " size=""13""></TD>"
          end if
          if i < 9 then
          if i <>6 then
          Document.write("<td>"+x.item(i).getAttribute("cdvt")+"</td>")
          end if
          else
          Document.Write "<TD><INPUT TYPE=" & Chr(34) & "Text" & Chr(34) & " NAME=" & Chr(34) & "Text" & i & Chr(34) & " VALUE=" & x.item(i).getAttribute("cdvt") & " size=""13""></TD>"
          end if
          Document.write("<td>"+x.item(i).getAttribute("frameDiscard")+"</td>")
          if i > 10 and y.length > 0 then
          Document.Write "<TD><INPUT TYPE=" & Chr(34) & "Text" & Chr(34) & " NAME=" & Chr(34) & "Text" & i & Chr(34) & " VALUE=" & x.item(i).getAttribute("scr") & " size=""13""></TD>"
          Document.Write "<TD><INPUT TYPE=" & Chr(34) & "Text" & Chr(34) & " NAME=" & Chr(34) & "Text" & i & Chr(34) & " VALUE=" & x.item(i).getAttribute("mbs") & " size=""13""></TD>"
          end if
          Document.write("</tr>")
          Next
          j=i
          For k = i to y.length+x.length-1
          Document.write("<tr>")
          Document.write("<td >" + y.item(k-i).text + "</td>")
          Document.write("<td>"+y.item(k-i).getAttribute("managedEntityId")+"</td>")
          Document.write("<td>"+y.item(k-i).getAttribute("profileName")+"</td>")
          Document.write("<td>"+y.item(k-i).getAttribute("serviceCategory")+"</td>")
          Document.Write "<TD><INPUT TYPE=" & Chr(34) & "Text" & Chr(34) & " NAME=" & Chr(34) & "Text" & i & Chr(34) & " VALUE=" & y.item(k-i).getAttribute("pcr") & " size=""13""></TD>"
          Document.Write "<TD><INPUT TYPE=" & Chr(34) & "Text" & Chr(34) & " NAME=" & Chr(34) & "Text" & i & Chr(34) & " VALUE=" & y.item(k-i).getAttribute("cdvt") & " size=""13""></TD>"
          Document.write("<td>"+""+"</td>")
          if ( k >10 and y.item(k-i).getAttribute("serviceCategory")="nrtVbr" ) then
          Document.Write "<TD><INPUT TYPE=" & Chr(34) & "Text" & Chr(34) & " NAME=" & Chr(34) & "Text" & i & Chr(34) & " VALUE=" & y.item(k-i).getAttribute("scr") & " size=""13""></TD>"
          Document.Write "<TD><INPUT TYPE=" & Chr(34) & "Text" & Chr(34) & " NAME=" & Chr(34) & "Text" & i & Chr(34) & " VALUE=" & y.item(k-i).getAttribute("mbs") & " size=""13""></TD>"
          end if
          Document.write("</tr>")
          j=j+1
          Next
          document.write("</table>")

          document.write("</div>")


          </script>
          </body>
          </html>
           
          #5
            Zifter

            • Total Posts : 315
            • Scores: 0
            • Reward points : 0
            • Joined: 1/5/2005
            • Location: Belgium
            • Status: offline
            Re: Display 2 tables in one HTML page Thursday, May 12, 2005 10:27 PM (permalink)
            0
            In my previous example I build a string (strTable2) which I add to the innerHTML of the div called Table1.
            You've changed it using "document.write".
            This will clear the complete document before it starts to write.
            That is why you lose your Table1 (actually you lose evrything which was on the page).

            Change each 
            strTable2 = strTable2 & document.write(" ... ")

            back into 
            strTable2 = strTable2 & " ... "
            and it should work again.

            HTH
             
            #6
              kya_karey

              • Total Posts : 39
              • Scores: 0
              • Reward points : 0
              • Joined: 5/11/2005
              • Location: India
              • Status: offline
              Re: Display 2 tables in one HTML page Monday, May 16, 2005 9:57 PM (permalink)
              0
              Thanks Zifter.

              It's working well.

              Now I have another problem.

              I would like to display the text value of first table in the second table.

              My code is like this
              strTable2 = strTable2 & "<td>" & Document.all("Text" & i).value & "</td>"

              But I am getting error.
              Would you please tell me the correct syntex how can I write the text value of first table in another table.

              Thanks in advance.
               
              #7
                Zifter

                • Total Posts : 315
                • Scores: 0
                • Reward points : 0
                • Joined: 1/5/2005
                • Location: Belgium
                • Status: offline
                Re: Display 2 tables in one HTML page Monday, May 16, 2005 10:32 PM (permalink)
                0
                In my first example I add the HTML syntax of the second table to the Div containing the first table, resulting in one div containing two tables.
                You could also put the first table in a div, create a second (empty) div and add the HTML syntax of the second table to the second div.
                Something like this
                <html>
<head>
<script language=VbScript>
Function AddTable()
strTable2 = "<p>"
strTable2 = strTable2 & "<table border=1>"
strTable2 = strTable2 & "<tr><td>A</td><td>B</td><td>C</td></tr>"
strTable2 = strTable2 & "<tr><td>D</td><td>E</td><td>F</td></tr>"
strTable2 = strTable2 & "<tr><td>G</td><td>H</td><td>I</td></tr>"
strTable2 = strTable2 & "</table>"
Table2.InnerHTML = strTable2
End Function
</script>
</head>
<body>
<div id=Table1>
<table border=1>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</div>
<div id=Table2></div>
<input type="Button" value="Add Table" OnClick="AddTable()">
</body>
</html>
                If you want the second table to be a copy of the first table, you just have to change the code in the "AddTable()" function to this
                  Function AddTable()
strTable2 = "<p>"
strTable2 = strTable2 & Table1.InnerHTML
Table2.InnerHTML = strTable2
End Function
                HTH
                 
                #8
                  kya_karey

                  • Total Posts : 39
                  • Scores: 0
                  • Reward points : 0
                  • Joined: 5/11/2005
                  • Location: India
                  • Status: offline
                  Re: Display 2 tables in one HTML page Monday, May 16, 2005 10:55 PM (permalink)
                  0
                  But I want to display some fields not whole table.

                  Would you please tell me syntex for that.

                   
                  #9
                    Zifter

                    • Total Posts : 315
                    • Scores: 0
                    • Reward points : 0
                    • Joined: 1/5/2005
                    • Location: Belgium
                    • Status: offline
                    Re: Display 2 tables in one HTML page Tuesday, May 17, 2005 12:24 AM (permalink)
                    0
                    I'm not sure if I understand correctly what you are trying to do, but if you don't want to copy the complete first table, only a few of it's cells, you'll have to put each cell into a div, so you can refer to it in your script.
                    Something like this:
                    <html>
<head>
<script language=VbScript>
Function AddTable()
strTable2 = "<p>"
strTable2 = strTable2 & "<table border=1>"
strTable2 = strTable2 & "<tr><td>" & Cell22.innerHTML & _
"</td><td>B</td><td>C</td></tr>"
strTable2 = strTable2 & "<tr><td>D</td><td>E</td><td>F</td></tr>"
strTable2 = strTable2 & "<tr><td>G</td><td>H</td><td>I</td></tr>"
strTable2 = strTable2 & "</table>"
Table2.InnerHTML = strTable2
End Function
</script>
</head>
<body>
<div id=Table1>
<table border=1>
<tr>
<td><div id=Cell11>1</div></td>
<td><div id=Cell12>2</div></td>
<td><div id=Cell13>3</div></td>
</tr>
<tr>
<td><div id=Cell21>4</div></td>
<td><div id=Cell22>5</div></td>
<td><div id=Cell23>6</div></td>
</tr>
<tr>
<td><div id=Cell31>7</div></td>
<td><div id=Cell32>8</div></td>
<td><div id=Cell33>9</div></td>
</tr>
</table>
</div>
<div id=Table2></div>
<input type="Button" value="Add Table" OnClick="AddTable()">
</body>
</html>

                    OR

                    You could give your first table an id instead of the div and refer to the correct row and cell of the table.
                    Like this:
                    <html>
<head>
<script language=VbScript>
Function AddTable()
strTable2 = "<p>"
strTable2 = strTable2 & "<table border=1>"
strTable2 = strTable2 & "<tr><td>" & Table1.rows(1).cells(1).innerHTML & _
"</td><td>B</td><td>C</td></tr>"
strTable2 = strTable2 & "<tr><td>D</td><td>E</td><td>F</td></tr>"
strTable2 = strTable2 & "<tr><td>G</td><td>H</td><td>I</td></tr>"
strTable2 = strTable2 & "</table>"
Table2.InnerHTML = strTable2
End Function
</script>
</head>
<body>
<div>
<table border=1 id=Table1>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</div>
<div id=Table2></div>
<input type="Button" value="Add Table" OnClick="AddTable()">
</body>
</html>
                    Note: The rows and cells of the table are zero based. Both examples will take the second cell of the second row of the first table to put in the first cell of the first row of the second table.

                    HTH
                     
                    #10

                      Online Bookmarks Sharing: Share/Bookmark

                      Jump to:

                      Current active users

                      There are 0 members and 1 guests.

                      Icon Legend and Permission

                      • New Messages
                      • No New Messages
                      • Hot Topic w/ New Messages
                      • Hot Topic w/o New Messages
                      • Locked w/ New Messages
                      • Locked w/o New Messages
                      • Read Message
                      • Post New Thread
                      • Reply to message
                      • Post New Poll
                      • Submit Vote
                      • Post reward post
                      • Delete my own posts
                      • Delete my own threads
                      • Rate post

                      2000-2012 ASPPlayground.NET Forum Version 3.9