www.webdeveloper.com
Results 1 to 3 of 3

Thread: Dynamically Adding rows into the Table

  1. #1
    Join Date
    Jan 2008
    Posts
    9

    Dynamically Adding rows into the Table

    Here iam fetching the table from an Oracle database, but i need to add text boxes dynamically in to table based on the no. of columns retrived from the data base.Please help me out on how to do that.

    This is second page -- pg2.jsp
    Code:
    <%@page import="java.util.*"%>
    <%@page import="java.sql.*"%>
    <html>
    <head>
    <%
    Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
    Connection con = DriverManager.getConnection("jdbc:odbc:mydsn","scott","tiger");
    Statement st = con.createStatement();
    String s=request.getParameter("s1");
    ResultSet rs = st.executeQuery("select * from "+s+"");
    ResultSetMetaData m=rs.getMetaData();
    //String m2=m.getColumnName();
    int cols=m.getColumnCount();
    //Count Of No. Of Columns In The Table
    out.println("No of Cols"+cols);
    out.println(s);
      %>      
        <script type="javascript">
    
    
    function AddRow() {
    var oTBody = document.getElementById('tablebody');
    // add row
    //var oTR = document.createElement('TR'); 
    //oTBody.appendChild(oTR);
    var CellsInRow=cols;
    alert(CellsInRow);
    for(var i=0; i<CellsInRow; i++) { // number of cells in row
        // create input
        var oInput = document.createElement('input');
        //oInput.setAttribute('name', 'cell'+(num++));
        oInput.setAttribute('type', 'text');
        oInput.setAttribute('size', '10');
       // create cell containing input
        var oTD = document.createElement('TD'); 
        oTD.appendChild(oInput);
        // add to row
        oTR.appendChild(oTD);
    } 
    // add to table
    oTBody.appendChild(oTR);
    } 
    
    </script>
    
    </head>
    
    <body>
       <table border="1"><tr>
                
                <td><%
                    for(int i=1;i<=cols;i++)
                    out.println(m.getColumnName(i));
            %></td></tr>
            <tr> <td id="tablebody"></td></tr>
               
    </table>
    <input type="button" value="AddRow" onclick="AddRow()">
    <% 
    con.close();
    %>
    </body>
    </html>
    --------------------------------------------
    This is first page.( pg1.jsp)
    Code:
    <%@page import="java.util.*"%>
    <%@page import="java.sql.*"%>
    <html>
    <head>
    <title></title>
    
    
    </head>
    <body>
        <%
    Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
    Connection con = DriverManager.getConnection("jdbc:odbc:mydsn","scott","tiger");
    Statement st = con.createStatement();
    ResultSet rs = st.executeQuery("select * from tab");
    %>
        <form method="POST" action="pg2.jsp">
    <select name="s1"> 
    <%
    while(rs.next())
    {
      %>
    <option><%=rs.getString("TName")%></option>
    <%
    }
    %>
    </select>
    <input type="submit" value="OK"></form>
    <%
     con.close();
    %>
        
    </body>
    </html>
    Last edited by Kor; 01-27-2008 at 11:21 AM.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    oops... this looks like a server-side code... As it could be a javascript problem, can you post the HTML generated code, not the jsp code? Javascript is not JSP
    Last edited by Kor; 01-27-2008 at 11:22 AM.

  3. #3
    Join Date
    Jan 2008
    Posts
    9

    Here's the HTML code generated

    Kor sorry for posting the server side code, here's the HTML code that is being generated.

    html for pg.1

    <html>
    <head>
    <title></title>


    </head>
    <body>

    <form method="POST" action="poo2.jsp">
    <select name="s1">

    <option>BONUS</option>

    <option>DEPT</option>

    <option>EMP</option>

    <option>MT_GFO_LOGIN</option>

    <option>SALGRADE</option>

    </select>
    <input type="submit" value="OK"></form>


    </body>
    </html>
    -------------------------------------------------------

    HTML for pg2



    <html>
    <head>

    <title></title>
    No of Cols8
    EMP

    <script type="javascript">

    //var num=1;
    function AddRow() {
    var oTBody = document.getElementById('tablebody');
    // add row
    //var oTR = document.createElement('TR');
    //oTBody.appendChild(oTR);
    var CellsInRow=cols;
    for(var i=0; i<CellsInRow; i++) { // number of cells in row
    // create input
    var oInput = document.createElement('input');
    //oInput.setAttribute('name', 'cell'+(num++));
    oInput.setAttribute('type', 'text');
    oInput.setAttribute('size', '10');
    // create cell containing input
    var oTD = document.createElement('TD');
    oTD.appendChild(oInput);
    // add to row
    oTR.appendChild(oTD);
    }
    // add to table
    oTBody.appendChild(oTR);
    }

    </script>

    </head>

    <body>
    <table border="1"><tr>

    <td>EMPNO
    ENAME
    JOB
    MGR
    HIREDATE
    SAL
    COMM
    DEPTNO
    </td></tr>
    <tr><td><div id="tablebody"></div></td></tr>

    </table>
    <input type="button" value="AddRow" onclick="AddRow()">

    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles