alidar777
01-09-2006, 04:37 PM
Hi I need to write a java script or dhtml for following functionality:
This is a same as master details functionality:
1) I need to design a screen where i have 3 select boxes, Group, UnAssignedUsers and AssignedUsers as shown in html below.
2) I get all my data from backend and display that in my hidden table ALLData as shown in html code.
3 When i load my page first time. group select box should have values from id attribute of each row of my hidden table with its corsponding TD values
(e.g) when i load my page first time Group1, Group2,-- Group5, Will be shown in the Group Select box and User2 and will be displayed in the UnAssignedUsers box AND user1 and user3 will be displayed in AssignedUsers select box.
If i click on Group2, UnAssignedUsers and AssignedUsers select box should show user5 and user4,user6 resp that is the data in my second row of hidden table. so every time i click on group its corrosponding data should be displayed in UnAssignedUsers and AssignedUsers based on the id of <td>
Some one pls help me in this Thanks in advance
HTML code
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
</script>
</head>
<body>
<form name="myForm">
<table BGCOLOR="#FFFFFF" BORDER=0 CELLSPACING=2 CELLPADDING=2>
<tr>
<td><b>Group </b></td>
<td><b>UnAssignedUsers<b></td>
<td></td>
<td><b>AssignedUsers<b></td>
</tr>
<tr>
<td>
<SELECT NAME="names" MULTIPLE SIZE="20" WIDTH=200 id="names">
<OPTION value="Group1">Group1 </OPTION>
<OPTION value="Group2">Group2 </OPTION>
<OPTION value="Group3">Group3 </OPTION>
<OPTION value="Group4">Group4 </OPTION>
<OPTION value="Group5">Group5 </OPTION>
</SELECT>
</td>
<td>
<SELECT NAME="UnAssignedUsers" MULTIPLE SIZE="20" WIDTH=200 id="UnAssignedUsers">
<OPTION value="Group3">User2 </OPTION>
</SELECT>
</td>
<td>
<SELECT NAME="AssignedUsers" MULTIPLE SIZE="20" WIDTH=200 id="AssignedUsers">
<OPTION value="Group1">User1 </OPTION>
<OPTION value="Group3">User3 </OPTION>
</SELECT>
</td>
</tr>
</table> <!-- End of Outer Table-->
<DIV id="divAllData" Name="divAllData" style="visibility:hidden;">
<?xml version="1.0" encoding="UTF-8"?>
<TABLE ID="ALLData" border="0" name="ALLData">
<TBODY ID="ALLData" name="ALLData">
<TR id="Group1">
<TD id="Assigned">User1</TD>
<TD id="UnAssigned">User2</td>
<TD id="Assigned">User3</TD>
</TR>
<TR id="Group2">
<TD id="Assigned">User4</TD>
<TD id="UnAssigned">User5</td>
<TD id="Assigned">User6</TD>
</TR>
<TR id="Group3">
<TD id="UnAssigned">User4</TD>
<TD id="UnAssigned">User5</td>
<TD id="Assigned">User6</TD>
</TR>
<TR id="Group4">
<TD id="UnAssigned">User4</TD>
<TD id="UnAssigned">User5</td>
<TD id="Assigned">User6</TD>
</TR>
<TR id="Group5">
<TD id="UnAssigned">User7</TD>
<TD id="UnAssigned">User8</td>
<TD id="Assigned">User9</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</form>
</body>
</html>
This is a same as master details functionality:
1) I need to design a screen where i have 3 select boxes, Group, UnAssignedUsers and AssignedUsers as shown in html below.
2) I get all my data from backend and display that in my hidden table ALLData as shown in html code.
3 When i load my page first time. group select box should have values from id attribute of each row of my hidden table with its corsponding TD values
(e.g) when i load my page first time Group1, Group2,-- Group5, Will be shown in the Group Select box and User2 and will be displayed in the UnAssignedUsers box AND user1 and user3 will be displayed in AssignedUsers select box.
If i click on Group2, UnAssignedUsers and AssignedUsers select box should show user5 and user4,user6 resp that is the data in my second row of hidden table. so every time i click on group its corrosponding data should be displayed in UnAssignedUsers and AssignedUsers based on the id of <td>
Some one pls help me in this Thanks in advance
HTML code
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
</script>
</head>
<body>
<form name="myForm">
<table BGCOLOR="#FFFFFF" BORDER=0 CELLSPACING=2 CELLPADDING=2>
<tr>
<td><b>Group </b></td>
<td><b>UnAssignedUsers<b></td>
<td></td>
<td><b>AssignedUsers<b></td>
</tr>
<tr>
<td>
<SELECT NAME="names" MULTIPLE SIZE="20" WIDTH=200 id="names">
<OPTION value="Group1">Group1 </OPTION>
<OPTION value="Group2">Group2 </OPTION>
<OPTION value="Group3">Group3 </OPTION>
<OPTION value="Group4">Group4 </OPTION>
<OPTION value="Group5">Group5 </OPTION>
</SELECT>
</td>
<td>
<SELECT NAME="UnAssignedUsers" MULTIPLE SIZE="20" WIDTH=200 id="UnAssignedUsers">
<OPTION value="Group3">User2 </OPTION>
</SELECT>
</td>
<td>
<SELECT NAME="AssignedUsers" MULTIPLE SIZE="20" WIDTH=200 id="AssignedUsers">
<OPTION value="Group1">User1 </OPTION>
<OPTION value="Group3">User3 </OPTION>
</SELECT>
</td>
</tr>
</table> <!-- End of Outer Table-->
<DIV id="divAllData" Name="divAllData" style="visibility:hidden;">
<?xml version="1.0" encoding="UTF-8"?>
<TABLE ID="ALLData" border="0" name="ALLData">
<TBODY ID="ALLData" name="ALLData">
<TR id="Group1">
<TD id="Assigned">User1</TD>
<TD id="UnAssigned">User2</td>
<TD id="Assigned">User3</TD>
</TR>
<TR id="Group2">
<TD id="Assigned">User4</TD>
<TD id="UnAssigned">User5</td>
<TD id="Assigned">User6</TD>
</TR>
<TR id="Group3">
<TD id="UnAssigned">User4</TD>
<TD id="UnAssigned">User5</td>
<TD id="Assigned">User6</TD>
</TR>
<TR id="Group4">
<TD id="UnAssigned">User4</TD>
<TD id="UnAssigned">User5</td>
<TD id="Assigned">User6</TD>
</TR>
<TR id="Group5">
<TD id="UnAssigned">User7</TD>
<TD id="UnAssigned">User8</td>
<TD id="Assigned">User9</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</form>
</body>
</html>