Learn VBA & Macros in 1 Week!

JavaScript - Dynamically Build/delete A Sub-table

Full Excel VBA Course - Beginner to Expert

Dynamically Build/delete A Sub-table	View Content

I have a table that has a series of dropdowns. Each dropdown is build with JavaScript based on the values of the prior dropdowns. The data for each of these dropdowns comes from a series of XML files which are loaded into a series of arrays on loading. This is all working.

What I need (but can't figure out) is how to dynamically build a sub-table within a specific cell of the parent table based on the values of the prior dropdowns and if the prior dropdowns are changed, how do delete (not just hide) the dynamic table and rebuild it based on the values of the new dropdowns.

Full Excel VBA Course - Beginner to Expert

Using Ajax To Build A Menu Dynamically - Problems

Similar Tutorials

View Content

Hello,

I'm very new to javascript and am probably dabbling in stuff that I shouldn't if I am new to it. Nonetheless I've exhausted my resources and am seeking some answers from people who know what they're talking about.

I've got this XML file:

Quote:

<?xml version="1.0" encoding="utf-8"?>
<Menu>
<Section>
<Title>Product Information</Title>
<Topic url="howto.html">How to use This Product</Topic>
<Topic url="product.html">Product Overview</Topic>
<Topic url="sysreq.html">System Requirements</Topic>
</Section>
.....
</Menu>

There's more data than that but for brevity that's the way it's constructed and repeats with several Titles and Topics.

Here's the JS i'm using to build a dynamic menu. The goal is to pick up the data and build an Accordion menu out of it:

Quote:
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest(); //create ajax var
}
else
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE
}
xhttp.open("GET","menu.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;
document.write("<div class='acc'>");
var x=xmlDoc.getElementsByTagName("Section");
for (i=0;i<x.length;i++)
{
document.write("<dt>");
document.write("<a href='#'>" + x[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue + "</a></dt>");
document.write("<dd><ul>");
var y=xmlDoc.getElementsByTagName("Topic")[0].childNodes[0];
for (foo=0;foo<x.length;foo++)
{
document.write("<li class='acc_item'><a href='#'>" + x[i].getElementsByTagName("Topic")[0].childNodes[0].nodeValue + "</a></li>");
}
document.write("</ul></dd>");
}
document.write("</div>");
It creates the menu correctly... to a point. It has the correct styling, the accordion works perfectly, it has the correct Titles in the correct places, but when I "expand" one of the Titles it lists the first topic only, and lists it 5 times (the same amount of Titles I have). It then repeats this for every section. Example:

Product Information
How to Use This Product
How to Use This Product
How to Use This Product
How to Use This Product
How to Use This Product

I'm not very confident in the syntax, or what it is exactly doing. Any guidance would be very appreciated. Please keep in mind I'm very new.

Thanks!

How To Build A Redirect Url Dynamically Based On 2 Select Field Combinations Chosen?

Similar Tutorials

View Content

I am having trouble writing this javascript for my work, normally I would do this in ASP or PHP, but the environment I am working with will only allow javascript for dynamic function.

The form has two different select boxes and based on your options selected for select box #1 and select box #2, the hidden input field "redirect" (which is currently empty) would then populate dynamically with the URL associated with that combination mentioned below. The hidden redirect input field (now containing dyanmically generated data) would then pass the new value via HTTP_POST to .net script that will handle the redirect processing step fed to it.

Here are the mappings:

If selections = Elementary & Vocabulary = http://www.widget.com/content/elem-vocab

If selections = Elementary & Writing = http://www.widget.com/content/elem-writing

If selections = Elementary & ELD = http://www.widget.com/content/elem-eld

If selections = Middle School & Vocabulary = http://www.widget.com/content/midscl-vocab

If selections = Middle School & Writing = http://www.widget.com/content/midscl-writing

If selections = Middle School & ELD = http://www.widget.com/content/midscl-eld

If selections = High School & Vocabulary = http://www.widget.com/content/hiscl-vocab

If selections = High School & Writing = http://www.widget.com/content/hiscl-writing

If selections = High School & ELD = http://www.widget.com/content/hiscl-eld

Here's a snippet of a different method that I tried, but it did not work. I think the above mentioned method would probably be best.

Code:

<script language="javascript" type="text/javascript">
<!--
function build() {

document.fillgaps.redirect.value = "http://www.widget.com/content/" + document.fillgaps.grade.value + "-" + document.fillgaps.solution.value ;

//print example: http://www.widget.com/content/ELM-VOC

return true;

}

-->
</script>


<form name="fillgaps" action="http://www.widget.com/submit.aspx" method="post" onSubmit="return build();">

<input type="hidden" name="redirect" value="">

<table class="elqFormTable" border="0" cellspacing="2" cellpadding="2">


<tr>
<td valign="top">Grade:</td>
<td>
<select name="grade">
<option value="ELM">Elementary</option>
<option value="MID">Middle School</option>
<option value="HIG">High School</option>
</select>
</td>
</tr>

<tr >
<td valign="top">Solution:</td>
<td>
<select name="solution">
<option value="VOC">Vocabulary</option>
<option value="WRI">Writing</option>
<option value="ELD">ELD</option>
</select>

<!--truncated code -->

Javascript Help Needed For Category Image Display And Delete Dynamically

Similar Tutorials

View Content

I have search for about a week and still no luck.
I need to dynamically display mutliple images using javascript, no hardcoding. The images have different categories. For ex. bellTower01.jpg, bellTower02.jpg...and fountain01.jpg, fountain02.jpg....

-Use JavaScript to display several images and scroll through them
To display multiple thumbnails, arrange them into a small quantity (no more than 8 per page)
Provide pagination

I really really really need help. I have never done javascript before, so I'm still learning. I seriously checked out many threads and links but nothing works or is what I want. I hope someone can help me out and hopefully also allow me to become better at coding this kind of stuff.

I am not allowed to code in php for this project. I can only use javascript to display the images. Also, I don't really need anything fancy, like slideshows or rotations, I just the image to appear when I select that specific category. I want to get the images from my folder/directory.

Right now, I have it working as it just being hardcoded.
Below is my code for my galleries page:

<?php

//creates a session..initializes session data
session_start ();

echo("<?xml version=\"1.0\" encoding=\"UTF-8\"?>"); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scenes of Purdue</title>

<link rel="stylesheet" type="text/css" href="css/style.css"/>

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/lightbox.css"/>

</head>

<body>
<div id="shadowContainer">
<div id="mainContainer">
<div id="mainHeader"></div>
<div id="topNav">
<ul>

<li><a href="index.php">Home</a></li>
<li><a href="galleries.php">Galleries</a></li>
</ul>
</div><div id="content">
<br />
<div class="clearfix"><h1>Select a Category to View</h1>
<br />

<div class="paginationBar" id="paginationBar">
<select id="catDropDown" onchange="javascript:getCategory()">
<option value="-" selected="selected">Select a Category</option>
<option value="bellTower">Bell Tower</option>
<option value="fountain">Fountain</option>
</select>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br />

<ul id="pagination">
</ul>

<div id="r1c1"></div>
<div id="r1c2"></div>
<div id="r1c3"></div>

<div id="r2c1"></div>
<div id="r2c2"></div>
<div id="r2c3"></div>

<script type="text/javascript">
</script>

</div>
</div>
</div>
<div id="footer"><a href="readme.php">Readme</a><br />
<div class="clearfix">
<div style="float: left"><a href="adminLogin.php" title="Admin Login" class="adminLoginAjax">Admin login</a></div>

</div>
</div>
</div>

</div>

</body>
</html>

Need To Use Javascript To Build And Populate A Table

Similar Tutorials

View Content

Hi,

I'm new to Javascript and need to help with something, I'll try and explain this as best as I can but feel free to ask questions if it doesn't make sense. I'm basically building a javascript/html calculator but I need the calculation to appear gradually in a table, the table need to be 3 columns accross and add a row each time a calculation button is pressed, the first column can remain blank for now but will need to contain a text field eventually, second column needs to show the calculation symbol, third column shows the number. Here's an example:

4+2+7-5=8

|Blank| | 4 |
|Blank| + | 2 |
|Blank| + | 7 |
|Blank| - | 5 |
|Blank| = | 8 |

Here's the code I have so far so you can get a feeling of what it looks like, this table need to go into the area div and will replace what is currently the

Code:

<!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>
        <title>Sample Widget</title>
		    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="basic.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="basic.js"></script>
        <meta name="generator" content="Nokia WRT extension for Visual Studio 2.0" />
        <script type="text/javascript" language="javascript">
            function UpdateInput(a, b) {
                    var MyElement = document.getElementById("Input");
                    MyElement.innerHTML = MyElement.innerHTML + a;
                    var MyElement = document.getElementById("Area");
                    MyElement.innerHTML = MyElement.innerHTML + b;
                }
                function Calculate() {
                    var result = eval(document.getElementById("Input").innerHTML);
                    var total = document.getElementById("Total");
                    total.innerHTML = result;
                    var MyElement = document.getElementById("Area");
                    MyElement.innerHTML = MyElement.innerHTML + '<br>=' + result;
            }
        </script>
    </head>
    <body onLoad="init()">
    <div id="Main">
        <table cellpadding="0" cellspacing="0" width="100%">
        <div id="Area">
        </div>
        </table>
        <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td class="style1">Total:</td>
                <td>
                    <div id="Total"></div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div id="Input"></div>
                </td>
            </tr>
        </table>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td><img src="Images/plus.png" onclick="UpdateInput('+','<br>+')" /></td>
                <td><img src="Images/minus.png" onclick="UpdateInput('-','<br>-')" /></td>
                <td><img src="Images/times.png" onclick="UpdateInput('*','<br>*')" /></td>
                <td><img src="Images/divide.png" onclick="UpdateInput('/','<br>/')" /></td>
            </tr>
            <tr>
                <td><img src="Images/7.png" onclick="UpdateInput(7,7)" /></td>
                <td><img src="Images/8.png" onclick="UpdateInput(8,8)" /></td>
                <td><img src="Images/9.png" onclick="UpdateInput(9,9)" /></td>
                <td><img src="Images/percent.png" onclick="UpdateInput('%','<br>%')" /></td>
            </tr>
            <tr>
                <td><img src="Images/4.png" onclick="UpdateInput(4,4)" /></td>
                <td><img src="Images/5.png" onclick="UpdateInput(5,5)" /></td>
                <td><img src="Images/6.png" onclick="UpdateInput(6,6)" /></td>
                <td><img src="Images/oneoverx.png" /></td>
            </tr>
            <tr>
                <td><img src="Images/1.png" onclick="UpdateInput(1,1)" /></td>
                <td><img src="Images/2.png" onclick="UpdateInput(2,2)" /></td>
                <td><img src="Images/3.png" onclick="UpdateInput(3,3)" /></td>
                <td><img src="Images/plusminus.png" /></td>
            </tr>
            <tr>
                <td><img src="Images/0.png" onclick="UpdateInput(0,0)" /></td>
                <td><img src="Images/dot.png" onclick="UpdateInput('.','.')" /></td>
                <td><img src="Images/equals.png" onclick="Calculate()" /></td>
                <td><img src="Images/sub.png" /></td>
            </tr>
        </table>
    </div>
	</body>
</html>

Dynamically Create Id For Table-rows

Similar Tutorials

View Content

Hi there, so i am working on a website, and on it there is a video with youtube api.

I need to hide all Table-rows that are not during each 5 second time frame.
So for example, when it is at 0:36, it will hide all TR's besides the TR that has to do with the video between 0:35 and 0:40.

Each TR displays a start time, content, and end time.

Here is what the tables currently look like.
Code:

<table width="600" class="table"  >
  <tr class="item-titles">
    <td width="75" class="none">Start</td>
    <td width="400">Caption</td>
    <td width="75">End</td>
  </tr>


  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(0, false)">0</a></td>
    <td><a href="javascript:player.seekTo(0, false)"></a></td>
    <td><a href="javascript:player.seekTo(5, false)">5</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(5, false)">5</a></td>
    <td><a href="javascript:player.seekTo(5, false)"></a></td>
    <td><a href="javascript:player.seekTo(10, false)">10</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(10, false)">10</a></td>
    <td><a href="javascript:player.seekTo(10, false)"></a></td>
    <td><a href="javascript:player.seekTo(15, false)">15</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(15, false)">15</a></td>
    <td><a href="javascript:player.seekTo(15, false)"></a></td>
    <td><a href="javascript:player.seekTo(20, false)">20</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(20, false)">20</a></td>
    <td><a href="javascript:player.seekTo(20, false)"></a></td>
    <td><a href="javascript:player.seekTo(25, false)">25</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(25, false)">25</a></td>
    <td><a href="javascript:player.seekTo(25, false)"></a></td>
    <td><a href="javascript:player.seekTo(30, false)">30</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(30, false)">30</a></td>
    <td><a href="javascript:player.seekTo(30, false)"></a></td>
    <td><a href="javascript:player.seekTo(35, false)">35</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(35, false)">35</a></td>
    <td><a href="javascript:player.seekTo(35, false)"></a></td>
    <td><a href="javascript:player.seekTo(40, false)">40</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(40, false)">40</a></td>
    <td><a href="javascript:player.seekTo(40, false)"></a></td>
    <td><a href="javascript:player.seekTo(45, false)">45</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(45, false)">45</a></td>
    <td><a href="javascript:player.seekTo(45, false)"></a></td>
    <td><a href="javascript:player.seekTo(50, false)">50</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(50, false)">50</a></td>
    <td><a href="javascript:player.seekTo(50, false)"></a></td>
    <td><a href="javascript:player.seekTo(55, false)">55</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(55, false)">55</a></td>
    <td><a href="javascript:player.seekTo(55, false)"></a></td>
    <td><a href="javascript:player.seekTo(60, false)">60</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(60, false)">60</a></td>
    <td><a href="javascript:player.seekTo(60, false)"></a></td>
    <td><a href="javascript:player.seekTo(65, false)">65</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(65, false)">65</a></td>
    <td><a href="javascript:player.seekTo(65, false)"></a></td>
    <td><a href="javascript:player.seekTo(70, false)">70</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(70, false)">70</a></td>
    <td><a href="javascript:player.seekTo(70, false)"></a></td>
    <td><a href="javascript:player.seekTo(75, false)">75</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(75, false)">75</a></td>
    <td><a href="javascript:player.seekTo(75, false)"></a></td>
    <td><a href="javascript:player.seekTo(80, false)">80</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(80, false)">80</a></td>
    <td><a href="javascript:player.seekTo(80, false)"></a></td>
    <td><a href="javascript:player.seekTo(85, false)">85</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(85, false)">85</a></td>
    <td><a href="javascript:player.seekTo(85, false)"></a></td>
    <td><a href="javascript:player.seekTo(90, false)">90</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(90, false)">90</a></td>
    <td><a href="javascript:player.seekTo(90, false)"></a></td>
    <td><a href="javascript:player.seekTo(95, false)">95</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(95, false)">95</a></td>
    <td><a href="javascript:player.seekTo(95, false)"></a></td>
    <td><a href="javascript:player.seekTo(100, false)">100</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(100, false)">100</a></td>
    <td><a href="javascript:player.seekTo(100, false)"></a></td>
    <td><a href="javascript:player.seekTo(105, false)">105</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(105, false)">105</a></td>
    <td><a href="javascript:player.seekTo(105, false)"></a></td>
    <td><a href="javascript:player.seekTo(110, false)">110</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(110, false)">110</a></td>
    <td><a href="javascript:player.seekTo(110, false)"></a></td>
    <td><a href="javascript:player.seekTo(115, false)">115</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(115, false)">115</a></td>
    <td><a href="javascript:player.seekTo(115, false)"></a></td>
    <td><a href="javascript:player.seekTo(120, false)">120</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(120, false)">120</a></td>
    <td><a href="javascript:player.seekTo(120, false)"></a></td>
    <td><a href="javascript:player.seekTo(125, false)">125</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(125, false)">125</a></td>
    <td><a href="javascript:player.seekTo(125, false)"></a></td>
    <td><a href="javascript:player.seekTo(130, false)">130</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(130, false)">130</a></td>
    <td><a href="javascript:player.seekTo(130, false)"></a></td>
    <td><a href="javascript:player.seekTo(135, false)">135</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(135, false)">135</a></td>
    <td><a href="javascript:player.seekTo(135, false)"></a></td>
    <td><a href="javascript:player.seekTo(140, false)">140</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(140, false)">140</a></td>
    <td><a href="javascript:player.seekTo(140, false)"></a></td>
    <td><a href="javascript:player.seekTo(145, false)">145</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(145, false)">145</a></td>
    <td><a href="javascript:player.seekTo(145, false)"></a></td>
    <td><a href="javascript:player.seekTo(150, false)">150</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(150, false)">150</a></td>
    <td><a href="javascript:player.seekTo(150, false)"></a></td>
    <td><a href="javascript:player.seekTo(155, false)">155</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(155, false)">155</a></td>
    <td><a href="javascript:player.seekTo(155, false)"></a></td>
    <td><a href="javascript:player.seekTo(160, false)">160</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(160, false)">160</a></td>
    <td><a href="javascript:player.seekTo(160, false)"></a></td>
    <td><a href="javascript:player.seekTo(165, false)">165</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(165, false)">165</a></td>
    <td><a href="javascript:player.seekTo(165, false)"></a></td>
    <td><a href="javascript:player.seekTo(170, false)">170</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(170, false)">170</a></td>
    <td><a href="javascript:player.seekTo(170, false)"></a></td>
    <td><a href="javascript:player.seekTo(175, false)">175</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(175, false)">175</a></td>
    <td><a href="javascript:player.seekTo(175, false)"></a></td>
    <td><a href="javascript:player.seekTo(180, false)">180</td>
  </tr>
  

  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(180, false)">180</a></td>
    <td><a href="javascript:player.seekTo(180, false)"></a></td>
    <td><a href="javascript:player.seekTo(185, false)">185</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(185, false)">185</a></td>
    <td><a href="javascript:player.seekTo(185, false)"></a></td>
    <td><a href="javascript:player.seekTo(190, false)">190</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(190, false)">190</a></td>
    <td><a href="javascript:player.seekTo(190, false)"></a></td>
    <td><a href="javascript:player.seekTo(195, false)">195</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(195, false)">195</a></td>
    <td><a href="javascript:player.seekTo(195, false)"></a></td>
    <td><a href="javascript:player.seekTo(200, false)">200</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(200, false)">200</a></td>
    <td><a href="javascript:player.seekTo(200, false)"></a></td>
    <td><a href="javascript:player.seekTo(205, false)">205</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(205, false)">205</a></td>
    <td><a href="javascript:player.seekTo(205, false)"></a></td>
    <td><a href="javascript:player.seekTo(210, false)">210</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(210, false)">210</a></td>
    <td><a href="javascript:player.seekTo(210, false)"></a></td>
    <td><a href="javascript:player.seekTo(215, false)">215</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(215, false)">215</a></td>
    <td><a href="javascript:player.seekTo(215, false)"></a></td>
    <td><a href="javascript:player.seekTo(220, false)">220</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(220, false)">220</a></td>
    <td><a href="javascript:player.seekTo(220, false)"></a></td>
    <td><a href="javascript:player.seekTo(225, false)">225</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(225, false)">225</a></td>
    <td><a href="javascript:player.seekTo(225, false)"></a></td>
    <td><a href="javascript:player.seekTo(230, false)">230</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(230, false)">230</a></td>
    <td><a href="javascript:player.seekTo(230, false)"></a></td>
    <td><a href="javascript:player.seekTo(235, false)">235</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(235, false)">235</a></td>
    <td><a href="javascript:player.seekTo(235, false)"></a></td>
    <td><a href="javascript:player.seekTo(240, false)">240</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(240, false)">240</a></td>
    <td><a href="javascript:player.seekTo(240, false)"></a></td>
    <td><a href="javascript:player.seekTo(245, false)">245</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(245, false)">245</a></td>
    <td><a href="javascript:player.seekTo(245, false)"></a></td>
    <td><a href="javascript:player.seekTo(250, false)">250</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(250, false)">250</a></td>
    <td><a href="javascript:player.seekTo(250, false)"></a></td>
    <td><a href="javascript:player.seekTo(255, false)">255</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(255, false)">255</a></td>
    <td><a href="javascript:player.seekTo(255, false)"></a></td>
    <td><a href="javascript:player.seekTo(260, false)">260</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(260, false)">260</a></td>
    <td><a href="javascript:player.seekTo(260, false)"></a></td>
    <td><a href="javascript:player.seekTo(265, false)">265</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(265, false)">265</a></td>
    <td><a href="javascript:player.seekTo(265, false)"></a></td>
    <td><a href="javascript:player.seekTo(270, false)">270</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(270, false)">270</a></td>
    <td><a href="javascript:player.seekTo(270, false)"></a></td>
    <td><a href="javascript:player.seekTo(275, false)">275</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(275, false)">275</a></td>
    <td><a href="javascript:player.seekTo(275, false)"></a></td>
    <td><a href="javascript:player.seekTo(280, false)">280</td>
  </tr>
  
  <tr>
    <td class="none"><a href="javascript:player.seekTo(280, false)">280</a></td>
    <td><a href="javascript:player.seekTo(280, false)"></a></td>
    <td><a href="javascript:player.seekTo(285, false)">285</td>
  </tr>
  

</table>

And you can see the page at

http://134.117.226.43:8000/check_sub...ty/test101/91/

any help ?

Adding Table Fields Dynamically

Similar Tutorials

View Content

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:&nbsp;</th>
    <td class="propertyCol"><input class="text ui-widget-content ui-corner-all" value="" style="width:210px"></input></th>
    <td class="propertyCol">Description:&nbsp;</th>
    <td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea>&nbsp;</th>
    <td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a>&nbsp;</th>
  </tr>
</table>
    <table width="200" border="0">
  <tr>
    <td class="propertyCol">Output:&nbsp;</th>
    <td class="propertyCol"><input class="text ui-widget-content ui-corner-all" style="width:200px"></input></th>
    <td class="propertyCol">Description:&nbsp;</th>
    <td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea>&nbsp;</th>
    <td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a>&nbsp;</th>
  </tr>
</table>
</div

How To Delete A Table Record In Js?

Similar Tutorials

View Content

Greetings:
On the click of a button, how would I delete a certain record in a database table, w/o refreshing the page? I am new to JS and don't even know where to start. Thanks in advance.

Radio Onclick And Dynamically Populated Table

Similar Tutorials

View Content

Hi all, I have a problem in javascript , ajax and jsp.
Please see this url http://xil.co.in/print_screen_2.JPG.

I am working on this form. There are sum buttons (like submit , add ,edit at bottom of this page , but not visible in printscreen).

On click of a radio button on left side , form fields on right side and small table on right bottom is gettig populated. The table on right bottom , is actually the eligibility criteria associated with the record whose radio was clicked on left . On clicking radio of this record(right side) , I want to populate its values in the above text boxes present right in front of text "Eligibility".

During the whole click process (clicking the left and right radio button ) page should not get refreshed.
I am able to show records on left side by iterating over a resultset (in jsp) and able to populate field on right side also, but have no idea how to populate table on right bottom dynamically such that I can handle onclick event on its radio button.

Pls tell me how to achieve this. Thanks in advance for any help.

Dynamically Creating Elements Inside A Table

Similar Tutorials

View Content

Forgive me, I come from a ColdFusion background and DOM manipulation is not one of my strongest assets. I am trying to dynamically create (and also delete) a row inside a table, which contains three cells that each have three form elements (a input box, a select drop-down box that is populated by a query to a database, and a textarea).

Now all the JavaScript/jQuery examples I've seen for dynamically creating elements are very basic, nothing this complex. Could I get some help?!

This is what I'm trying to dynamically create so that the user can add more options but also delete them. Would the jQuery clone() function be a good choice for this?
Code:

<tr>
	<td>
		<input type="text" id="rejectName" />
	</td>
	<td>
		<select id="divSelectReason">
			<option value="" selected="true">Enter Rejection Reason</option>
			<cfoutput query="queryReasonReturn"> 
				<option>#codeAndReason#</option>
			</cfoutput>
		</select>
	</td>
	<td>
		<textarea id="editReason" cols="30"></textarea>
	</td>
</tr>

Now when a row is dynamically created I also have to access those values as well, so I would assume using a variable that counts each row created, and appends that iteration to the name of that particular element.

How To Dynamically Re-generate Random Numbers In A Table

Similar Tutorials

View Content

i have a table with a couple random numbers, and i want to click a button that will dynamically regenerate the numbers each time the button is clicked without re-generating the entire table., im using DOM and innerhtml for these random numbers. heres the javascript and html code. so far, it just generates the random numbers when the page loads.

var random = Math.floor(Math.random()*40 + 1) //sets variables for random numbers to generate
var random2 = Math.floor(Math.random()*40 + 1)
var random3 = Math.floor(Math.random()*40 + 1)
var random4 = Math.floor(Math.random()*40 + 1)
var random5 = Math.floor(Math.random()*40 + 1)
var random6 = Math.floor(Math.random()*40 + 1)

//create table
function makeTable(lotto)

document.getElementById("tableSpan").innerHTML = '<table border="1" id="lotto">';
var caption=document.getElementById('lotto').createCaption();

caption.innerHTML="JavaScript Random Numbers";

var x=document.getElementById('lotto').insertRow(0);
var cell1=x.insertCell(0);
var cell2=x.insertCell(1);
var cell3=x.insertCell(2);
var cell4=x.insertCell(3);
var cell5=x.insertCell(4);
var cell6=x.insertCell(5);

cell1.innerHTML='<td class = "normal">'+ random +'</td>';
cell2.innerHTML='<td class = "normal">'+ random2 +'</td>';
cell3.innerHTML='<td class = "normal">'+ random3 +'</td>';
cell4.innerHTML='<td class = "normal">'+ random4 +'</td>';
cell5.innerHTML='<td class = "normal">'+ random5 +'</td>';
cell6.innerHTML='<td class = "red">'+ random6 +'</td>';
}

heres the HTML file:

<body onload="makeTable('lotto');">

<div id="container">

<div id="header">
<h1>Welcome</h1>
</div>

<div id="content">
<span id="tableSpan"></span>
<input type="button" value="Re-generate Numbers" onclick="makeTable('lotto');" />
</div>

{

Dynamic Table Broken Delete Row Function

Similar Tutorials

View Content

Hi All,

I am working on a script that creates a table, taking the data from a number of text fields and populating the table cells with it. Originally I had to start with an existing table containing one blank row but I was able to get the script to create the table dynamically.

Unfortunately I seem to have broken my delete row function (this was working fine when the script started with an existing table). The error I am getting is:

TypeError: 'cells.0.childNodes' is null or not an object

I googled this but could not find anything to help. I don't have alot of javascript experience and need help from the experts.

Thanks in advance for all your help guys!

Kind regards,

Ken

Code:

<!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 src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>

</style>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />

</head>
<SCRIPT language="javascript">         
function addRow(tableID) {
    if (!document.getElementById(tableID)) {
        //alert("the table does not exist");
        var body = document.getElementsByTagName("body")[0];

        // creates a <table> element and a <tbody> element
        var tbl = document.createElement("table");
        var tblBody = document.createElement("tbody");
        var newRow = document.createElement("tr");
        
        // add the row to the end of the table body
        tblBody.appendChild(newRow);
        
        // put the <tbody> in the <table>
        tbl.appendChild(tblBody);
        
        // appends <table> into <body>
        body.appendChild(tbl);

        // sets the id of "dataTable" and border attribute of tbl to 0;
        tbl.setAttribute("id", "dataTable");
        tbl.setAttribute("border", "0");
        }

    var StartTime = document.getElementById('StartTime');
    var EndTime = document.getElementById('EndTime');
    var MaterialID = document.getElementById('MaterialID');
    var Title = document.getElementById('Title');               
    
    var table = document.getElementById(tableID);               
    
    var rowCount = table.rows.length;             
    var row = table.insertRow(rowCount);               
    
    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";             
    cell1.appendChild(element1);               
    
    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");             
    element2.type = "text";
    element2.setAttribute("name","StartTime[]");
    element2.value = StartTime.value;             
    cell2.appendChild(element2);
    StartTime.value="";              
    
    var cell3 = row.insertCell(2);
    var element3 = document.createElement("input");             
    element3.type = "text";
    element3.setAttribute("name","EndTime[]");
    element3.value = EndTime.value;             
    cell3.appendChild(element3);
    EndTime.value=""; 

    var cell4 = row.insertCell(3); 
    var element4 = document.createElement("input");             
    element4.type = "text";
    element4.setAttribute("name","MaterialID[]");
    element4.value = MaterialID.value;            
    cell4.appendChild(element4);
    MaterialID.value="";               
    
    var cell5 = row.insertCell(4);
    var element5 = document.createElement("input");             
    element5.type = "text";
    element5.setAttribute("name","Title[]");
    element5.value = Title.value; 
    cell5.appendChild(element5);
    Title.value="";              
}           
function deleteRow(tableID) {
	if (document.getElementById(tableID)) {
    //alert("the table exists");
    try {             
        var table = document.getElementById(tableID);             
        var rowCount = table.rows.length;               
        for(var i=0; i<rowCount; i++) {                 
            var row = table.rows[i];                 
            var chkbox = row.cells[0].childNodes[0];                 
            if(null != chkbox && true == chkbox.checked) {                     
                table.deleteRow(i);                     
                rowCount--;                     
                i--;                 
            }               
        }             
    }catch(e) {                 
        alert(e);             
    }         
}
}        
</SCRIPT> 
<body>
<span id="spryStartTime">
<label for="StartTime">Start Time:</label><br />
<input name="StartTime" type="text" id="StartTime" tabindex="1" size="10" maxlength="8" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br />
<label for="EndTime">End Time:</label><br />
<span id="spryEndTime">
<input name="EndTime" type="text" id="EndTime" tabindex="2" size="10" maxlength="8" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br />
<label for="MaterialID">Material ID:</label><br />
<span id="spryMaterialID">
<input name="MaterialID" type="text" id="MaterialID" tabindex="3" size="10" maxlength="10" />
<span class="textfieldRequiredMsg">A value is required.</span></span><br />
<label for="Title">Title:</label><br />
<span id="spryTitle">
<input name="Title" type="text" id="Title" tabindex="4" size="50" maxlength="50" />
<span class="textfieldRequiredMsg">A value is required.</span></span><br />
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />       
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />       

<script type="text/javascript" />
var sprytextfield3 = new Spry.Widget.ValidationTextField("spryStartTime", "time", {validateOn:["blur"], format:"HH:mm:ss", useCharacterMasking:true});
var sprytextfield4 = new Spry.Widget.ValidationTextField("spryEndTime", "time", {format:"HH:mm:ss", useCharacterMasking:true, validateOn:["blur"]});
var sprytextfield5 = new Spry.Widget.ValidationTextField("spryMaterialID", "none", {validateOn:["blur"]});
var sprytextfield6 = new Spry.Widget.ValidationTextField("spryTitle", "none", {validateOn:["blur"]});
</script>

</body>
</html>

How To Build The Following Script.

Similar Tutorials

View Content

Hi,

I'm just learning javascript.

I need one script for the following data.

I'm having three headings.

heading 1
heading 2
heading 3

on clicking heading 1 it opens

subheading 1
subheading 2

on clicking subheading 1 it opens

subsubheading 1
subsubheading 2

My problem is when I open heading 1 it opens subheading 1 and 2, when I open heading 2, contents of heading 1 must disappear(switch contents) and only contents of heading 2 must appear.

When I use style display: none, contents are moving on opening others.

Trying To Build A Talent Calculator

Similar Tutorials

View Content

I could use some help. I'm technically a CSS/Javascript newbie, so I have no idea where to start. I've been researching the past few hours, but I'm completely lost.

If anyone could help, I would greatly appreciate it. I don't need someone to build the whole thing for me.

What I could use, is an example.

Basically a simple setup that someone could create real quick would help.

For the example, if anyone has the time and willing to help, make this type of simple setup.

I basically look at wow's talent cal, but this isn't a wow talent calculator. It's for a different game.

I still need 3 trees. You don't have to put in a ton of icons or mouseover tooltips.

I would like this though(for a quick setup):

3 talent trees
2 talent points per tree
each talent has at least 1 talent point that can be added
tooltip that could say like "0%" with 0 talent points in it, and say "33%" when 1 talent point is added.
If possible make the 2nd tier unactive until 1st tier has the point in it.

This would be a simple setup. I don't know how to go about doing it. But, if someone could create something like this, and perhaps a "howto" of how to add new talents, like where to add them in the script files, it would be appreciate.

I know this is a lot of work, but any help ie appreciated.

Build Html In Javascript

Similar Tutorials

View Content

I am building a portion of html in a javascript loop. Everything is working great except for the function call I am trying to build inside the div.

The resulting html when rendered in a page looks like

Code:

<div onclick="ShowMyPopupSetRead(" a','a','a','a')=""><u style="color: blue; cursor: pointer">   Hello </u></div>

you can see the quotation in the beginning of the function call throws the whole thing off. Below you can see how I am building the string.

Code:

var assembledCall = "onclick='ShowMyPopupSetRead('" + subject + "','" + sender + "','" + reciever + "','" + id + "')";$('#MailTable').append("<div " + assembledCall + "><u style='color: blue; cursor: pointer'> " + subject + " </u></div>");

can any one see where my problem is?

How To Build In Link From Array

Similar Tutorials

View Content

I want to create a 'go forward' and 'go back' link on each of roughly 100 pages. Rather than insert a hyperlink (a href) I would like to build it from an array or list, because the actual links may change.
So I was hoping there may be a way to do something like this: link xxx.html+1 or xxx.html-1

I have no idea if this is even the right forum for this!

Thanks for your help.

Animation Build Up - How To Stop

Similar Tutorials

View Content

Hi I am new here, am having a terrible problem with animation build up.
have searched and found various codes to stop,but can't implement in the .js in a way that works. Maybe am putting in wrong place.

Wondering if anyone can help, would really appreciate it.
Following is the code:
Thank you

Code:

 
var droplinemenu={

arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 600}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid){
	jQuery(document).ready(function($){
		var $mainmenu=$("#"+menuid+">ul")
		var $headers=$mainmenu.find("ul").parent()
		$headers.each(function(i){
			var $curobj=$(this)
			var $subul=$(this).find('ul:eq(0)')
			this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
			this.istopheader=$curobj.parents("ul").length==1? true : false
			if (!this.istopheader)
				$subul.css({left:0, top:this._dimensions.h})
			var $innerheader=$curobj.children('a').eq(0)
			$innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
			$innerheader.append(
				'<img src="'+ droplinemenu.arrowimage.src
				+'" class="' + droplinemenu.arrowimage.classname
				+ '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
			)
			$curobj.hover(
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					if ($targetul.queue().length<=1) //if 1 or less queued animations
						if (this.istopheader)
							$targetul.css({left: $mainmenu.position().left, top: $mainmenu.position().top+this._dimensions.h})
						if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
							$mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
						$targetul.slideDown(droplinemenu.animateduration.over)
				},
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					$targetul.slideUp(droplinemenu.animateduration.out)
				}
			) //end hover
		}) //end $headers.each()
		$mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
	}) //end document.ready
}
}

What's The Best Programming Language To Build This?

Similar Tutorials

View Content

I'm currently using an automation software to automate a series of steps I perform on my computer. One of the tasks involves hundreds of If/Then loops, extracts text from websites using an embedded web browser, computes equations and write text files.

The thing is, in order to share this with somebody else, they also need the same automation software installed, and then need to import it. So it's a process I'm trying to replace by creating a small program with a GUI that involves a simple installation on the user's PC (or ideally without installation). The language must be flexible enough to perform the same actions that I listed above - and more preferably. I'm a complete novice with anything besides HTML/CSS so I'm looking for

A flexible programming language that isn't rocket science to learn from scratch and is ideal for small stand-alone programs
The ability to create a GUI. I'd be happy to read any good reference you have about the language/design knowledge needed for GUI's.

Thanks in advance

Javascript Value From Prompt To Build A Link

Similar Tutorials

View Content

I know I'm missing something ever so small but maybe you guys can help... Thanks all

<code>

<script type="text/javascript">
function insertLink() {
var lnk = prompt("Enter Link [http://www.url.com]");
var href = lnk.value;
var lnkBuild = '<a href=" + href + "></a>'
alert(lnkBuild);

}
}

</script>

</code>

Dynamically Changing Ids

Similar Tutorials

View Content

ok i have a script which will make a copy of the html in a div and place it into another div the problem with this it creates a duplicate element with the same id so what i want to know is can i create a new id based off old ids using a generic type script

Code:

function scope(e)
{
var popin = document.getElementById('popin');
popin.innerHTML = "<div class='container'>"+e.innerHTML+"</div>";
popin.style.display = "block";
}

this code is designed for taking content in a small div and placing it into a larger div to increase the viewing area

so what i would need is sumthing that can look for
Code:

id="sum text"

and maybe amend it to
Code:

id="sum textP"

or sumthing to that extent if sum1 could point me in the right direction that would be great if my post is not clear enough just ask me to be more specific or sumthing and i will see what i can do to try and make it more clear if needed

Dynamically Set An Event - Possible?

Similar Tutorials

View Content

note: this is not homework

Hi all,

Currently I am doing this:

Code:

var e = document.getElementById('id');
e.style.color = '#ff0000';
e.style.fontFamily = 'sans-serif';
e.innerHTML = time;
...blah blah...

What I'm actually doing is inserting the current time into an existing DIV and updating it every second. THAT all works.

What I want to do is also set an event for that div.... something like this:

e.event.onclick = 'runThisCode()';

Of course, the above doesn't work... and I'm not even sure what to ask for doing a Google search... because I get no hits (or maybe it's not possible).

So, is it possible, and if so, how?

Thanks!

-- Roger

p.s. I really don't want to edit the code itself (where that div is) because it's part of another app that may change as they update it and I don't want to have to re-patch every new release.