Solved

Drag n drop from left table to right table

Posted on 2004-04-26
23
869 Views
Last Modified: 2006-11-17
hi,

I need to built a drag and drop for a story re-organization. I have used ASP to built a table on left hand size in random order.

and It allows user to drag from left table to right table.
does anyone know how to do it?

thanks
0
Comment
Question by:hykc
  • 9
  • 8
  • 5
  • +1
23 Comments
 
LVL 35

Expert Comment

by:[ fanpages ]
ID: 10925847
Hi hykc,

Are you using DHTML with your ASP?

BFN,

fp.
0
 

Author Comment

by:hykc
ID: 10925865
I use asp to generate the story sentence from DB and built up a table only
0
 
LVL 35

Expert Comment

by:[ fanpages ]
ID: 10925978
Hi hykc,

Sorry?... You are using HTML then?

BFN,

fp.
0
 

Author Comment

by:hykc
ID: 10925983
yes
0
 
LVL 5

Expert Comment

by:ho_alan
ID: 10926019
0
 
LVL 35

Expert Comment

by:[ fanpages ]
ID: 10926074
Hi again,

Thanks for the clarification.

Working examples of image dragging here:

http://www.dynamicdrive.com/dynamicindex11/genericdrag.htm
http://www.dynamicdrive.com/dynamicindex4/image3.htm

BFN,

fp.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10932850
here is a table dragging script I wrote:

<style>
.tr{width:100%;border:#000099 2px solid;padding:2;cursor:move;font-size:19;}
.tbl{border:#000099 2px solid;}
.td{font-size:0px;background-color:white;}
</style>

<div id='movedv' style="position:absolute;">&nbsp;</div>

<script>
/*
Draggable table row script by L'il Puffball
Customizable choices (located directly after this comment):
 -tels (array): states the number of rows in each table. 1st doesn't matter (placeholder), 2nd and 3rd relate to 1st and 2nd table.
 -emptrange: states the range that will be used if a table is empty
 -actClr: states the colour of the active border
 -opac: states opacity of temporary div (100 is totally opaque and 0 is totally transparent)
 -cStyle: states cursor style when mouse is over the rows
How to set up table:
 -Each row is a div. You can set the style to anything you like. To add a row, add the following line of code after the existing rows:
  <div id='t1r1'>Table 1 Row 1</div>
    The id MUST correspond to its position! t1r1 stand for table1row1. The text of the table is between the div tags and can
    include anything at all (images, html tags, forms, other divs, etc.)
  Any other choices (class, style, alignment, etc.) may be added:
    <div class='classname' style="background-color:green;font-family:impact;" align=right id='t1r1'>Table 1 Row 1</div>
Functions/variables:
  If you are going to add other javascript functions/variables to this script, you may want to prevent the repetition of
  function/variable names. The list of them is below (only global variables are included because local variables do not affect
  repetition):
  Variables: tels, emptrange, actClr, cStyle, drag, x, y, newpos, curpos, md, obstyle, ofntsz, bdsz, newbdr
  Functions: startdrag, dragrow, stopdrag, init, restore
Description of Functions:
  startdrag: invoked when user presses mouse (onMouseDown). Begins the dragging.
  dragrow: invoked if drag=true and when user moves mouse. Does the actual dragging (sets the temporary div position, finds the range).
  stopdrag: invoked after chkStop. Finishes/stops dragging, adds row to new table, hides the temporary div.
  chkStop: invoked if drag=true and when user releases mouse. Checks to see if mouse is out of range and then invokes stopdrag.
  init: invoked when page loads. Does small things like set variables and table widths.
  restore: invoked throughout the other functions (dragrow and stoprow). Reset the active border back to original border when mouse is out of range.
Other Notes:
  Several ids are used of objects which cannot be repeated when naming other objects:
  -No object id can begin with 't' and have the 3rd character an 'r' (that is, 'test' is ok but 'tire' is not and will throw an error)
  -No object id can begin with 'nt' and have the 4th character an 'r'
  -No object id can be 't1' or 't2' or 'tbl1' or 'tbl2' or 'movedv'
  -Names are DIFFERENT from ids. So you can do this: <object name='tbl1'> but not <object id='tbl1'>
  -ids ARE case sensitive, so though you cannot use 'tbl1' you CAN use 'TBL1' or 'tBl1'
  -this also means you cannot use 'T1R1', you MUST use 't1r1'
  -the stylesheet MUST be used, however it can be modified as long as the border styles are kept

Enjoy the script! -^.^-
*/

var tels=new Array(0,3,3), emptrange=13, actClr='red', opac=70, cStyle='move', tblrge=50;  //customizable choices
var drag=false, x,y, newpos, curpos='', md=document.getElementById('movedv');
var obstyle,  ofntsz, bdsz, newbdr;
md.style.filter="alpha(opacity="+opac+")";

function startdrag() {
var obj=window.event.srcElement;
if(obj!=document.body && obj.id.charAt(0)=='t' && obj.id.charAt(2)=='r'){
var tnum=obj.id.charAt(1); tels[tnum]-=1;
  for(i=1;i<=tels[tnum]+1;i++){if(obj.id.substring(3)<i){document.getElementById('t'+tnum+'r'+i).id='t'+tnum+'r'+(i-1);}}
md.innerHTML=obj.outerHTML; md.style.display='inline'; md.style.left=x; md.style.top=y;
md.style.width=document.getElementById('t'+obj.id.charAt(1)).clientWidth;
document.getElementById(obj.id).id='n'+document.getElementById(obj.id).id;
obj.outerHTML='';
obj=document.getElementById('t'+tnum);
if(obj.innerHTML==''){obj.innerHTML='&nbsp;';}
drag=true;newpos='';
}
}

function dragrow(){
newpos=''; document.body.style.cursor=cStyle;
  var cid=md.innerHTML; var pos=cid.indexOf('id=')+3; cid=cid.substring(pos,cid.indexOf(' ',pos));
md.style.left=x; md.style.top=y; status=x+','+y;
for(i=1;i<tels.length;i++){
  cpr=document.getElementById('tbl'+i);
  if(tels[i]!=0 && x>cpr.offsetLeft-tblrge && x<cpr.offsetLeft+cpr.clientWidth+tblrge){
    var cr=document.getElementById('t'+i+'r1'), ch=cr.clientHeight, ct=cr.offsetTop+bdsz+cpr.offsetTop;
    var t=ct-ch/2, b=ct+ch/2;
    if(y>t&&y<b&&cid!=cr.id){newpos='t'+i+'r1';restore();curpos=newpos;}
    if(newpos==''){
    var cr=document.getElementById('t'+i+'r'+tels[i]), ch=cr.clientHeight, ct=cr.offsetTop+bdsz+cpr.offsetTop;
    var t=ct+ch/2, b=ct+ch+ch/2;
    if(y>t&&y<b&&cid!=cr.id){newpos='t'+i+'rE';restore();curpos='!t'+i+'r'+tels[i];}}
   if(newpos==''){
    for(j=2;j<=tels[i];j++){
    var cr=document.getElementById('t'+i+'r'+j), pr=document.getElementById('t'+i+'r'+(j-1));
    var ch=cr.clientHeight, ph=pr.clientHeight, ct=cr.offsetTop+bdsz+cpr.offsetTop;
    var t=ct-ph/2, b=ct+ch/2;
    if(y>t&&y<b&&cid!=cr.id){newpos='t'+i+'r'+j;restore();curpos=newpos;}}}}
  else{
    var ct=cpr.offsetTop+bdsz;
    var t=ct-emptrange, b=ct+emptrange;
    if(y>t&&y<b){newpos='t'+i;restore();curpos=newpos;}}}
if(newpos==''){restore();}
else{
  if(newpos.indexOf('r')==-1){
    document.getElementById(newpos).style.backgroundColor=actClr;
  }else if(newpos.charAt(3)!='E'){
    document.getElementById(newpos).style.borderTop=newbdr;
  }else{
    document.getElementById(newpos.substring(0,newpos.length-1)+tels[newpos.charAt(1)]).style.borderBottom=newbdr;
}}}

function restore(){
    var obj=document.getElementById(curpos), obj2=document.getElementById(curpos.substring(1));
    if(curpos.indexOf('r')==-1&&obj){obj.style.backgroundColor='white';}
    else if(curpos.charAt(0)!='!'&&obj){obj.style.borderTop=obstyle;}
    else if(curpos.charAt(0)=='!'&&obj2){obj2.style.borderBottom=obstyle;}}

function chkStop(){
if(newpos==''){
  alert('Out of Range!');
  newpos=md.innerHTML; var pos=newpos.indexOf('id=n')+4; newpos=newpos.substring(pos,newpos.indexOf(' ',pos));
  if(newpos.substring(3)>tels[newpos.charAt(1)]){newpos=newpos.substring(0,3)+'E';}}
stopdrag();
}

function stopdrag(){
drag=false; md.style.display='none'; var tnum=newpos.charAt(1);
var obj=document.getElementById('t'+tnum), newid=newpos.substring(3);
  if(newpos.indexOf('r')==-1){obj.innerHTML='';newid=1;}
  if(newid=='E'){newid=tels[tnum]+1;}
var newstr=md.innerHTML; var pos=newstr.indexOf('id=n')+4;
newstr=newstr.substring(0,pos)+'t0r'+newid+newstr.substring(newstr.indexOf(' ',pos));
  if(newpos.charAt(3)=='E'){obj.innerHTML+=newstr;}
  else{
   var insertpos=obj.innerHTML.indexOf(newpos);
   insertpos=obj.innerHTML.toLowerCase().lastIndexOf('<div',insertpos);
   newstr=obj.innerHTML.substring(0,insertpos)+newstr+obj.innerHTML.substring(insertpos-1);
   obj.innerHTML=newstr;}
for(i=tels[tnum];i>=1;i--){
if(newid<=i){
document.getElementById('t'+tnum+'r'+i).id='t'+tnum+'r'+(i+1);}}
document.getElementById('nt0r'+newid).id='t'+tnum+'r'+newid;
if(curpos.charAt(0)!='!'){curpos=curpos.substring(0,3)+(curpos.substring(3)*1+1);}
tels[tnum]+=1; restore(); document.body.style.cursor='auto';}

function init(){
bdsz=parseInt(document.styleSheets[0].rules[1].style.borderWidth);
newbdr=actClr+' '+bdsz+'px '+document.styleSheets[0].rules[1].style.borderStyle;
document.getElementById('tbl1').style.width=document.getElementById('tbl1').clientWidth+bdsz*2;
document.getElementById('tbl2').style.width=document.getElementById('tbl2').clientWidth+bdsz*2;
ofntsz=document.styleSheets[0].rules[0].style.fontSize;
obstyle=document.styleSheets[0].rules[0].style.border;}
</script>

<body onLoad=init(); onMouseDown="startdrag();" onMouseUp="if(drag){chkStop();}"
onMouseMove="x=event.x;y=event.y;window.status=x+','+y;if(drag){dragrow();}">

<table cellspacing=0 cellpadding=0 class='tbl' id='tbl1'>
<tr><td id='t1' class='td'>
<div class='tr' style="background-color:#e2ecff" id='t1r1'>Table 1 Row 1</div>
<div class='tr' style="background-color:#e2ecff" id='t1r2'>Table 1 Row 2</div>
<div class='tr' style="background-color:#e2ecff" id='t1r3'>Table 1 Row 3</div>
</td></tr></table>
<br>
<table cellspacing=0 cellpadding=0 class='tbl' id='tbl2'>
<tr><td id='t2' class='td'>
<div class='tr' style="background-color:#ffddee" id='t2r1'>Table 2 Row 1</div>
<div class='tr' style="background-color:#ffddee" id='t2r2'>Table 2 Row 2</div>
<div class='tr' style="background-color:#ffddee" id='t2r3'>Table 2 Row 3</div>
</td></tr></table>
</body>
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10932854
Actually that uses divs to simulate tables. Would you prefer to use tables instead?
0
 

Author Comment

by:hykc
ID: 10934770
hi lil puffball,

I'm just reading your post, so I haven't try your code yet
the layout of my page is here http://www.cweb.com.hk/demos/test/v4/en/test.asp?story_id=71
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10934895
Wow! That's an adorable site! I'll adapt my code to the tables. :) I have to get going soon though, so I probably won't get around to replying till tomorrow...
0
 
LVL 35

Expert Comment

by:[ fanpages ]
ID: 10936065
Hi  lil_puffball,

I tried your code out & kept receiving "Out of Range!" errors when moving the table element cells around, and sometimes even just holding down my mouse button, not moving the pointer, and just releasing the button again.

I think that perhaps you need a check to ensure that the mouse up event is over the alternate table structure before processing accordingly.

BFN,

fp.
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 12

Accepted Solution

by:
lil_puffball earned 300 total points
ID: 10944199
fanpages, I don't know what browser you are using, it works fine on my computer.

hykc, here is the script incorporated into your code, hope it's what you're looking for. :)
(You can remove the <base href> tag if you're uploading right to the server)

=========================================
STARTING CODE
=========================================

<base href="http://www.cweb.com.hk/demos/test/v4/en/">


<HTML>
<HEAD>
<TITLE>"Book Works" Reading Site</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<script language=JavaScript src="../js/js.js"></script>
<script language="JavaScript">
var total_sentense=5;
var right_sentense=5;
var count_sentense=0;
var org_arr = new Array()
org_arr[1] ="1";
org_arr[2] ="2";
org_arr[3] ="3";
org_arr[4] ="4";
org_arr[5] ="5";



function changeColor(obj, d)
{

      if (d == "L")
      {
            rowCount = total_sentense;
      }
      else if (d == "R")
      {
            rowCount = right_sentense;
      }
      for (i=1; i<=rowCount; i++)
      {
            LStatus = eval("document.forms[0]."+ d + "Status"+i+".value");
            if (LStatus == 0)
            {
                  eval ("var el = document.getElementById('" + d + i + "')");
            //el.style.backgroundColor = 'white';
            //eval("document.forms[0].LStatus"+i+".value = 0;");
            }
      }
      //var el = document.getElementById(obj);
      
     var e = document.getElementById(d+obj);
       LStatus = eval("document.forms[0]."+d+"Status"+obj+".value");

       eval("document.forms[0]."+d+"Selected.value = obj");

       if (LStatus ==0)
       {
                   if (d =="R")
                  {
                        var a = document.getElementById('RP'+ obj);
                        var temp = a.childNodes[0].nodeValue;
                        //alert(temp.length);
                        if (temp.length >1)
                        {
                              //e.style.backgroundColor = 'red';
                        }
                  }
                  else
                  {
                      if(document.getElementById)
                        {
                      //e.style.backgroundColor = 'red';
                          }
                 }
      
             }
             if (d == "L")
            {

                  insertText();
            }
            else if (d == "R")
            {

                  removeText();
            }

}
function insertText()
{
var pos;
var temp;
if (document.forms[0].haveTarget.value == 1)
{
      haveTarget = false;
}
else
{
      haveTarget = false;
}

if (document.forms[0].LSelected.value != "")
{
      sen_no = eval("document.forms[0].right_target"+document.forms[0].LSelected.value+".value");
      sen_right_loc = eval("document.forms[0].s"+sen_no+".value");

      for (i=1; i<=right_sentense; i++)
      {
            var e = document.getElementById('RP'+ i);
            temp = e.childNodes[0].nodeValue;
            
            if (temp.length == 1)
            {
                  pos = i;
                  break;
            }
            //alert(e.childNodes[0].nodeValue);
      }
      
      LSelected = document.forms[0].LSelected.value;
if (haveTarget)
{      
      RTarget = eval("document.forms[0].right_target"+LSelected+".value");
}
      LStatus = eval("document.forms[0].LStatus"+LSelected+".value");

      if (LStatus == 0)
      {
            if (haveTarget)
            {

                  document.getElementById('RP' + RTarget).childNodes[0].nodeValue = eval("document.forms[0].LValue"+LSelected+".value");
                  eval("document.forms[0].RValue" + RTarget+".value=document.forms[0].LValue"+LSelected+".value");
            }
            else
            {
                  if (sen_right_loc == "")
                  {

                  document.getElementById('RP' + pos).childNodes[0].nodeValue = eval("document.forms[0].LValue"+LSelected+".value");
                  //eval("document.forms[0].LStatus"+LSelected+".value=1");
                  eval("document.forms[0].RValue" + pos+".value=document.forms[0].LValue"+LSelected+".value");
                  eval("document.forms[0].LLoc"+pos+".value="+LSelected);
                  eval("document.forms[0].s"+sen_no+".value="+pos);
                  
                  }
                  else
                  {

                  document.getElementById('RP' + sen_right_loc).childNodes[0].nodeValue = eval("document.forms[0].LValue"+LSelected+".value");
                  //eval("document.forms[0].LStatus"+LSelected+".value=1");
                  eval("document.forms[0].RValue" + sen_right_loc+".value=document.forms[0].LValue"+LSelected+".value");
                  eval("document.forms[0].LLoc"+sen_right_loc+".value="+LSelected);
                  
                  }
            }
      //document.getElementById('L'+LSelected).style.backgroundColor = "#999999";
      //el.style.backgroundColor = 'white';
      count_sentense++;
      }
}
}

function removeText()
{
var pos;
var temp;
if (document.forms[0].haveTarget.value == 1)
{
      haveTarget = true;
}
else
{
      haveTarget = false;
}

if (document.forms[0].RSelected.value != "")
{
      for (i=1; i<=right_sentense; i++)
      {
            var e = document.getElementById('RP'+ i);
            temp = e.childNodes[0].nodeValue;
            
            if (temp.length == 1)
            {
                  pos = i;
                  break;
            }
            //alert(e.childNodes[0].nodeValue);
      }
      RSelected = document.forms[0].RSelected.value;
      RStatus = eval("document.forms[0].RStatus"+RSelected+".value");
      LLoc = eval("document.forms[0].LLoc"+RSelected+".value");

      if (RStatus == 0)
      {
      document.getElementById('RP' + RSelected).childNodes[0].nodeValue = " ";
      eval("document.forms[0].RStatus"+RSelected+".value=0");
      //document.getElementById('L'+LLoc).style.backgroundColor = "white";
      //document.getElementById('R'+RSelected).style.backgroundColor = "white";
      if (!haveTarget)
      {
      eval("document.forms[0].LStatus"+LLoc+".value = 0");
      }

      count_sentense++;

      }
}
}

function checkField()
{

var result="pass";
var errNo = 0;
for (i=1; i<=right_sentense; i++)
{
      var e = document.getElementById('RP'+ i);
      temp = e.childNodes[0].nodeValue;
            
      if (temp.length == 1)
      {
            errNo = 1;
            break;
      }
}


if (errNo == 0)
{
      for (i=1; i<org_arr.length; i++)
      {

            newStr = org_arr[i].split("|");
            if (newStr.length == 1)
            {
                   if (newStr[0] != eval("document.forms[0].LLoc"+i+".value"))
                  {
                              result = "fail";
                              errNo = 3;
                        break;
                  }
            }
            else if (newStr.length > 1)
            {
                  for (j=0; j< newStr.length; j++)
                  {
                        //alert(newStr[j]);
                        //alert(eval("document.forms[0].LLoc"+i+".value"));
                        if (newStr[j] == eval("document.forms[0].LLoc"+i+".value"))
                        {
                              result = "pass";
                              errNo = 0;
                              break;
                        }
                        else
                        {
                              errNo = 3;
                        }
                  }
            }
      }
}

if (errNo == 1)
{
      alert("Please complete the story, thanks!");
      document.location.href = window.location + "#top";
}
else if (errNo == 3)
{
      alert("The sequence is incorrect, please try again!");
      for (i=1; i<=right_sentense; i++)
      {
            document.getElementById('RP' + i).childNodes[0].nodeValue = "\u00A0";
            eval("document.forms[0].LLoc"+i+".value=''");
            eval("document.forms[0].RValue"+i+".value=''");
            eval("document.forms[0].RStatus"+i+".value=0");
            eval("document.forms[0].s"+i+".value=''");
            //document.getElementById('RP' + i).childNodes[0].nodeValue = "\u00A0";
      }
      document.location.href = window.location + "#top";
}
else if (errNo ==0)
{
      document.forms[0].submit_act.value ="Submit";
      return true;
}
return false;
      
      //return true;
}
</script>
<link href="style.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY background="../images/bg.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('../images/en/finish_over.gif','../images/en/top_emb_over.gif','../images/en/top_cd_over.gif','../images/en/top_rtl_over.gif','../images/en/top_b5_over.gif','../images/en/top_gb_over.gif','../images/en/top_entext_over.gif','../images/en/top_menu_over.gif','../images/en/top_acct.gif','../images/en/top_menu.gif','../images/en/top_acct_over.gif')">
<form name="form1" method="post" action="st_01c.asp">
<input type="hidden" name="story_id" value="71">
<input type="hidden" name="total_sentence" value="5">
<input type="hidden" name="title" value="Inventor Sir Thomas Alva Edison">
<input type="hidden" name="org_sequence" value="12345">
<input type="hidden" name="new_sequence">
<input type="hidden" name="submit_act">
<input type=hidden name=s1>
<input type=hidden name=s2>
<input type=hidden name=s3>
<input type=hidden name=s4>
<input type=hidden name=s5>
<div id="divmenu1" style="position:absolute; left:487px; top:79px; width:130px; z-index:1; background-color: #FFFF74; layer-background-color: #FFFF74; border: 1px none #000000; visibility: hidden;"onMouseOut="cmenu('divmenu1');" onMouseOver="MM_swapImage('top_menu','','../images/en/top_menu_over.gif','top_acct','','../images/en/top_acct.gif',1);smenu('divmenu1');">
  <table width="130" border="0" cellspacing="5" cellpadding="0">
    <!--<tr>
      <td width="5" rowspan="8" class="divmenu">&nbsp;</td>
      <td width="130" class="divmenu"><a href="rs_home.asp" class="divmenu">Reading
        Strategies</a></td>
    </tr>
    <tr>
      <td class="divmenu"><a href="ik_home.asp" class="divmenu">I know how to...</a></td>
    </tr>-->
      
    <tr>
      <td class="divmenu"><a href="ru_home.asp" class="divmenu">Reading
        Union</a></td>
    </tr>
    <tr>
      <td class="divmenu"><a href="st_home.asp" class="divmenu">Story
        Train</a></td>
    </tr>
    <tr>
      <td class="divmenu"><a href="ga_home.asp" class="divmenu">Games</a></td>
    </tr>
    <tr>
      <td class="divmenu"><a href="nw_home.asp" class="divmenu">News</a></td>
    </tr>
      
    <tr>
      <td class="divmenu"><a href="tr_home.asp" class="divmenu">Teachers'
        Resources </a></td>
    </tr>
      
  </table>
</div>
<div id="divmenu2" style="position:absolute; left:570px; top:79px; width:124px; z-index:2; background-color: #FFFF74; layer-background-color: #FFFF74; border: 1px none #000000; visibility: hidden;"onMouseOut="cmenu('divmenu2');" onMouseOver="MM_swapImage('top_menu','','../images/en/top_menu.gif','top_acct','','../images/en/top_acct_over.gif',1);smenu('divmenu2');">

  <table width="124" border="0" cellspacing="5" cellpadding="0">
    <tr>
      <td width="1" rowspan="2" class="divmenu">&nbsp;</td>
      <td width="125" class="divmenu"><a href="lgn_login.asp" class="divmenu">Login</a></td>
    </tr>
    <tr>
      <td class="divmenu"><a href="lgn_reminder_01.asp" class="divmenu">Password</a></td>
    </tr>
  </table>

</div>
<a name="top"></a>
<table width="760" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top"><table width="760" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="225"><img src="../images/spacer.gif" width="225" height="1"></td>
          <td width="155"><img src="../images/spacer.gif" width="155" height="1"></td>
          <td width="280"><img src="../images/spacer.gif" width="280" height="1"></td>
          <td width="100"><img src="../images/spacer.gif" width="100" height="1"></td>
          <td width="100"><img src="../images/spacer.gif" width="1" height="1"></td>
        </tr>
        <tr>
          <td width="225" rowspan="3"><a href="javascript:;"><img src="../images/en/logo.gif" alt="Book Works &#57768;&#57713;&#59265;" name="logo" width=225 height=80 border="0" id="logo"></a></td>
          <td width="155" rowspan="3"><img src="../images/en/section_storytrain.gif" alt="Story Train" width="155" height="80"></td>
          <td width="280" height="30" bgcolor="#FFD059"><img src="../images/top_03.gif" alt="*" width=38 height=30><a href="javascript:;" onMouseOver="MM_swapImage('top_emb','','../images/en/top_emb_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/en/top_emb.gif" alt="EMB" name="top_emb" width=30 height=30 border="0" id="top_emb"></a><a href="javascript:;" onMouseOver="MM_swapImage('top_cd','','../images/en/top_cd_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/en/top_cd.gif" alt="Curriculum Development" name="top_cd" width=120 height=30 border="0" id="top_cd"></a><a href="javascript:;" onMouseOver="MM_swapImage('top_rtl','','../images/en/top_rtl_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/en/top_rtl.gif" alt="Reading to Learn" name="top_rtl" width=90 height=30 border="0" id="top_rtl"></a></td>
          <td width="100" rowspan="4" align="center" background="../images/top_07.gif">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="100" height="115">
<param name="movie" value="../pets/a1_1.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="../pets/a1_1.swf" wmode="transparent" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="115"></embed></object>
          </td>
          <td><img src="../images/spacer.gif" width="1" height="30"></td>
        </tr>
        <tr>
          <td height="20"><img src="../images/top_08.gif" alt="*" width=280 height=20></td>
          <td width="110"><img src="../images/spacer.gif" width="1" height="20"></td>
        </tr>
        <tr>
          <td><a href="../index.asp?id=b5" onMouseOver="MM_swapImage('top_b5','','../images/en/top_b5_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/en/top_b5.gif" alt="traditional Chinese" name="top_b5" width=35 height=30 border="0" id="top_b5"></a><a href="javascript:;" onMouseOver="MM_swapImage('top_gb','','../images/en/top_gb_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/en/top_gb.gif" alt="simplified Chinese" name="top_gb" width="28" height="30" border="0" id="top_gb"></a><a href="javascript:;" onMouseOver="MM_swapImage('top_entext','','../images/en/top_entext_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/en/top_entext.gif" alt="text only" name="top_entext" width=44 height=30 border="0" id="top_en"></a><a href="javascript:;"  onMouseOut="cmenu('divmenu1');" onMouseOver="MM_swapImage('top_menu','','../images/en/top_menu_over.gif','top_acct','','../images/en/top_acct.gif',1);smenu('divmenu1');"><img src="../images/en/top_menu.gif" alt="main menu" name="top_menu" width=83 height=30 border="0" id="top_menu"></a><a href="javascript:;"  onMouseOut="cmenu('divmenu2');" onMouseOver="MM_swapImage('top_menu','','../images/en/top_menu.gif','top_acct','','../images/en/top_acct_over.gif',1);smenu('divmenu2');"><img src="../images/en/top_acct.gif" alt="my profile" name="top_acct" width=90 height=30 border="0" id="top_acct"></a></td>
          <td width="110"><img src="../images/spacer.gif" width="1" height="30"></td>
        </tr>
        <tr>
          <td height="35" colspan="3" valign="top" background="../images/grass.gif" bgcolor="#B1FF5C">
            <table width="660" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="599"><table border="0" cellspacing="0" cellpadding="0">
        <tr>
                <td><a href="st_01a.asp"><img src="../images/en/st_menu_01-now.gif" alt="Story Reorganize" width="143" height="28" border="0"></a></td>
                <td><a href="st_02a.asp"><img src="../images/en/st_menu_02.gif" alt="Ending Rewrite" width="119" height="28" border="0"></a></td>
                <td><a href="st_03a.asp"><img src="../images/en/st_menu_03.gif" alt="Story Continuation" width="153" height="28" border="0"></a></td>
  </tr>
            </table></td>
                <td width="61"><a href="javascript:;"><img src="../images/en/return.gif" alt="return" width=61 height=24 border="0"></a></td>
              </tr>
            </table>
          </td>
          <td width="110"><img src="../images/spacer.gif" width="1" height="35"></td>
        </tr>
      </table>
      <TABLE WIDTH=760 BORDER=0 CELLPADDING=0 CELLSPACING=0>
        <TR>
          <TD COLSPAN=2 ROWSPAN=2> <IMG SRC="../images/en/st_01b_01.gif" alt="Story Reorganize" WIDTH=150 HEIGHT=133></TD>
          <TD COLSPAN=2 ROWSPAN=2> <IMG SRC="../images/st_01b_02.gif" WIDTH=234 HEIGHT=133></TD>
          <TD background="../images/grass.gif">&nbsp; </TD>
          <TD> <IMG SRC="../images/st_01b_05.gif" WIDTH=14 HEIGHT=24></TD>
        </TR>
        <TR>
          <TD COLSPAN=2> <IMG SRC="../images/en/st_01b_06.gif" alt="Choose pieces from the left hand column and move them to the right hand column (by double mouse click) in correct order. Note: Only one piece from each color should be chosen. All colors shown on the left hand column should be presented in your completed story. " WIDTH=376 HEIGHT=109></TD>
        </TR>
        <TR>
          <TD valign="top"> <IMG SRC="../images/st_01b_07.gif" WIDTH=15 HEIGHT=100></TD>
          <TD COLSPAN=2 valign="top"> <TABLE WIDTH=354 BORDER=0 CELLPADDING=0 CELLSPACING=0>
              <TR>
                <TD height="10"> <IMG SRC="../images/fr/fr_gw_l_00.gif" WIDTH=4 HEIGHT=10></TD>
                <TD> <IMG SRC="../images/fr/fr_gw_top.gif" WIDTH=345 HEIGHT=10></TD>
                <TD> <IMG SRC="../images/fr/fr_gw_r_00.gif" WIDTH=5 HEIGHT=10></TD>
              </TR>
              <TR>
                <TD height="100%" valign="top" background="../images/fr/fr_gw_l_bg.gif"><IMG SRC="../images/fr/fr_gw_l_01.gif" WIDTH=4 HEIGHT=34><br>
                  <IMG SRC="../images/fr/fr_gw_fr_gw_07.gif" WIDTH=4 HEIGHT=96></TD>
                <TD valign="top" bgcolor="#EAFFCE"> <table width="100%" border="0" cellpadding="0" cellspacing="10">
                    <tr>
                      <td>

<table width="100%" border="0" cellspacing="1" cellpadding="3"><input type="hidden" name="haveTarget" value="1"><input type="hidden" name="LSelected" value="">

<tr><td  onmousedown="startDrag(this);" width="50%" bgcolor=#D9D9FF class="normal" id="L5"><input type="hidden" name="right_target5" value="5"><input type="hidden" name="LValue5" value="In 1931, Edison died at the age of 84."><input type="hidden" name="LStatus5" value="0"><p id="LP5" unselectable=on>In 1931, Edison died at the age of 84.</p></td></tr>
<tr><td  onmousedown="startDrag(this);" width="50%" bgcolor=#C4ECFF class="normal" id="L4"><input type="hidden" name="right_target4" value="4"><input type="hidden" name="LValue4" value="Edison had more than 2000 inventions including telegraph repeater, phonograph recorder and electric light bulb. "><input type="hidden" name="LStatus4" value="0"><p id="LP4" unselectable=on>Edison had more than 2000 inventions including telegraph repeater, phonograph recorder and electric light bulb. </p></td></tr>
<tr><td  onmousedown="startDrag(this);" width="50%" bgcolor=#D1FFD0 class="normal" id="L3"><input type="hidden" name="right_target3" value="3"><input type="hidden" name="LValue3" value="Edison worked very hard. We would think carefully and start again when he failed. "><input type="hidden" name="LStatus3" value="0"><p id="LP3" unselectable=on>Edison worked very hard. We would think carefully and start again when he failed. </p></td></tr>
<tr><td  onmousedown="startDrag(this);" width="50%" bgcolor=#FFDDDD class="normal" id="L1"><input type="hidden" name="right_target1" value="1"><input type="hidden" name="LValue1" value="In 1847, Edison was born in America."><input type="hidden" name="LStatus1" value="0"><p id="LP1" unselectable=on>In 1847, Edison was born in America.</p></td></tr>
<tr><td  onmousedown="startDrag(this);" width="50%" bgcolor=#FFFFB5 class="normal" id="L2"><input type="hidden" name="right_target2" value="2"><input type="hidden" name="LValue2" value="When Edison was a child, he read a lot of books and learned new things around him. "><input type="hidden" name="LStatus2" value="0"><p id="LP2" unselectable=on>When Edison was a child, he read a lot of books and learned new things around him. </p></td></tr>


                         <!-- <tr>
                            <td width="50%" bgcolor="#D9D9FF" class="normal">Story
                              in english, Story in english, Story in english,
                              Story in english, Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#C4ECFF" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#FFDDDD" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#FFFFB5" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#D1FFD0" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#FFFFB5" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#C4ECFF" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#FFDDDD" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#D1FFD0" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#D9D9FF" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>-->
                        </table></td>
                    </tr>
                  </table></TD>
                <TD valign="top" background="../images/fr/fr_gw_r_bg.gif"><IMG SRC="../images/fr/fr_gw_r_01.gif" WIDTH=5 HEIGHT=34><br>
                  <IMG SRC="../images/fr/fr_gw_r_02.gif" WIDTH=5 HEIGHT=96></TD>
              </TR>
              <TR bgcolor="#EAFFCE">
                <TD height="9" COLSPAN=3><IMG SRC="../images/fr/fr_gt_bttm.gif" WIDTH=354 HEIGHT=9></TD>
              </TR>
            </TABLE></TD>
          <TD valign="top"> <IMG SRC="../images/st_01b_09.gif" WIDTH=15 HEIGHT=100></TD>
          <TD valign="top"> <TABLE WIDTH=362 BORDER=0 CELLPADDING=0 CELLSPACING=0>
              <TR>
                <TD height="10"> <IMG SRC="../images/fr/fr_ow_l_00.gif" WIDTH=4 HEIGHT=10></TD>
                <TD> <IMG SRC="../images/fr/fr_ow_top.gif" WIDTH=353 HEIGHT=10></TD>
                <TD> <IMG SRC="../images/fr/fr_ow_r_00.gif" WIDTH=5 HEIGHT=10></TD>
              </TR>
              <TR>
                <TD height="100%" valign="top" background="../images/fr/fr_ow_l_bg.gif"><IMG SRC="../images/fr/fr_ow_l_01.gif" WIDTH=4 HEIGHT=34><br>
                  <IMG SRC="../images/fr/fr_ow_fr_ow_07.gif" WIDTH=4 HEIGHT=96></TD>
                <TD valign="top"> <table width="100%" border="0" cellpadding="0" cellspacing="10" bgcolor="#FFE5A3">
                    <tr>
                      <td class="title"><strong>Inventor Sir Thomas Alva Edison</strong></td>
                    </tr>
                  </table>
                  <table width="100%" border="0" cellpadding="0" cellspacing="10">
                    <tr>
                      <td>

<table width="100%" border="0" cellspacing="1" cellpadding="3"><input type="hidden" name="RSelected" value="">

<tr><td width="50%"  class="normal" id="R1"><input type="hidden" name="RValue1" value=""><input type="hidden" name="RStatus1" value="0"><input type="hidden" name="LLoc1"  value=""><p id="RP1">&nbsp;</p></td></tr><tr><td heigh=5 align=center><img src=../images/dotted_line.gif width=320></td></tr>
<tr><td width="50%"  class="normal" id="R2"><input type="hidden" name="RValue2" value=""><input type="hidden" name="RStatus2" value="0"><input type="hidden" name="LLoc2"  value=""><p id="RP2">&nbsp;</p></td></tr><tr><td heigh=5 align=center><img src=../images/dotted_line.gif width=320></td></tr>
<tr><td width="50%"  class="normal" id="R3"><input type="hidden" name="RValue3" value=""><input type="hidden" name="RStatus3" value="0"><input type="hidden" name="LLoc3"  value=""><p id="RP3">&nbsp;</p></td></tr><tr><td heigh=5 align=center><img src=../images/dotted_line.gif width=320></td></tr>
<tr><td width="50%"  class="normal" id="R4"><input type="hidden" name="RValue4" value=""><input type="hidden" name="RStatus4" value="0"><input type="hidden" name="LLoc4"  value=""><p id="RP4">&nbsp;</p></td></tr><tr><td heigh=5 align=center><img src=../images/dotted_line.gif width=320></td></tr>
<tr><td width="50%"  class="normal" id="R5"><input type="hidden" name="RValue5" value=""><input type="hidden" name="RStatus5" value="0"><input type="hidden" name="LLoc5"  value=""><p id="RP5">&nbsp;</p></td></tr>

                          <!--<tr>
                            <td width="50%" bgcolor="#FFDDDD" class="normal">Story
                              in english, Story in english, Story in english,
                              Story in english, Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#FFFFB5" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#D1FFD0" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#C4ECFF" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>
                          <tr>
                            <td bgcolor="#D9D9FF" class="normal">Story in english,
                              Story in english, Story in english, Story in english,
                              Story in english.</td>
                          </tr>-->
                        </table></td>
                    </tr>
                  </table></TD>
                <TD valign="top" background="../images/fr/fr_ow_r_bg.gif"><IMG SRC="../images/fr/fr_ow_r_01.gif" WIDTH=5 HEIGHT=34><br>
                  <IMG SRC="../images/fr/fr_ow_r_02.gif" WIDTH=5 HEIGHT=96></TD>
              </TR>
              <TR>
                <TD height="9" COLSPAN=3><IMG SRC="../images/fr/fr_ow_bttm.gif" WIDTH=362 HEIGHT=9></TD>
              </TR>
            </TABLE></TD>
          <TD valign="top"> <IMG SRC="../images/st_01b_11.gif" WIDTH=14 HEIGHT=100></TD>
        </TR>
        <TR>
          <TD> <IMG SRC="../images/spacer.gif" WIDTH=15 HEIGHT=1></TD>
          <TD> <IMG SRC="../images/spacer.gif" WIDTH=135 HEIGHT=1></TD>
          <TD> <IMG SRC="../images/spacer.gif" WIDTH=219 HEIGHT=1></TD>
          <TD> <IMG SRC="../images/spacer.gif" WIDTH=15 HEIGHT=1></TD>
          <TD> <IMG SRC="../images/spacer.gif" WIDTH=301 HEIGHT=1></TD>
          <TD> <IMG SRC="../images/spacer.gif" WIDTH=14 HEIGHT=1></TD>
        </TR>
      </TABLE>
      <table width="760" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="right"><a href="javascript:document.forms[0].submit();"  onclick="return checkField();" onMouseOver="MM_swapImage('finish','','../images/en/finish_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="../images/en/finish.gif" alt="finish" name="finish" width="51" height="51" hspace="15" vspace="5" border="0" id="finish"></a></td>
        </tr>
        <tr>
          <td height="50">&nbsp;</td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td height="45"><table width="760" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="90" height="28"><img src="../images/spacer.gif" width="90" height="40"></td>
    <td width="580" align="center" class="bttmmenu"> <a href="javascript:;">Home</a> |  
      <a href="javascript:;">Reading
        Union</a> |       <a href="javascript:;">Story Train</a> | <a href="javascript:;">Game</a> | <a href="javascript:;">News </a> | <a href="javascript:;">Teachers'
                  Resources <br>
                  </a><a href="javascript:;">Login</a> | <a href="javascript:;">Forgot
                  Password</a> </td>
    <td width="90" rowspan="2" valign="bottom"><a href="#top"><img src="../images/en/bttm_totop.gif" width="90" height="33" border="0"></a></td>
  </tr>
  <tr>
    <td height="5" colspan="2"><img src="../images/bttm_bg.gif" width="670" height="5"></td>
  </tr>
</table>
</td>
  </tr>
</table>
</form>
</BODY>
</HTML>


<script>
var range=20,numRows=5,pre="R";
var drag=false,obj=null,offL,offT,oldL,oldT,td;

var layersRecord=new Array();

if(document.layers){
document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove=captureMouse;
document.onmouseup=function(){if(obj){endDrag();}}

function startDrag(srcEl){
  document.body.style.cursor="move";
  //set the object
  td=srcEl;
  //get position
  oldL=getLeft(srcEl);
  oldT=getTop(srcEl);
  //create div
  obj=document.createElement("div");
  obj.style.position="absolute";
  obj.style.left=oldL;
  obj.style.top=oldT;
  obj.style.width=td.offsetWidth;
  obj.style.height=td.offsetHeight;
  obj.innerHTML="<table width=\"100%\" border=\"0\" cellspacing=\"1\" cellpadding=\"3\"><tbody><tr></tr></tbody></table>";
  obj.firstChild.firstChild.firstChild.appendChild(td.cloneNode(true));
  document.body.appendChild(obj);
  //calculate position of mouse compared to position of object
  offL=x-oldL;
  offT=y-oldT;
  //set drag to true
  drag=true;
}
function dragObj(){
  //change position of object
  obj.style.left=x-offL;
  obj.style.top=y-offT;
}
function endDrag(){
  document.body.style.cursor="default";
  //set drag to false
  drag=false;
  //snap
  snapToTarget();
  td=null;
  obj.parentNode.removeChild(obj);
  obj=null;
}
function getLeft(obj){var left=0;while(obj.offsetParent){left+=obj.offsetLeft;obj=obj.offsetParent;}return left;}
function getTop(obj){var top=0;while(obj.offsetParent){top+=obj.offsetTop;obj=obj.offsetParent;}return top;}

function captureMouse(e){
  if(document.all){
    x=window.event.x+document.body.scrollLeft;
    y=window.event.y+document.body.scrollTop;
  }else if(document.getElementById||document.layers){
    x=e.pageX;
    y=e.pageY;
  }
  if(drag){dragObj();}
}

function snapToTarget(){
  var target;
  for(var i=1;i<=numRows;i++){
    target=document.all?document.all[pre+i]:document.getElementById(pre+i);
    if(Math.abs(getLeft(obj)-getLeft(target))<=range&&Math.abs(getTop(obj)-getTop(target))<=range){
      target.parentNode.parentNode.insertBefore(td.parentNode.cloneNode(true),target.parentNode);
      td.parentNode.parentNode.insertBefore(target.parentNode,td.parentNode);
      td.parentNode.parentNode.removeChild(td.parentNode);
      return;
    }
  }
  alert('Please drag to a target.');
}
</script>

=========================================
ENDING CODE
=========================================
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10944241
By the way, you can change the variables at the top:

var range=20,numRows=5,pre="R";

"range" is the amount that the layer can go outside the right row and still be detected.
"numRows" is obvious. :P
"pre" is the prefix for all the cells on the right, e.g. right now the IDs are R1,R2,R3...

You can also drag cells from the right to left, in case you want to change your mind. :)
0
 

Author Comment

by:hykc
ID: 10945445
thanks puffball

this is a great script, I need to write a script to test the correct order now
it just has some problem on netscape 7,
when I drag from left to right, and release the leftclick button,  all the text is highlighted when i move the mouse
and sometimes the sentence layer won't disapper when I drag from left->right and vice vera

I need to study your code to learn how to do such thing , thanks
0
 

Author Comment

by:hykc
ID: 10945471
hi puffball,

i'm writiing a script to check the order now,
with your script how can I reverse the layer back the initial position?

Maybe I can do something like this, if the order is incorrect then refresh the page instead of using js to reposition it again.
0
 

Author Comment

by:hykc
ID: 10945954
hi puffball,


how can I get the value inside the left layer (the variable "target" inside snapToTarget??) ?
I need to pass the value to right hand side, e.g I have variable in left table "right_target1", "right_target2", etc
and I want to pass that value to right table RValue1 if I drop the sentence to row1 in right table. but I don't know how to access the value
0
 
LVL 35

Expert Comment

by:[ fanpages ]
ID: 10946695
Hi,

Re: "Out of Range!" errors

My browser is MS-IE 6.0.2800.1106 on Windows 2000 5.00.2195 Service Pack 3.

If you would like me to record a video of the 'action' and the resultant error to send to you, let me know.

BFN,

fp.
0
 

Author Comment

by:hykc
ID: 10946979
i can't work out how to check the correct order :(
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10953176
Hi hykc,

What I'm doing is completely switching the rows. So, you should give the table on the right an id, like rightTable.

Then, check if the cell IDs in rightTable are L1, L2, L3, L4, L5.

Here is some sample code:

function checkCorrect(){
  var tbl=document.getElementById("rightTable");
  for(i=0;i<=tbl.childNodes.length;i++){
    if(tbl.childNodes[i].firstChild.id!="L"+(i+1)){alert('Incorrect.');return false;}
  }
  alert('Correct Order!');
  return true;
}
0
 

Author Comment

by:hykc
ID: 10955513
hi puffball,

i tried your checkCorrect function and put ID=rightTable in the table on the right
and I put alert(tbl.childNodes[i].firstChild.id); inside the for loop, it returns me an empty alert box.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10955775
Oop, sorry, should be this:

function checkCorrect(){
  var tbl=document.getElementById("rightTable").firstChild;
  for(i=0;i<=tbl.childNodes.length;i++){
    if(tbl.childNodes[i].firstChild.id!="L"+(i+1)){alert('Incorrect.');return false;}
  }
  alert('Correct Order!');
  return true;
}
0
 

Author Comment

by:hykc
ID: 10955895
oh great,

it works now the for loop shoould be for(i=0;i<tbl.childNodes.length;i++)

also one last question, the sentence on left hand side table may be 2 choices
e.g
Left Table
-----------
sentence 1
sentence 2
sentence 2.1
sentence 3
sentence 3.1


so the table on the right will only have 3 rows, so should I just use the number of rows on left table on variable "numRows"
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10963601
Sorry for the delay...
Thanks for the points. :)
In answer to your question, just make it the number of row on the right.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now