...

View Full Version : Creating Column Elements



mac86
07-21-2008, 06:48 AM
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?



<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.

mjlorbet
07-21-2008, 11:28 PM
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.



<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>

mac86
07-22-2008, 06:01 AM
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.


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.

rangana
07-22-2008, 06:26 AM
Try to change fill function to:


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.

mac86
07-22-2008, 06:51 AM
Thanks a lot. it did satisfy my requirement.

mac86
07-22-2008, 07:01 AM
Thanks a lot
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?



<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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum