JavaScript - Moving Image Through Table Cells

Hey.

so, I know how to add the row, and cells, I did that...except now I need to add properties to the cells (class, ID, onclick etc)...just wondering how I go about doing that.

Here is what I have so far:

Code:

function add_new_proj(){
	
	new_proj_id = prompt("What would you like the new Project Number to be?","xxx-xxxxx");
	
	var table=document.getElementById('projectDisplay').insertRow(1);//creates a var which adds one row to the table
	//the variables are finding the correct cell to enter the data into the new row (based on an array 0 based system)
	
	
	
	var projectID=table.insertCell(0);
	var ProjectName=table.insertCell(1);
	var Client=table.insertCell(2);
	var ClientProjectID=table.insertCell(3);
	var delete_cell=table.insertCell(4);
	
	
	projectID.innerHTML = new_proj_id;
	ProjectName.innerHTML ="";
	Client.innerHTML = "";
	ClientProjectID.innerHTML = "";
	delete_cell.innerHTML = "<span class='delete' id='$ProjKey-d' onclick='delete_edit_proj(\"ajax_modify_proj.php\",this.id)'> Delete </span>";
	
	
	
	
}

this is an example of what the cells look like (the ones that already exist, generated via PHP code):

PHP Code:
echo "<td class='projectTd' id='2tdName-$j' onclick='editTd(this.id);'> $ProjName </td>"; 


So yeah..I need the new cells to pretty much look like that >.< with a class, id, and onclick event.

any help would be great!

thanks

So I am using JavaScript to make a table on a page and what I want to do is have the JavaScript create the table, and then allow the user to fill it with data. I have been able to make the JavaScript create the table, my question is how to reference the cells in my script that adds data to the cell. I want the users to be able to click a button an add data into different cells so i figured giving them each an Id and referring to that Id in the button is the best way to do it.

How can I edit my code to give each cell a different Id? Or is there a better way of doing this?
My table code looks like this (i have filled it with random data so it is not just a blank table).

<code>
<script type="text/javaScript">
window.onload = fnInit;

function fnInit()
{
// Declare variables and create the header, footer, and caption.
var oTable = document.createElement("TABLE");
var oTHead = document.createElement("THEAD");
var oTBodyam = document.createElement("TBODY");
var oTBodypm = document.createElement("TBODY");
var oTFoot = document.createElement("TFOOT");
var oCaption = document.createElement("CAPTION");
var oRow, oCell;
var i, j;

// Declare stock data that would normally be read in from a stock Web site.
var heading = new Array();

heading[0] = "";
heading[1] = "Monday";
heading[2] = "Tuesday";
heading[3] = "Wednesday";
heading[4] = "Thursday";
heading[5] = "Friday";
var block = new Array();

block[0] = "8:30";
block[1] = "9:55";
block[2] = "11:20";
block[3] = "12:45";
block[4] = "2:10";
block[5] = "3:35";
block[6] = "5:00";
block[7] = "6:30";
var stock = new Array();

stock[0] = new Array(block[0],"88.625","85.50","85.81","99.54","55.46");
stock[1] = new Array(block[1],"102.75","97.50","100.063","49.54","55.46");
stock[2] = new Array(block[2],"56.125","54.50","55.688","99.54","55.46");
stock[3] = new Array(block[3],"71.75","69.00","69.00","99.54","55.46");
stock[4] = new Array(block[4],"71.75","69.00","69.00","99.54","55.46");
stock[5] = new Array(block[5],"71.75","69.00","69.00","99.54","55.46");
stock[6] = new Array(block[6],"71.75","69.00","69.00","99.54","55.46");
stock[7] = new Array(block[7],"71.75","69.00","69.00","99.54","55.46");

// Insert the created elements into oTable.
oTable.appendChild(oTHead);
oTable.appendChild(oTBodyam);
oTable.appendChild(oTBodypm);
oTable.appendChild(oTFoot);
oTable.appendChild(oCaption);

// Set the table's border width and colors.
oTable.border=1;
oTable.bgColor="lightslategray";

// Insert a row into the header and set its background color.
oRow = document.createElement("TR");
oTHead.appendChild(oRow);
oTHead.setAttribute("bgColor","lightskyblue");

// Create and insert cells into the header row.
for (i=0; i<heading.length; i++)
{
oCell = document.createElement("TH");
oCell.innerHTML = heading[i];
oRow.appendChild(oCell);
}

// Insert rows and cells into bodies.
for (i=0; i<stock.length; i++)
{
var oBody = (i<3) ? oTBodyam : oTBodypm;
oRow = document.createElement("TR");
oBody.appendChild(oRow);
for (j=0; j<stock[i].length; j++)
{
oCell = document.createElement("TD");
oCell.innerHTML = stock[i][j];
oRow.appendChild(oCell);
}
}
</code>

Hi, I'm having trouble with trying to access a selected value of a drop down menu in a table. I have menus in columns 3 and 4, named cred and grade respectively, from rows 2 onwards, and I'm using a function to access them. How do I access the value's for manipulating other variables?

Here is what I have so far:

Code:

function f(tableID){
    var len = document.getElementById(tableID).rows.length;
				
    for(var i = 1; i<len; i++){						
       var c = document.getElementById(tableID).rows[i].cells[2].childNodes[0];
        credits = c.options[c.selectedIndex].text; 
    }
}

Your help would be really appreciated

Hi

I am trying to make all the cells within a table droppable spaces, using the scriptaculous library. However I am not able to do so, and I am not certain why. The table cells are creating within the javascript. I then try to apply the droppables to the table cells through iteration, through the function when the document loads. It does not seem to be working. The document accesses an external php page and has inline php within a div element. I am uncertain if by having the draggable elements instantiated within the php script, that this would be causing any problem, as I cannot see how this would be, the php draggables all appear to be corresponding to the css in the document. Any help with the droppables would be appreciated. I have set up a css class hover, so that when the draggable passes over the droppable the edges of the droppable area should be turning blue, but this is not happening. Not sure what the problem is.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">

<HTML>
<HEAD>

  <META name="generator" content="Free Script Editor, see www.freescripteditor.com">

  <TITLE>Email Client</TITLE>
  <link rel="stylesheet" type="text/css" href="http://localhost/email/styles/style1.css"/>
  <script src="javascript/prototype.js" type="text/javascript"></script>
  <script src="javascript/scriptaculous.js" type="text/javascript"></script>
  <script src="javascript/dragdrop.js" type="text/javascript"></script>
  <script src="javascript/controls.js" type="text/javascript"></script>
  <script src="javascript/effects.js" type="text/javascript"></script>

  <script type="text/javascript">
  var xmlhttp = false;

  //check if we are using IE
  try {
       //If the javascript version is greater than 5.
       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
       alert ("You are using Microsoft Internet Explorer.");
       }
  catch(e)
        {
        //if not, then use the older active x object.
        try  {
        //if we are using Internet Explorer
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        alert("You are using Microsoft Internet Explorer");
              }
  catch (E)
         {
         xmlhttp = false;
         }
        }
        //If we are using a non-IE browser, crea a javascript instance of the object
        if(!xmlhttp && typeof XMLHttpRequest != 'undefined')
           {
           xmlhttp = new XMLHttpRequest();
           alert ("You are not using Microsoft Internet Explorer");
           }

        function getmessage(inbox_id)
                 {
                 var object = document.getElementById('content');
                 var server = "getmessage.php?inbox_id=" +inbox_id;
                 xmlhttp.open("GET", server);
                 xmlhttp.onreadystatechange = function()
                         {
                         if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
                            {
                            object.innerHTML = xmlhttp.responseText;
                            }
                         }
                 xmlhttp.send(null);
                 }
        

        function addTable()
                 {
                 var dv = document.getElementById("right");

                 var table = document.createElement("table");
                 var tbody = document.createElement("tbody");
                 var x = 0;
              
                 //create the table rows
                 for(var j =0; j <=2; j++)
                     {
                     var row = document.createElement("tr");

                     //create the table columns
                     for (var k =0; k<=4;k++)
                          {

                          x++;
                          var cell = document.createElement("td");
                          var celltext = document.createTextNode(x);
                          cell.appendChild(celltext);
                          cell.setAttribute("className", "droparea");
                          cell.setAttribute("id", "x");
                          row.appendChild(cell);

                          }
                 //add the row to the end of the table body
                 tbody.appendChild(row);
        }
        table.appendChild(tbody);
        dv.appendChild(table);
        table.setAttribute("className", "tbl");
        }

        document.observe("dom:loaded", function()
                 {
                 var dh;
                 var cells = document.getElementsByTagName('td');
                 for (var z = 0; z <= cells.length; z++)
                      {
                      dh = cells[z].getAttribute('id');
                      if(dh)
                         {
        Droppables.add('dh', {accept:'draggable', hoverclass: 'hover'});
                         }

                      }
                      });
 </script>

</HEAD>

<BODY onload="addTable()">
<div class="container" id="container">
<!--header div - for message 'new', 'reply' -->
<div class="header">
<script type="text/javascript" src="buttons/header_nav.js"></script>

</div>
<!-- end of header div-->

<!--Begin the div class left - this will hold the inbox emails for review-->
<div class="left">
<?PHP
include ($_SERVER['DOCUMENT_ROOT'].'\email\database_connect\connect.php');
$str = "id";
$i = 0;
$inbox_query = "select i.inbox_id, i.to, i.subject, i.sent, i.message from inbox as i";
$inbox_result = mysql_query($inbox_query);
while($row = mysql_fetch_array($inbox_result))
  {//start while trainer query
  $inbox_id = $row['0'];
  $to = $row['1'];
  $subject= $row['2'];
  $sent = $row['3'];
  $message = $row['4'];
  $i++;

  echo "<div class='draggable' id='$str$i'>

 $inbox_id $to $sent <a href='#' onclick='getmessage($inbox_id)'>$str$i $subject
 $message</a>
  <script type='text/javascript'>
  new Draggable('$str$i', {scroll: window});

  </script>
  </div>";


  }//end while inbox query
  ?>

</div> <!--end left div-->

<!--begin the right div - this is the right side of the screen frame for
postponed email area-->
<div class="right" id="right">

</div>
<!--end the right div element-->
<!--begin the main content div - this will hold sent message-->
<div class="content" id="content" overflow="auto">
</div>


<!--end content div-->
</div>
</BODY>
</HTML>

Writing Table Cells and Switch Statements

I am to create a function and purpose is to write blank tables cells to make up horizontal bar. function will have 2 parameters=(partyType and percent

partyType parameter stores variables of D,R,I,G or L

percent parameter store percentage rounded to nearest integer

so I am to make a switch and break statements /commands

then have to create a For Loop in counter variable goes up from 1 through value of parmeter increments of 1

heres the code I created for this one
Code:

     function createBar(partyType,percent){ // script element to create blank cells
switch(partyType) {
case "D": document.write("<td class='dem'></td>");
break;
case "E": document.write("<td class='rep'></td>");
break;
case "I": document.write("<td class='ind'></td>");
break;
case "G": document.write("<td class='green'></td>");
break;
case "L": document.write("<td class='lib'></td>");
break;
}
var barText = partyType

for (i=0; i < percent; i++)
{
document.write(barText);

So what improvements should I make?
should my loop be before everything?
Thanks

OK. I'm super new to any kind of java script. What I want is a menu that, when clicked, changes the background color of a table cell to blue. When a different option is clicked, the current highlighted table should turn back to gray and the new selection should be blue.
Well, I have all of that working. What I need now is just to have the first option start out highlighted and to become unhighlighted when another option is clicked.

Any help would be awesome!!!!
Thanks!!!!!!

Code:

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

<script type="text/javascript"> 
var element = null;

function select(xx) 
{ 
if ( element ) { 
element.style.backgroundColor='gray'; 

} 
element = xx; 
xx.style.backgroundColor='navy'; 

} 
</script>

<style type="text/css"> 
a {text-decoration:none; color:white} 
a:visited {color:white} 
a:active {color:white} 
a:hover {color:white} 
table#lay_menu {width:100%; margin:0px} 
table#lay_menu td {text-align:center; width:20%} 
.menu {text-align:center; background-color:gray; } 
.start {text-align:center; background-color:navy; }
</style> 
</head>

<body> 
<table id="layout">
<tr> 
<td width="188"> 
<a href="#">
<div class="menu" onClick="select(this)">Artists</div>
</a></td> 
</tr>
<tr>
  <td><a href="#">
    <div class="menu" onClick="select(this)">CPAs</div>
  </a></td>
  </tr>
<tr>
  <td><a href="#">
    <div class="menu" onClick="select(this)">Doctors</div>
  </a>&nbsp;</td>
  </tr>
<tr>
  <td>&nbsp;</td>
  </tr>
<tr>
  <td>&nbsp;</td>
  </tr> 
</table> 
</body> 
</html>

I am trying to select multiple <tr>'s (onclick) in a <table> and then move every selected <tr> to another location in the table (on click).

I will also be adding functionality to delete specific rows from a table by clicking on a <td> element, though I've already done this by doing.

document.getElementById("container").deleteRow(row.parentNode.rowIndex);

I am just completely unsure of how to tackle storing each selected row -- and then moving each selected row elsewhere in the table. I've seen many examples that accomplish close to what I am trying to acheive, however, they are all done via drag and drop and do not allow selecting multiple rows.

hellow,

i try to make a script that gets data from my mysql-database and displays it in a form with check boxes.
if i select one or more check boxes the data with its checkbox should move to another column in the table in this form.
all the other data and there checkboxes not selected should stay at its own place.
in the future i want to work with 150 checkboxes.

the part for getting it out off the database and display it in the form with the checkboxes is completed in PHP.

but i'm stuck changing its place with the onclick handler from javascript.

here you can see it working
(but it's written when you click auto1 an click submit all the checkboxes change place and are selected)
http://silent.comxa.com/m.php


the code i have so far is:


PHP Code:
<?
$ch11 = '';
$ch11 = $_POST['auto1'];
$checked = isset($_POST['submit1']) && $_POST['auto1'] == 'on' ? 'checked="checked"' : '';
?>
</head>

<body>
  <?

@$cat=$_GET['cat']; 
if(strlen($cat) > 0 and !is_numeric($cat)){  
echo "Data Error";
exit;
}

///////// Getting the data from Mysql table //////////
$quer2=mysql_query("SELECT DISTINCT category,cat_id FROM category order by category"); 
?>

<form method="post" name="f2" action="m.php"><table width="828" border="1">

<?php
while($noticia2 = mysql_fetch_array($quer2)) { 
if ($ch11 =='on'){
  echo '<tr><td width="200" >&nbsp;</td><td width="300" >&nbsp;</td> <td width="200" > <input name="'.$noticia2[category].'" type="checkbox"'.$checked.'/> '.$noticia2[category].' </td><td width="100">'.$noticia2[cat_id].'</td></tr>';
  } else { 
  echo '<tr><td width="200" >  <input name="'.$noticia2[category].'" type="checkbox"'.$checked.'/> '.$noticia2[category].' </td><td width="300" >'.$noticia2[cat_id].'</td><td width="200" >&nbsp;</td><td width="100" >&nbsp;</td></tr>';}
  }
?>
</table>
<?php
echo '<input type="submit" name = "submit1" value="Submit"/>';
echo '</form>';
?>

Hello,
I'm newbie in javascript, but i want to make an moving image.

In time it should change to other image with other button. Also it could be changed by user. The change should be dynamic like moving from left to right. ^^

Any advices, tutorial links or smthing.. Thx

Hi there folks.

I am a bit stuck with a little code. I am making a online yearbook entry and I wanted an image of myself animate/move from the top left hand to the bottom right of the screen.
I also wanted to allow people reading it the option to change bg colour and text size - but I have managed to do those.

The difficulty I am having is with moving the image, could anybody suggest any simple codes because I am new to this and don't want my head spinning before I go any further!

Any help is greatly appreciated.

Hi,
I'm noob , but i have nice idea i want to do it but i can't ..
i tried many ways to do it .. but didn't work any of them ..

the idea is move the foot to room no.1 .. but i want to see the foot moving on the red line to the room

like this pic :

My code is:
Code:

<html>
<head>


<script type='text/javascript'>

winx=220

winy=176
self.resizeTo(winx,winy);
</script>
<img id="default"
style="z-index: 0;left: 0; position: absolute; top: 0px"
	height=32 width=32 align=baseline border=0 hspace=0 src='save.gif'></p>
<script type="text/javascript">
document.getElementById("default".style.top  = '0px';
document.getElementById("default".style.left  = '0px';
</script>

The image shows up, but it doesn't move. I can't seem to find out what I'm doing wrong.

Edit:
Finally spotted it, I was missing a ")" ._.

Hello,
I am trying to move an image down 20px each time the button is clicked, but I can only get it to move down once. I see what I am doing wrong, but I'm not sure how to fix it. I don't know how to store the updated position of the image in a variable.

Code:

<center>
<input type="button" value="Click" onClick="moveDown()"/>
</center>
 
<img id="Ball" src="ball.jpg" style="position:absolute; top:100; left:100;"/>
  
<script language="JavaScript">
  var Image = document.getElementById("Ball");
  var Position = 100;

  function moveDown()
  {
	Image.style.top = Position + 20
  }
  
</script>

Thanks,
Celia

Hey guys, I was trying to make a Javascript game that moves an image across the screen randomly. Instead of executing properly, it just shows the image's starting point, and stops. No movement. Is there anyway I could fix this? Thanks, Fizz.



Code:

<html>
<head>
<title>Image Mover</title>

<style>
DIV.movable { position:absolute; }
</style>
</head>
<script language="javascript">


function Start() {

var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650);  //Ending Location - left
var dest_y = 500;   //Ending Location - top
var interval = 10; //Move 10px every initialization
	moveImage();

}

function NewDest() {

var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = Math.floor(Math.random()*650);  //Ending Location - left
var dest_y = 500;   //Ending Location - top
var interval = 10; //Move 10px every initialization
	moveImage();
}


function moveImage() {
	//Keep on moving the image till the target is achieved
	if(x < dest_x) x = x + interval; 
	if(y < dest_y) y = y + interval;
	
	//Move the image to the new location
	document.getElementById("ufo").style.top  = y+'px';
	document.getElementById("ufo").style.left = x+'px';

	if ((x+interval < dest_x) && (y+interval < dest_y)) {
		//Keep on calling this function every 100 microsecond 
		//	till the target location is reached
		window.setTimeout('moveImage()',30);
	
	if (x == dest_x) && (y == dest_y) {
		NewDest();
		}
		
			





}
}
</script>
<body onload="Start()">
<div id="ufo" class="movable">
<img src="Mouse.jpg" alt="mouse" WIDTH = 30/>
</div>

</body>
</html>

Hello all!

I am fairly experienced in HTML but javascript I am useless with.

My website can be found here;
http://mgwalker.site90.com/index.html

If you would be as kind as to load it in Chrome and in firefox, in firefox the changing image pops up on the top right of the screen.

In Chrome it is centered in the div, as it should be...

Please help I have no idea why this would happen!