|
JavaScript - Hey I Have A Question Involving Adding Cells To A Table Through Js
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 Similar TutorialsCode: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
window.onload = function(){
document.getElementById("t").innerHTML = "<table border='1' id='myTable'>" + "<tr><td>" + names.join("<tr><td>") + "</td></tr>" + "</table>";
}
var names = ["Marble","Jarque","Dino","Pineapple"];
function abc(){
if(document.getElementById('myTable').rows[0].cells[0].innerHTML==names[0]){names.sort()}
else if(document.getElementById('myTable').rows[0].cells[0].innerHTML==names[2]){names.sort().reverse()}
else {names.sort()}
document.getElementById("t").innerHTML = "<table border='1' id='myTable'>" + "<tr><td>" + names.join("<tr><td>") + "</td></tr>" + "</table>";
}
</script>
</head>
<body>
<div id="t"></div>
<input type="button" value="sort" onclick="abc()" />
</body>
</html>
First time sort: no problem But when it comes to the blue-highlighted parts It cannot do the sort().reserve() What's wrong with the codes? Hello everyone. I want to move my image through table cells by using arrow buttons. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Move</title>
<style type="text/css" >
table
{
background-color:#FFCC00;
margin-top: 100px;
margin-bottom: 100px;
}
</style>
</head>
<body onload="setup()">
<script type="text/JavaScript" onkeydown="handleKey(event)">
document.write('<table border="1" cellspacing="0" cellpadding="10">');
var count =0
for (var row=0; row<20; row++) {
document.write('<tr>');
for (var col=0; col<20; col++) {
idnmr = count
count++
document.write('<td style="border:0"; id="idnmr";>');
document.write('</td>');
}
document.write('</tr>');
}
function setup() {
row=0;
col=0;
insertKnight(row,col);
}
function handleKey(e) {
if (typeof e !='object') e=window.event;
if (e.type == 'keydown' && (e.keyCode ==27 || (e.keyCode >= 37 && e.keyCode <=40))) {
switch (e.keycode) {
case 37:
dC= -1;
dR = 0;
break;
case 38:
dC= +1;
dR=0;
break;
case 39:
dC = 0;
dR = +1;
break;
case 40:
dC= 0;
dR=-1;
break;
}
emptyCell(row,col);
function emptyCell(row,col)
{
var id = 'r' + row + 'c' + col;
var cell= document.getElementById(id);
if(cell) cell,innerHTML='';
}
row +=dR;
col +=dC;
//insert image
insertKnight(row,col);
return false;
function insertKnight(row,col) {
var id = 'r' + row + 'c' + col;
var cell = document.getElementById(id);
var colour = cell.className;
if (colour != 'white') {
var knight='cherry.png';
}
else {
var knight= 'cherry.png';
function eraseImage(row,col) {
var id = 'r' + row + 'c' + col;
document.getElementById(id).innerHTML = '';
}
cell.innerHTML = '<img src=" ' + knight + ' " alt="' + colour + 'knight" />';
}
document.getElementById('debug').innerHTML = 'r='+row+' c='+col;
function drawImage(row,col) {
var id = 'r' + row + 'c' + col;
document.getElementById(id).innerHTML = '<img src="cherry.png"/>';
}
</script>
</body>
</html>
This is my code. Now i have problems with the eraseImage and drawImage functions. They just don't work. Any help will be appreciated. Thank you I am confuseif i use JS.. its should be in <head> but table should be in <body>.. how am i going to use that.. and put images in that table cell using JS??
Hi All, I tried to add links to open local xml files in browser in a dynamic table cells. I need help. I tried all ways but I think I miss something. I can open them without table just by document.write(xmlfile location). Here is my code. please help. function showResultsTable(searched, srchedname) { // get the reference for the body var mybody = document.getElementsByTagName("body")[0]; // creates a <table> element and a <tbody> element mytable = document.createElement("table"); mytable.setAttribute('id', 'resulttable'); mytablebody = document.createElement("tbody"); // creating all cells var mycurrent_cell = new Array(); for(var j = 0; j < srchedname.length; j++) { // creates a <tr> element mycurrent_row = document.createElement("tr"); mycurrent_cell[0] = document.createElement("td"); currenttext = document.createTextNode(j); mycurrent_cell[0].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[0]); mycurrent_cell[1] = document.createElement("td"); link = document.createElement("a"); link.name = ""+srchedname[j]); link.href = "C:\\AAA\\TestCasesList.xml"; mycurrent_cell[1].appendChild(link); mycurrent_row.appendChild(mycurrent_cell[1]); mycurrent_cell[2] = document.createElement("td"); currenttext = document.createTextNode(searched[j]); mycurrent_cell[2].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[2]); // appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row); } // appends <tbody> into <table> mytable.appendChild(mytablebody); // appends <table> into <body> mybody.appendChild(mytable); // sets the border attribute of mytable to 2; mytable.setAttribute("border", "2"); } Hello, I'm Stephen Martin, an undergraduate Psychology student and researcher. Although I am a self-proclaimed tech geek, the extent of my knowledge ends abruptly at any sort of coding. I need help from anyone who is willing. The paradigm: I am currently investigating the decision making strategies in a particular population (I cannot reveal too much, lest our study be scooped by competing researchers in the field). The paradigm that we use is built through a package called MouseLabWeb (http://www.mouselabweb.org/). MLWeb basically provides an interface for researchers to create a html/php/js/css website that presents a grid (table). A small example is shown on the aforementioned website. The javascript functions allow each participant's events to be recorded, timestamped, and written to a MySQL database. This allows the researcher to know which cells the participant viewed, in what order, for how long, and ultimately to which decision the participant came. Additionally, the PHP/HTML creates the table, but the data within it is populated by the javascript. This is a blessing and a curse. Here is why. The problem: The javascript offered by MLWeb allows the cells to be randomized. This is necessary, because in such paradigms, counter-balancing is required, otherwise there would be order effects (e.g., people tend to automatically read from the upper left) that are not controlled for. So the order of the columns and rows are randomized, the data which is then placed into the html/php table. For the current study, we want the cells corresponding to particular types of information to be shaded differently. For example, we'd want cells that contain bad information to be dark, cells that contain neutral info to be grey, and cells that contain good information to be white. The problem is that setting these values (style="background-color: #XXXXX) only applies to the table as created by the PHP. It only affects the position, and does not consider the information that it is filled with. We want the information that a cell is filled with to dictate what background-color the cell is. Example of the problem (A,B,C are the different types of info, with the surrounding character implying shading) What we want: Unrandomized: [.A.] [|B|] [#C#] Randomized: [#C#] [.A.] [|B|] What the problem is: Randomized: [.C.] [|A|] [#B#] Again, thank you for reading this long post. I'm up for any suggestions! TL;DR The website uses PHP to render a table and javascript to populate it. Javascript randomizes the column and row order upon each visitation, thus randomizing the cells. How do I make javascript issue a background-color change to each cell according to the information that it is populated with. Ok. I'm going to start by saying I'm a complete novice. I am having a hell of time finding specific codes for the things I need. I'm pretty impressive I've gotten this far. So I am trying to make a portfolio website, for myself, which has thumbnails on the left(which I'll crop in photoshop because it is easier for me than having to do any coding) which will make the main image on the right change. At the same time, I want it to change the text below to correspond to the current image. Now I have the images swapping alright, except that the thumbnails that have the onClick function in them won't sit inside the table I have inside the table. I don't understand why that happens. I can work around this, and just get rid of that table. Another problem is that even though I defined the collumns as each being 20%, they are not all the same size. I am using percentages so that the site will function regardless of screen resolution. Anyway, here is my current code. Ignore the image names, I'm just using what random images I have at hand while I test things out. Code: <html>
<head>
<script type="text/javascript">
function swap(image) {
document.getElementById("main").src = image.href;
}
</script>
</head>
<body>
<table width="80%" align="center">
<tr><td colspan="5">I'll put a header image here.</td>
</tr>
<tr>
<td width="20%"><center>Print</center></td>
<td width="20%"><center>Motion</center></td>
<td width="20%"><center>Photo</center></td>
<td width="20%"><center>Misc</center></td>
<td width="20%"><center>Resume</center></td>
</tr>
<tr>
<td colspan="2"><table align="left">
<td colspan="100%">Catagory 1
</td>
<tr>
<a href="mario.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
<a href="../Jpg/cattits.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
<a href="bowie.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
</tr>
<td colspan="100%">Catagory 2
</td>
<tr>
<td><img src="../Jpg/sluticon.jpg" /></td>
<td><img src="../Jpg/sluticon.jpg" /></td>
</tr>
</table></td>
<td colspan="3">
<img id="main" src="bowie.jpg" width="400">
</td>
</tr><td colspan="5">
<p>Description goes here</p></td>
<tr>
</tr>
</table>
</body>
</html>
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 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 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>
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> 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> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
hi all, i have a table, just a basic table with 6 rows. depending on the value of the first <td>thevalue</td> i want to start a end the existing table and start a new one. the newly added table (i hope) will contain all the remaining <tr><td></td></tr> nodes until i run into the next check that will close the newly added table and begin a new table again etc.... i can get the correct node (tr) after i find the value in the td im looking for, and then try a : document.createElement("table"); , but my problem is that this newly created table tag comes with an automatically created </table> element / tag, so i end up with just inserting a new blank table after a row instead of inserting a new table tag that has all the remaining tr and tds under it. hope that makes sense. my entire test page is: (click the text link and an alert will show the output with the new <table></table> after the row that my check is looking for (first td with a 2) -------------------------------------------------------------------- Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function reformatMe() {
var divObj = document.getElementById('reformatMe');
var numRows = document.getElementsByTagName("tr");
var z = "1";
for (i = 0; i < numRows.length; i++) {
if (numRows[i].childNodes[0].innerHTML == "2") {
var markStart = numRows[i];
alert(markStart.nextSibling);
var closeTable = document.createElement("/table");
var addTable = document.createElement("table");
//var tbody = document.createElement("tbody");
//addTable.appendChild(tbody);
addTable.setAttribute("id", "subOptionID" + z);
if(numRows[i+1] != null){
numRows[i].parentNode.insertBefore(addTable, numRows[i+1]);
}
z++;
}
}
alert(divObj.innerHTML);
}
</script>
</head>
<body>
<a href="#" onclick="reformatMe();">reformat table</a>
<div id="reformatMe">
<table border="1" cellpadding="4" cellspacing="2" id="menuItemID1">
<tr><td>1</td> <td>1</td> <td>How would you like your food prepared?</td> <td>1</td> <td>1</td> <td>0</td></tr>
<tr><td>1</td> <td>1</td> <td>Choose two of the following sides</td> <td>0</td> <td>2</td> <td>0</td></tr>
<tr><td>1</td> <td>1</td> <td>What do you want on your Baked Potato?</td> <td>0</td> <td>2</td> <td>1</td></tr>
<tr><td>2</td> <td>1</td> <td>What type of dressing do you want on your salad?</td> <td>1</td> <td>1</td> <td>1</td></tr>
<tr><td>1</td> <td>1</td> <td>Do you want fries?</td> <td>1</td> <td>1</td> <td>0</td></tr>
<tr><td>1</td> <td>1</td> <td>Do you want ketchup on your fries?</td> <td>1</td> <td>1</td> <td>1</td></tr>
</table>
</div>
</body>
</html>
Okay, I am relatively new to Java and am going to be taking a class on it next fall. For now though, I am trying to code for a client I am currently working with and am hopelessly lost. The client I am working with has an ecommerce site with Network Solutions which uses aspx. It allows you to code html and link to css, java (pretty much anything except php). The problem I am having is that they currently have their product descriptions coded in div tags: <div id='alternatebg'> <div id='detailsgreybox'><div id='alternatename'><p>Alternate Name</p></div></div> <div id='pd2'><p>Not Available</p></div> </div> <div id='usebg'> <div id='detailsgreybox'><div id='use'><p>Use</p></div></div> <div id='pd3'><p>Chemicals</p></div> </div> What they want to happen is for the sections that have 'Not Available' as the answer to not show up on the live page. I have tried to use <ns:if condition="..."> but do not know how to call for it to see if the div says 'Not Available'. Any help is greatly appreciated as I can not move forward until I can figure this out. My site will change color schemes when a user presses the button in the top left. I want to add a third theme though. I can't figure it out though. My html as relevent Code: <!--EXTERNAL FILES--> <link rel="stylesheet" type="text/css" href="main.css" /> <!--[if IE]><link rel="stylesheet" type="text/css" href="mainIE.css" /><![endif]--> <link id="altstyle" rel="stylesheet" type="text/css" href="main.css" /> <script type="text/javascript" src="main.js"></script> <!--STOP EXTERNAL FILES--> <title>Votillity.com</title> <!--CSS INTERNAL--> <!--CSS INTERNAL--> <!--JAVASCRIPT INTERNAL--> <!--JAVASCRIPT INTERNAL--> </head> <body onload="startTime()"> <img class="Zindexsty1" style="position: fixed; top: 0px; left: 0px;" src="http://votillity.com/VotillityLogo1.png" alt="VOTILLITY" /> <img class="Zindexsty2" style="position: fixed; top: 0px; left: 0px;" src="http://votillity.com/VotillityLogo2.png" alt="VOTILLITY" /> <button id="altstyact" class="button" style="position: fixed; top: 0px; left: 170px; width: 60px;">Theme</button> Javascript Code: //ALTERNATE STYLES
function changeStyle()
{
var obj1=document.getElementById('altstyact');
var obj2=document.getElementById('altstyle')
test=true;
obj1.onclick=function()
{
test==true?
(obj2.href='main2.css',obj1.firstChild.nodeValue='Classic',test=false):
(obj2.href='main.css',obj1.firstChild.nodeValue='Ice',test=true)
}
}
if(window.addEventListener)
{
window.addEventListener('load',changeStyle,false);
}
else
{
if(window.attachEvent)
{
window.attachEvent('onload',changeStyle);
}
}
//STOP ALTERNATE STYLES
I don't think you need the css's. If, however, I'm wrong just let me know. Keep in mind that the javascript is external. Here's my site if you need a better look Votillity Thank you Hi, I am trying to use the onmouseover on a table element (table/row/cell) when creating the table using HTML everything is ok. Code: <TABLE border="2" >
<TR >
<TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';" >Mauritania</td>
<TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="alert('amit')">21N</TD>
<TD>24N</TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
However when I am trying to do the same using javascript it is not working. I can see the correct table data and background color but it doesnt change on mouse over. Code: function test_table(srcHolder)
{
var srcTable = document.createElement("table");
srcTable.border = 1;
srcTable.borderColor = "black";
var tmpRow = null;
var tmpCell = null;
srcHolder.appendChild(srcTable);
for(i=0; i<3; i++)
{
tmpRow = srcTable.insertRow()
for(j=0; j<3; j++)
{
tmpCell = tmpRow.insertCell()
tmpCell.innerText = j;
tmpCell.bgColor ="red"
tmpCell.onMouseOver="this.bgColor='gold';"
tmpCell.onMouseOut="this.bgColor='#FFFFFF';"
tmpCell=null;
}
tmpRow = null;
}
}
can someone explain to me what's wrong? Hello, I want to add rows and columns on click. So, i have a table with columns and rows and I had a add and remove button. So I want the user to be able to add/remove more rows if they have multiple inputs/outputs. So what I want is when the user clicks on add.png, I want another row of Input and Description to appear underneath the current one. Here is my code.. Code: <img src="images/add.png" width="15" height="15" align="right" >
<div class="open">
<table width="200" border="0">
<tr>
<td class="propertyCol">Input: </th>
<td class="propertyCol"><input class="text ui-widget-content ui-corner-all" value="" style="width:210px"></input></th>
<td class="propertyCol">Description: </th>
<td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea> </th>
<td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a> </th>
</tr>
</table>
<table width="200" border="0">
<tr>
<td class="propertyCol">Output: </th>
<td class="propertyCol"><input class="text ui-widget-content ui-corner-all" style="width:200px"></input></th>
<td class="propertyCol">Description: </th>
<td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea> </th>
<td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a> </th>
</tr>
</table>
</div
I am very new to coding, trying to teach myself some javascript. I know this is a very simple code, I just can't seem to nail down what is going wrong. Feeling really stupid right now. Heres the code: Code: <html>
<head>
<script language="JavaScript">
var choice=confirm("Press ok for black. Press cancel for red.");
if (choice==true){
document.bgColor="yellow";
document.fgColor="black";
}
else {
document.bgColor="red";
document.fgColor="white";
}
</script>
<body>
<p>words</p>
</body>
</html>
If someone could take a second to set me straight, I would really appreciate it. btw: hope I posted all this according to the "rules". I tried I have a background slide show from codelifter.com that normally runs in the body - I would like to use it as the background in a table cell. Thanks in advance for any help, Cyber-guys Here is the code: [CODE] <html> <head> <style> body{ background-repeat: no-repeat; background-position: 200 100;} </style> <script language="JavaScript"> <!-- // (C) 2006 CodeLifter.com var speed = 3000; var crossFadeDuration = 2; var Pic = new Array(); Pic[0] = 'slideshow1_1.jpg'; Pic[1] = 'slideshow1_2.jpg'; Pic[2] = 'slideshow1_3.jpg'; Pic[3] = 'slideshow1_4.jpg'; Pic[4] = 'slideshow1_5.jpg'; var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++){ preLoad[i] = new Image(); preLoad[i].src = Pic[i];} function runSlideShow(){ if (document.all){ document.body.style.filter="blendTrans(duration=crossFadeDuration)"; document.body.filters.blendTrans.Apply(); document.body.filters.blendTrans.Play();} if (document.body){ document.body.background = Pic[j]; j = j + 1 if (j > (p-1)) j=0 t = setTimeout('runSlideShow()', speed)} } //--> </script> <title> CodeLifter.com :: Background Image Slideshow With Crossfade </title> </head> <body onload="runSlideShow()" bgcolor="#000000"> <table border="0" width="444" cellpadding="0" cellspacing="0"> <tr> <td> <font size="2" face="Verdana,Arial" color="#FFFFFF"> Lorem ipsum dolor situm amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer... </font> </td> </tr> </table> </body> </html> Hi all I'm well aware that I can't post assignments here and expect an answer, however, I have been staring at this code for so long. I feel I am close to the solution (to get the correct output to the browser) but I just cannot get it to count how many moves it takes. I don't want an answer, but a nudge in the right direction would be very grateful. As you can see from the code and the output, it will attempt to write to the browser how many moves, but only '0'. Code: function rollDie()
{
return Math.floor(Math.random() * 6) + 1;
}
/*
*searches for a number in a number array.
*
*function takes two arguments
* the number to search for
* the number array to search
*function returns the array index at which the number was found, or -1 if not found.
*/
function findIndexOf(number, numberArray)
{
var indexWhereFound = -1;
for (var position = 0; position < numberArray.length; position = position + 1)
{
if (numberArray[position] == number)
{
indexWhereFound = position;
}
}
return indexWhereFound;
}
//ARRAYS that represent the board -- you do not need to change these
//array of special squares
var specialSquaresArray = [1,7,25,32,39,46,65,68,71,77];
//array of corresponding squares the player ascends or descends to
var connectedSquaresArray = [20,9,29,13,51,41,79,73,35,58];
//VARIABLES used -- you do not need to change these
//the square the player is currently on
var playersPosition;
//play is initially at START
playersPosition = 0;
//what they score when they roll the die
var playersScore;
//the index of the player's position in the special squares array or -1
var indexOfNumber;
//MAIN PROGRAM
//TODO add code here for parts (iii), (iv)(b), (v), and (vi)
// start of question(iii)
playersScore = rollDie();
document.write(' Sco ' + playersScore);
playersPosition = playersScore + playersPosition;
document.write(', Squa ' + playersPosition);
indexOfNumber = findIndexOf(playersPosition, specialSquaresArray);
if (indexOfNumber != -1)
{
document.write(', Ladder to Squa ' + connectedSquaresArray[indexOfNumber]);
playersPosition = connectedSquaresArray[indexOfNumber];
indexOfNumber = -1;
}
document.write('<BR>')
// end of question(iii)
// start of question(iv)(b)
while(playersPosition<=80)
{
playersScore = rollDie()
document.write(' Sco ' + playersScore)
playersPosition = playersPosition + playersScore
document.write(', Squa ' + playersPosition)
indexOfNumber = findIndexOf(playersPosition, specialSquaresArray)
if(indexOfNumber != -1)
{
document.write(', Ladder to Squa ' + connectedSquaresArray[indexOfNumber]);
playersPosition = connectedSquaresArray[indexOfNumber];
}
document.write('<BR>');
}
var countMoves = 0;
while(countMoves <= 0)
{
document.write('You took ' + countMoves + ' moves to get out');
countMoves = countMoves + 1
}
/*for (var countMoves = 0; countMoves < playersPosition; countMoves = countMoves + 1)
{
countMoves = countMoves + playersPosition;
document.write('You took ' + countMoves + ' moves to get out');
}*/
// end of question(iv)(b)
// start of question (v)
/*if (playersPosition >=80)
{
document.write('The player is out');
}*/
// end of question (v)
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Many thanks. So recently I ran some code through google's closure compiler and it combined multiple statements into one statement separated by a ',' I didn't really know what that accomplished, but I thought I would try it out a little and see the what happens... I have been using it (for now) to combine all variable declarations into a single statement and it has been working. I got an error today with the following Code: StartArr = [], EndArr = [], var range=0, dif = 0, totalTimeInSeconds = 0; Apparently it doesn't work when I use a throw in a local variable... So I'm thinking that I don't quite grasp what it's supposed to be doing It would seem that I can't use it to combine just any statements. I tried looking it up (not really knowing what it's called) and found the following http://javascriptweblog.wordpress.co...omma-operator/ on the subject I have come to the conclusion that I am using it to "separate members in a list" Code: //set 4 array elements
var arr = [1, 2, 3, 4];
//create an object with 2 properties
var obj = {
a: 22,
f: function() {return this.a*this.a}
}
//define 3 distinct variables
var a = 1, b = 2, c = 3;
//invoke a function passing 2 arguments
Math.max(4, 7);
Were the samples on that blog My questions are 1)What am I really doing when I combine these var declarations into one statement? 2)What are the advantages of the second and third examples from above over creating each property/variable in a separate statement? 3)Why did my statement fail when I added the local scope to range? And now I'm kinda wondering 4)What the heck is that " a: 22 " ?? is that the same as " this.a = 22 " ? Can I do the following: Code: var obj = {
a: 22,
f: function() {return this.a*this.a}
}
document.write(obj.a) //Output "22"
5)Why is "obj" declared as "var" and not "function" I guess their are many ways of writing the same thing in javascript, I'm just trying to get a better grasp here. |
|||||||