Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Creating Column Elements

    hi,
    i have included my code here. there is one functionality where in on click of filter button, the row content gets displayed. i have included it as rows. i need it to be displayed in a single line or columns of a row.
    how do i actually change the output displayed from rows into columns?
    Can you please change my code according or give me ready made solution?


    Code:
    <html>
    <head>
    <title>Filter</title>
    <script type="text/javascript">
    
    row_no=1;
    
    i=1;
    function OnChange(dropdown)
    {
    if(row_no <= 2)
    {
    	var tbody = document.getElementById("myTable").getElementsByTagName("tbody")[0];
    	var row = document.createElement("TR");
    	var cell1 = document.createElement("TD");
    	cell1.innerHTML = "";
    	var cell2 = document.createElement("TD");
    	cell2.innerHTML = "Column Name";
    	var cell3 = document.createElement("TD");
    	cell3.innerHTML = "<select id='ReType("+row_no+")'><option value=''>Select One<option value='Member ID'>Member ID<option value='First Name'>First Name<option value='Last Name'>Last Name";
    	
    	var cell4 = document.createElement("TD");
    	cell4.innerHTML = "Expression";
    	var cell5 = document.createElement("TD");
    	
    	cell5.innerHTML = "<select id='exp("+row_no+")'><option value=''>Select One<option value='=='>==<option value='!='>!=";
    	var cell6 = document.createElement("TD");
    	cell6.innerHTML = "Criteria";
    	var cell7 = document.createElement("TD");
    	cell7.innerHTML = '<input type=text id="crit('+row_no+')"/>'; 
    	var cell8 = document.createElement("TD");
    	cell8.innerHTML = "Append";
    	var cell9 = document.createElement("TD");
    	cell9.innerHTML = "<select name='logic' onchange='OnChange(this);'><option value='11'>Select One<option value='22'>AND<option value='33'>OR";
    	var cell10 = document.createElement("TD");
    	cell10.innerHTML = "<input type=button onclick=fill("+row_no+") Class=topNavCommandExButton onmouseout=this.className='topNavCommandExButton' onmouseover=this.className='topNavCommandExButtonHighlight' value=Filter>";
    	var cell11 = document.createElement("TD");
    	cell11.innerHTML = "";
    	
    	row.appendChild(cell1);
    	row.appendChild(cell2);
    	row.appendChild(cell3);
    	row.appendChild(cell4);
    	row.appendChild(cell5);
    	row.appendChild(cell6);
    	row.appendChild(cell7);
    	row.appendChild(cell8);
    	row.appendChild(cell9);
    	row.appendChild(cell10);
    	row.appendChild(cell11);
    	tbody.appendChild(row);
    	row_no++;
    
    }
    
    else{
    alert('No more rows can be filtered');
    }
    
    }
    
    
    
     
    function fill(val)
    {
    
    	var tbody = document.getElementById("myTable1").getElementsByTagName("tbody")[0];
    	var row = document.createElement("TR");
    	
    	var cell11 = document.createElement("TD");
    	cell11.innerHTML = "";
    	var cell12 = document.createElement("TD");
    	cell12.innerHTML = "";
    	
    	var cell13 = document.createElement("TD");
    	cell13.innerHTML = "";
    	var cell14 = document.createElement("TD");
    	cell14.innerHTML = "";
    	var cell15 = document.createElement("TD");
    	cell15.innerHTML = "";
    	var cell16 = document.createElement("TD");
    	cell16.innerHTML = "";
    	var cell17 = document.createElement("TD");
    	cell17.innerHTML = "";
    	var cell18 = document.createElement("TD");
    	cell18.innerHTML = "";
    	
    	var cell19 = document.createElement("TD");
    	cell19.innerHTML =document.getElementById('ReType('+val+')').value; 
    	var cell10 = document.createElement("TD");
    	cell10.innerHTML =document.getElementById('exp('+val+')').value;         
    					
    	var cell11 = document.createElement("TD");
    	cell11.innerHTML = document.getElementById('crit('+val+')').value;
    	
    	row.appendChild(cell11);
    	row.appendChild(cell12);
    	row.appendChild(cell13);
    	
    	row.appendChild(cell14);
    	row.appendChild(cell15);
    	
    	row.appendChild(cell16);
    	row.appendChild(cell17);
    	
    	row.appendChild(cell18);
    	row.appendChild(cell19);
    	
    	row.appendChild(cell10);
    	row.appendChild(cell11);
    	tbody.appendChild(row);
    
    }
    
    
    
    </script>
    </head>
    <body>
    <form name=frm2 action="#">
      <table width=88% border=0 align=center id="myTable">
        <tr>
          <td><b>Filter:</b></td>
          <td>Column Name</td>
          <td><select id="ReType()">
              <option value="" >Select One</option>
              <option value="Member ID" >Member ID</option>
              <option value="First Name">First Name</option>
              <option value="Last Name">Last Name</option>
            </select></td>
          <td>Expression</td>
          <td><select  id="exp()">
              <option value="">Select One</option>
              <option value="==">==</option>
              <option  value="!=">!=</option>
            </select></td>
          <td>Criteria</td>
          <td><input type="text" id="crit()">
          </td>
          <td>Append</td>
          <td><select  name="logic" onchange='OnChange(this);'>
              <option value="">Select One</option>
              <option  value="22">AND</option>
              <option  value="33">OR</option>
            </select></td>
          <td><input   type="button" value="&nbsp;&nbsp;Filter&nbsp;&nbsp;"  Class="topNavCommandExButton" onMouseOut="this.className='topNavCommandExButton'" onMouseOver="this.className='topNavCommandExButtonHighlight'" onClick="fill('');">
          </td>
          <td align="right"><INPUT  type="button" value="View" name="sub" Class="topNavCommandExButton" onMouseOut="this.className='topNavCommandExButton'" onMouseOver="this.className='topNavCommandExButtonHighlight'" disabled onClick="window.open('View_Claims.html')">
            <input    type="button" value="Mark"  name="Bn_Add" Class="topNavCommandExButton" onMouseOut="this.className='topNavCommandExButton'" onMouseOver="this.className='topNavCommandExButtonHighlight'" onClick="toggleAllCheckBoxes();"></td>
        </tr>
      </table>
      <table width=18% border=0  id="myTable1">
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </form>
    </body>
    </html>

    Thanks all.

  • #2
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    since there is no html construct for a column of cells, i think we need more clarification as to what you are trying to do, so we can give you a better answer. in essence, though, you can create a "column" by creating a table with a single row only, where each cell in that row contains a table with only one cell per row, and multiple rows therein.

    Code:
     
    <table>
    <tr>
    <td><table><tr><td></td></tr><tr><td></td></tr></table></td>
    <td><table><tr><td></td></tr><tr><td></td></tr></table></td>
    </tr>
    </table>
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    in my code, there is a functionality wherein when i click the filter button the content of the row gets displayed. similarly if i have n rows i will get n lines of output. but, i get the output as next next line since i have given it as rows. i want them to be displayed in a single line.

    Code:
    function fill(val)
    {
    
    	var tbody = document.getElementById("myTable1").getElementsByTagName("tbody")[0];
    	var row = document.createElement("TR");
    	
    	var cell11 = document.createElement("TD");
    	cell11.innerHTML = "";
    	var cell12 = document.createElement("TD");
    	cell12.innerHTML = "";
    	
    	var cell13 = document.createElement("TD");
    	cell13.innerHTML = "";
    	var cell14 = document.createElement("TD");
    	cell14.innerHTML = "";
    	var cell15 = document.createElement("TD");
    	cell15.innerHTML = "";
    	var cell16 = document.createElement("TD");
    	cell16.innerHTML = "";
    	var cell17 = document.createElement("TD");
    	cell17.innerHTML = "";
    	var cell18 = document.createElement("TD");
    	cell18.innerHTML = "";
    	
    	var cell19 = document.createElement("TD");
    	cell19.innerHTML =document.getElementById('ReType('+val+')').value; 
    	var cell10 = document.createElement("TD");
    	cell10.innerHTML =document.getElementById('exp('+val+')').value;         
    					
    	var cell11 = document.createElement("TD");
    	cell11.innerHTML = document.getElementById('crit('+val+')').value;
    	
    	row.appendChild(cell11);
    	row.appendChild(cell12);
    	row.appendChild(cell13);
    	
    	row.appendChild(cell14);
    	row.appendChild(cell15);
    	
    	row.appendChild(cell16);
    	row.appendChild(cell17);
    	
    	row.appendChild(cell18);
    	row.appendChild(cell19);
    	
    	row.appendChild(cell10);
    	row.appendChild(cell11);
    	tbody.appendChild(row);
    
    }
    Certain changes has to be made in this function so, i get the result in a single line.
    I hope i have explained it clearly.

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Try to change fill function to:
    Code:
    function fill(val)
    {
    
    	var row = document.getElementById("myTable1").getElementsByTagName("tr")[0];
    	//var row = document.createElement("TR");
    	
    	var cell11 = document.createElement("TD");
    	cell11.innerHTML = "";
    	var cell12 = document.createElement("TD");
    	cell12.innerHTML = "";
    	
    	var cell13 = document.createElement("TD");
    	cell13.innerHTML = "";
    	var cell14 = document.createElement("TD");
    	cell14.innerHTML = "";
    	var cell15 = document.createElement("TD");
    	cell15.innerHTML = "";
    	var cell16 = document.createElement("TD");
    	cell16.innerHTML = "";
    	var cell17 = document.createElement("TD");
    	cell17.innerHTML = "";
    	var cell18 = document.createElement("TD");
    	cell18.innerHTML = "";
    	
    	var cell19 = document.createElement("TD");
    	cell19.innerHTML =document.getElementById('ReType('+val+')').value; 
    	var cell10 = document.createElement("TD");
    	cell10.innerHTML =document.getElementById('exp('+val+')').value;         
    					
    	var cell11 = document.createElement("TD");
    	cell11.innerHTML = document.getElementById('crit('+val+')').value;
    	
    	row.appendChild(cell11);
    	row.appendChild(cell12);
    	row.appendChild(cell13);
    	
    	row.appendChild(cell14);
    	row.appendChild(cell15);
    	
    	row.appendChild(cell16);
    	row.appendChild(cell17);
    	
    	row.appendChild(cell18);
    	row.appendChild(cell19);
    	
    	row.appendChild(cell10);
    	row.appendChild(cell11);
    	//tbody.appendChild(row);
    
    }
    Hope it helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    mac86 (07-22-2008)

  • #5
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks a lot. it did satisfy my requirement.

  • #6
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile Resolved and Thanks

    Thanks a lot
    Quote Originally Posted by mac86 View Post
    hi,
    i have included my code here. there is one functionality where in on click of filter button, the row content gets displayed. i have included it as rows. i need it to be displayed in a single line or columns of a row.
    how do i actually change the output displayed from rows into columns?
    Can you please change my code according or give me ready made solution?


    Code:
    <html>
    <head>
    <title>Filter</title>
    <script type="text/javascript">
    
    row_no=1;
    
    i=1;
    function OnChange(dropdown)
    {
    if(row_no <= 2)
    {
    	var tbody = document.getElementById("myTable").getElementsByTagName("tbody")[0];
    	var row = document.createElement("TR");
    	var cell1 = document.createElement("TD");
    	cell1.innerHTML = "";
    	var cell2 = document.createElement("TD");
    	cell2.innerHTML = "Column Name";
    	var cell3 = document.createElement("TD");
    	cell3.innerHTML = "<select id='ReType("+row_no+")'><option value=''>Select One<option value='Member ID'>Member ID<option value='First Name'>First Name<option value='Last Name'>Last Name";
    	
    	var cell4 = document.createElement("TD");
    	cell4.innerHTML = "Expression";
    	var cell5 = document.createElement("TD");
    	
    	cell5.innerHTML = "<select id='exp("+row_no+")'><option value=''>Select One<option value='=='>==<option value='!='>!=";
    	var cell6 = document.createElement("TD");
    	cell6.innerHTML = "Criteria";
    	var cell7 = document.createElement("TD");
    	cell7.innerHTML = '<input type=text id="crit('+row_no+')"/>'; 
    	var cell8 = document.createElement("TD");
    	cell8.innerHTML = "Append";
    	var cell9 = document.createElement("TD");
    	cell9.innerHTML = "<select name='logic' onchange='OnChange(this);'><option value='11'>Select One<option value='22'>AND<option value='33'>OR";
    	var cell10 = document.createElement("TD");
    	cell10.innerHTML = "<input type=button onclick=fill("+row_no+") Class=topNavCommandExButton onmouseout=this.className='topNavCommandExButton' onmouseover=this.className='topNavCommandExButtonHighlight' value=Filter>";
    	var cell11 = document.createElement("TD");
    	cell11.innerHTML = "";
    	
    	row.appendChild(cell1);
    	row.appendChild(cell2);
    	row.appendChild(cell3);
    	row.appendChild(cell4);
    	row.appendChild(cell5);
    	row.appendChild(cell6);
    	row.appendChild(cell7);
    	row.appendChild(cell8);
    	row.appendChild(cell9);
    	row.appendChild(cell10);
    	row.appendChild(cell11);
    	tbody.appendChild(row);
    	row_no++;
    
    }
    
    else{
    alert('No more rows can be filtered');
    }
    
    }
    
    
    
     
    function fill(val)
    {
    
    	var tbody = document.getElementById("myTable1").getElementsByTagName("tbody")[0];
    	var row = document.createElement("TR");
    	
    	var cell11 = document.createElement("TD");
    	cell11.innerHTML = "";
    	var cell12 = document.createElement("TD");
    	cell12.innerHTML = "";
    	
    	var cell13 = document.createElement("TD");
    	cell13.innerHTML = "";
    	var cell14 = document.createElement("TD");
    	cell14.innerHTML = "";
    	var cell15 = document.createElement("TD");
    	cell15.innerHTML = "";
    	var cell16 = document.createElement("TD");
    	cell16.innerHTML = "";
    	var cell17 = document.createElement("TD");
    	cell17.innerHTML = "";
    	var cell18 = document.createElement("TD");
    	cell18.innerHTML = "";
    	
    	var cell19 = document.createElement("TD");
    	cell19.innerHTML =document.getElementById('ReType('+val+')').value; 
    	var cell10 = document.createElement("TD");
    	cell10.innerHTML =document.getElementById('exp('+val+')').value;         
    					
    	var cell11 = document.createElement("TD");
    	cell11.innerHTML = document.getElementById('crit('+val+')').value;
    	
    	row.appendChild(cell11);
    	row.appendChild(cell12);
    	row.appendChild(cell13);
    	
    	row.appendChild(cell14);
    	row.appendChild(cell15);
    	
    	row.appendChild(cell16);
    	row.appendChild(cell17);
    	
    	row.appendChild(cell18);
    	row.appendChild(cell19);
    	
    	row.appendChild(cell10);
    	row.appendChild(cell11);
    	tbody.appendChild(row);
    
    }
    
    
    
    </script>
    </head>
    <body>
    <form name=frm2 action="#">
      <table width=88% border=0 align=center id="myTable">
        <tr>
          <td><b>Filter:</b></td>
          <td>Column Name</td>
          <td><select id="ReType()">
              <option value="" >Select One</option>
              <option value="Member ID" >Member ID</option>
              <option value="First Name">First Name</option>
              <option value="Last Name">Last Name</option>
            </select></td>
          <td>Expression</td>
          <td><select  id="exp()">
              <option value="">Select One</option>
              <option value="==">==</option>
              <option  value="!=">!=</option>
            </select></td>
          <td>Criteria</td>
          <td><input type="text" id="crit()">
          </td>
          <td>Append</td>
          <td><select  name="logic" onchange='OnChange(this);'>
              <option value="">Select One</option>
              <option  value="22">AND</option>
              <option  value="33">OR</option>
            </select></td>
          <td><input   type="button" value="&nbsp;&nbsp;Filter&nbsp;&nbsp;"  Class="topNavCommandExButton" onMouseOut="this.className='topNavCommandExButton'" onMouseOver="this.className='topNavCommandExButtonHighlight'" onClick="fill('');">
          </td>
          <td align="right"><INPUT  type="button" value="View" name="sub" Class="topNavCommandExButton" onMouseOut="this.className='topNavCommandExButton'" onMouseOver="this.className='topNavCommandExButtonHighlight'" disabled onClick="window.open('View_Claims.html')">
            <input    type="button" value="Mark"  name="Bn_Add" Class="topNavCommandExButton" onMouseOut="this.className='topNavCommandExButton'" onMouseOver="this.className='topNavCommandExButtonHighlight'" onClick="toggleAllCheckBoxes();"></td>
        </tr>
      </table>
      <table width=18% border=0  id="myTable1">
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </form>
    </body>
    </html>

    Thanks all.


  •  

    Posting Permissions

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