Learn VBA & Macros in 1 Week!

JavaScript - Problem With Several Rows For Fade Effect

Full Excel VBA Course - Beginner to Expert

Problem With Several Rows For Fade Effect	View Content

okay i have a problem...i get the content of my rows from my database... the problem is when there is 4 rows... and i try to click on the 1st row... instead of it being deleted the 3rd row is deleted.. when i click on the 2nd row... the 4th row is delete...

the moveicon.gif is the image for deleting the row.. there is no problem when i remove the javascript...but when i applied it i noticed the poblem

Code:

<table width="759" border="0">
    <tr>
      <td colspan="5"><span class="style8">Confirmed Request</span> </td>
    </tr>
    <tr>
      <td width="105" bgcolor="#408080"><span class="style5">Type</span></td>
      <td width="463" bgcolor="#408080"><span class="style5">Topic</span></td>
      <td width="108" bgcolor="#408080"><span class="style5">Date</span></td>
      <td width="25" bgcolor="#408080"><div align="center"></div></td>
      <td width="36" bgcolor="#408080"><div align="center"></div></td>
    </tr>
<%@ page import="com.sun.rowset.CachedRowSetImpl;" %>
<%
	


	int i = 0;
 	CachedRowSetImpl crset3 = new CachedRowSetImpl();
    crset3 = view.home2();
    
    	while (crset3.next())
		{
		
	String day3 = crset3.getString("dep_date");
		
	  String[] monthcol2= day3.split("-");
      
       year = Integer.parseInt(monthcol2[0]); 
       month = Integer.parseInt(monthcol2[1]);
       day= Integer.parseInt(monthcol2[2]);
       m="";
      
      if(month==1)
      {
      m="Jan";
      }
      else if (month==2)
      {
      m="Feb";
      }
      else if (month==3)
      {
      m="March";
      }
      else if (month==4)
      {
      m="April";
      }
      else if (month==5)
      {
      m="May";
      }
      else if (month==6)
      {
      m="June";
      }
      else if (month==7)
      {
      m="July";
      }
      else if (month==8)
      {
      m="Aug";
      }
      else if (month==9)
      {
      m="Sept";
      }
      else if (month==10)
      {
      m="Oct";
      }
       else if (month==11)
      {
      m="Nov";
      }
      else if (month==12)
      {
      m="Dec";
      }
      
      
		if(i==0)
		{
		%>
     <tr>
<script src="images/jquery-latest.js"></script>

<script type="text/javascript">
<!--
function confirmation1(){
        var answer = confirm("Do you want to move this to archives?")
	if (answer){

		$("#movieIcon").parents("tr").fadeOut("slow");		
window.location = "http://localhost:8080/ICTPROJ/deployment/archiver.jsp?r=<%=crset3.getString("ref_num")%>&t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>";
	}
	else{
	}

    }
//-->
</script>

      <td  scope="row"><fade1><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_type") %> </span>&nbsp;</div></fade1></td>
   	  <td  scope="row"><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_name")%></a>
</span>&nbsp;</div></td>
       <td > <span class="style7">
       <% out.println(day);%>
       <% out.println("-");%>
       <% out.println(m);%>
       <% out.println("-");%>
       <% out.println(year);%> 
       </span></td>
       <td ><div align="center"><a href="http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>" onClick="chw=window.open('http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>','NewWindow','resizable=yes,scrollbars=yes,status=yes,width=640,height=500'); if (chw != null) chw.focus(); return false"><img src="../Chapters/images/reporticon.gif" border="0"></a></div></td>
       <td ><div align="center"><img id="movieIcon" src="images/moveicon.gif" width="29" height="29" border="0" onClick="confirmation1()"/></div></td>
    </tr>
<%
			i=1;
		}
		else
		{
%>
      <tr>
<script type="text/javascript">
<!--
<!--
function confirmation(){
        var answer = confirm("Do you want to move this to archives?")
	if (answer){

		$("#movieIcon1").parents("tr").fadeOut("slow");		
window.location = "http://localhost:8080/ICTPROJ/deployment/archiver.jsp?r=<%=crset3.getString("ref_num")%>&t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>";
	}
	else{
	}

    }
//-->
//-->
</script>

         <td bgcolor="#CCCCCC" scope="row"><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_type") %></span>&nbsp;</div></td>
   	  <td bgcolor="#CCCCCC" scope="row"><div align="left" class="style22"><span class="style7"><%= crset3.getString("dep_name")%>
</span>&nbsp;</div></td>
        <td bgcolor="#CCCCCC"> <span class="style7">
        <% out.println(day);%>
        <% out.println("-");%>
        <% out.println(m);%>
        <% out.println("-");%>
        <% out.println(year);%> 
        </span></td>
        <td bgcolor="#CCCCCC"> <a href="http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>" onClick="chw=window.open('http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>','NewWindow','resizable=no,scrollbars=yes,status=no,width=640,height=500'); if (chw != null) chw.focus(); return false"><div align="center"><img src="../Chapters/images/reporticon.gif" border="0"></div>
        </a></td>
        <td bgcolor="#CCCCCC" ><div align="center"><img id="movieIcon1" src="images/moveicon.gif" width="29" height="29" border="0" onClick="confirmation()"></div></td>
    </tr>
<%	
			i=0;
    	}
    }
%>
  </table>

Full Excel VBA Course - Beginner to Expert

Fade Effect Help?

Similar Tutorials

View Content

I need to have an image hyperlinked to a js function that fades text elswhere on the page. I imagine it looks something like <a href="(some js function or somethingrather"><img src="theimg.png"></a>, but how do I do it exactly? I would like code that I can just copy and paste in my header that is set to fade a specific line of text, and be able to hyperlink and image to initiate the js. Please help.

Carson
www.carsonkahn.com

Fade Effect For Images

Similar Tutorials

View Content

Hi,
I have problem with javascript for image effects...

Here is the LINK...

login with theese nick and pass:
nick: google
pass: googleads

the problem:

When you log into, on the top of the page are 4 images with fade effect...
But effect is wrong. When I came first I see those images in full collors. How to change my script to show them in grey when I first came?

Thanks in advance...

Fade Effect Works In Ie, But Not In Ff

Similar Tutorials

View Content

Hi,

Please see URL http://backstageweb.net/Salon/indexslides2.htm.

(code is below, original source: http://javascript.internet.com/misce...lide-show.html

The slide show cross-fade effect in this script works in IE, but not in FF. I know there are better scripts I could use, but I like this one because of its simplicity (doesn't require any accompanying CSS, etc). But I need it to work in all browsers. Is there a simple fix here?

Thanks,

John

Code:

<head>
<script type="text/JavaScript">
<!-- Original:  CodeLifter.com (support@codelifter.com) -->
<!-- Web Site:  http://www.codelifter.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/01.jpg'
Pic[1] = 'images/02.jpg'
Pic[2] = 'images/03.jpg'
Pic[3] = 'images/04.jpg'
Pic[4] = 'images/05.jpg'

// do not edit anything below this line
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.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
//  End -->
</script>
</head>

Code:

<body onLoad="runSlideShow()">

Code:

<div id="slides">
    <img src="images/01.jpg" name='SlideShow' width="380" height="541"> 
  </div>

Adding A Fade Effect To A Slideshow

Similar Tutorials

View Content

Hello all! This is my first time in the forum and I have been reading for a while. The information in here appears to be very accurate and useful. I am new to JavaScript. I have been programming sites for a while but have been using Flash for most of my animation and never really got into the ActionScript. Thanks to Apple... I can no longer use that crutch. So as I post in this forum please understand 2 things: 1 I am a beginner in JavaScript and 2. I want to learn not just copy, paste and move on!

Here is my issue: I have made a VERY SIMPLE slide show and it works perfectly. However, Now I want to add a fade in and out effect to the code. I have seen this done with the CSS opacity(alpha) and that seems to be the simplist way. However, I am having trouble fitting this into my code. Any direction in this matter would be great! Thanks so much!

Code:

	
var step=1
function switchImg()
{
if (!document.images)
return						
document.images.slide.src=eval("image"+step+".src")
if (step<9)
step++
else
step=1
setTimeout("switchImg()",3500)
}
switchImg()

Changing A Slide Effect To A Fade Help?

Similar Tutorials

View Content

I am currently trying to convert a relatively simple slide effect in javascript to a fade effect, I have attached the code below and be grateful if anyone can help,

var slider = null;
var slider_next = null;

$(function () {

var interval = setInterval('rotate_slider()', 11000);

pos = (window.location.pathname == "/" || window.location.pathname == "/home" ? '1280' : '1280');

$('#featuredSlider > div:not(:first)').attr('style','position:absolute;left:'+ pos +'px;width:1280px');
$('#featuredSlider > div:first').next().attr('style','position:absolute;left:0px;width:1280px');

$('#featuredShortcuts > div').click( function() {

clearInterval(interval);

sliders = $('#featuredSlider > div:not(:first)');

sliders.css({"left": "1280px", "opacity": 0});

var curr_div = $(this);
var selected_div = $('#featuredShortcuts > div.selected');

selected_div.toggleClass('selected');
curr_div.toggleClass('selected');

sliders.eq( parseInt(selected_div.attr('id').substr(1, 1)) ).animate({"left": "-=1280px", "opacity": 0}, 1000);
sliders.eq( parseInt(curr_div.attr('id').substr(1, 1)) ).animate({"left": "0px", "width": "1280px", "opacity": 1}, 1000);
});
});

function rotate_slider()
{
var next = null;
var curr_div = $('#featuredShortcuts > div.selected');

if( $('#featuredShortcuts > div:last').hasClass('selected') )
{
next = $('#featuredShortcuts > div:first');
}
else
{
next = curr_div.next();
}

curr_div.toggleClass('selected');
next.toggleClass('selected');

if( ! slider )
{
slider = $('#featuredShortcuts').next();
slider_next = slider.next();
}
else if ( slider_next.html() == $('#featuredSlider > div:last').html() )
{
slider = slider.next();
slider_next = $('#featuredShortcuts').next();
}
else if ( slider.html() == $('#featuredSlider > div:last').html() )
{
slider = $('#featuredShortcuts').next()
slider_next = slider_next.next();
}
else
{
slider = slider.next();
slider_next = slider.next();
}

slider.animate({"left": "-=1280px", "opacity": 0}, 1000);
slider_next.animate({"left": "0px", "width": "1280px","opacity": 1}, 1000, function () { slider.css('left', '1280px') });

}

Need Help Adding Fade Effect To My Javascript Slideshow

Similar Tutorials

View Content

PHP 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 type="text/javascript">

</script>
</head>

<body>
<img src="images/slideshow/image001.jpg" name="slide">

<script type="text/javascript">

</script>
</body>
</html>

Swap Display Action With Fade Effect Need Help

Similar Tutorials

View Content

Adding Fade Effect To Slideshow Script

Similar Tutorials

View Content

Hello - I'm trying to add a fade effect between slideshow transitions. The script I'm building from is the Rich HTML Slideshow script which appears below.

The slides that rotate are wrapped in <div> tags with a class of "dyncontent" and I've managed to make the slideshow transition just fine, but not with any kind of fade effect. It just "snaps" from one slide to the next. Is this a fairly simple addition? Thanks!
<script type="text/javascript">

if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n')
document.write('.dyncontent{display: none; width: 250px; height: 60px;}\n')
document.write('</style>')
}

var curcontentindex=0
var messages=new Array()

function getElementByClass(classname){
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=alltags[i]
}
}

function rotatecontent(){
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
messages[prevcontentindex].style.display="none" //hide previous message
messages[curcontentindex].style.display="block" //show current message
}

window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent")
setInterval("rotatecontent()", 2000)
}
}

</script>

Javascript Noob: Onmouseover Color Fade/change Effect Help

Similar Tutorials

View Content

Hello everybody!

This is my first post at CodingForums!

I'm currently designing a wordpress theme, and I require a bit of javascript for a hover effect. I'm using Wordpress Jquery + Jquery Color Animations plugin.

The structu
I use a div (class="post") as a container for the wordpress post, and within the "post" div, I have a span (class="title") which I use to display the title of the post.

What I want to do is:
when the user hovers over (OnMouseOver) "post" div:
".title" spans's background color fades from black to red.

when the user hovers out (OnMouserOut) "post" div:
".title" spans's background color fades back to black.

The Code

Code:

$j(document).ready(function(){
	$j(".posts").hover(function(){
	$j (".posts .title").animate({ backgroundColor: "#FF0062" }, 300);
	},function(){
	$j(".posts .title").animate({ backgroundColor: "#231F20" }, 300);
	});
	});

The Problem

The code works, except when the user hovers over any "post" div, all "title" span change color. So my question is, how do I target the code to address ONLY the "title" span in the "post" div that is in hover state?

Any help would be greatly appreciated,

Cheers,

Drew.

Using Dynamically Populating A Javascript Image Slideshow- Fade Effect?

Similar Tutorials

View Content

http://www.javascriptkit.com/javatut...rnalphp2.shtml

Anyone have a decent way of adding a fade affect to this script?

Jquery Picture Fade Script To Fade Background Image?

Similar Tutorials

View Content

This is a really awesome script that I'm sure all of you can put to use if you haven't yet heard of it.
However, I'm trying to get it to fade a background image on my css styled navigation for my a:hover.

Here is the script with a little simple tutorial on how to set it up:
http://bavotasan.com/tutorials/creat...r-fade-effect/

My only other knowledge is in PHP, so after about 2 hours of fail in this client-side language, I decided it was about time I should post where some experienced people can help.

I really appreciate all time you spend on this, and don't think it will take a moderate Javascript programmer very long.

This is the link to my site so far:
http://matt.mw/help-request

You can see the script working as it is on my little yellow MW logo on the right side of the navigation.

So in my scenario, I am looking to fade button.png to button-hover.png (both repeating on the x axis).

Any ideas?

How To Make A Page Fade Out, Then Fade In, With Different Text

Similar Tutorials

View Content

Hello, I'm learning javascript, and was wondering if it was Possible to have buttons/links that you click, the whole page fades out, and then fade's in, with different stuff. here are my ideas for just changing the stuff

Text:
1. having a javascript src file to start, and then when the button is clicked, that is formatted to white, the text layer is moved down, and a new javascript file is loaded?

2.variables?

any help would be appreciated!

Thanks, Cookies, whatever this forum gives out, you may receive!

Jquery- Ie Fade Problem

Similar Tutorials

View Content

Hi,

I have a problem with a fade script using jquery,
in firefox etc.. all is ok.

But IE the fade does not fade it just comes in & out.

If any one would be kind enough to have a quick look
I would appreciate it.

You can see the js in the main page, not an external file.

The url is www.thecityspa.co.uk

Jquery Fade - Problem With Text

Similar Tutorials

View Content

Hi,

This must be a 1st.

It works ok in IE...But not in Firefox?

I need to use white text over a dark bg color or if possible over an image.
The problem is in FF the white text distorts on fade

The black text works ok when adding the white bg.

See my test code below. (It can be copied straight in to test)

If anyone could please take a quick look and give some pointers.

Code:

 <!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML DIR="LTR" LANG="en">
<head>
<title>Working-Test-Banner</title>
<style type="text/css">
#welcomebanner img {border: none;}
#wrapper{position:relative;}
#welcomebanner {margin: 0; padding: 0;  position:relative;background-color:color:#fff;}
#welcomebanner ul, #welcomebanner li {margin: 0; padding: 0; list-style: none;}
#welcomebanner li {display: none;}

p{font-size:30px;background-color:purple;color:#fff;}

h2{font-size:30px;background-color:#fff;color:#000;}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
	var $j = jQuery;
	var welcomeBannerTimer;
	
	function nextSlide(){
		var el = $j('#welcomebanner');
		var slides = el.data('slides');
		var c = el.data('slideIndex');
		var n = ((c+1) >= slides.length)? 0 : c+1;
		el.data('slideIndex', n);
		$j(slides[c]).fadeOut(null, function(){
			$j(slides[n]).fadeIn();
			
		});
	}
	
	function over(){
		clearInterval(welcomeBannerTimer);
	}
	
	function out(){
		welcomeBannerTimer = setInterval(nextSlide, 3000);
	}
	
	$j(window).load(function() {
		var el = $j('#welcomebanner');
		var slides = $j('#welcomebanner>li');
		if (slides.length < 2){
			$j(slides[0]).show();
			return;
		}
		el.data('slides', slides);
		el.data('slideIndex', 0);
		welcomeBannerTimer = setInterval(nextSlide, 3000);
		el.bind('mouseenter', over).bind('mouseleave', out);
		$j(slides[0]).show();
		
	});
	
	
</script>

</head>
<body>

<div id="wrapper">

<ul id="welcomebanner">

  <li>

	<h2>testing the text fade</h2>
	<p>testing the text fade</p>

 </li>  

 <li>  

<h2>Firefox and IE problems</h2>
	<p>Firefox and IE problems</p>

 </li>  
   
</ul>

</div>
</body>
</html>

Image Fade And Cycle Problem

Similar Tutorials

View Content

Hi,

I'm building a website which uses javascript to cycle through and fade images in the header portion of each web page. The javascipt os located in an external file and called via the master page. Here is the code in the content.js file which specifies where the images are located:

Code:

// create array of images
var CyclingImages = new Array("header/images/tankimage1.gif",
                              "header/images/tankimage2.gif", 
                              "header/images/tankimage3.gif",
                              "header/images/tankimage4.gif")

Here is the code in the master page which finds the javascript:

Code:

 <script language="javascript" src="<%= Page.ResolveUrl("~/content/content.js") %>"  type="text/javascript"></script>

Here is the function call in the masterpage to fade and cycle the images:

Code:

<body onload="FadeAndCycleImages()">

Here is the code in the masterpage which references the cycling images:

Code:

<span class="fadingimages">
                <img src="<%= Page.ResolveUrl("header/images/tankimage1.gif") %>" width="142" height="124" title="" alt="" name="cyclingimage"  />
            </span>

Each webpage loads the masterpage. If the webpage is located at the root of the project, the cycle and fade functionality works great. When I start to place some of the webpages in separate folders - which I need to do - the cycling and fading functionality breaks down, meaning the images cannot be found. The image place holder is there with the standard red "x" in the upper left. I have done a lot of research and tried many approaches to try to resolve this issue, but with no success. The root of the problem seems to lie in the fact that I cannot apply Page.ResolveUrl within the content.js file. Any suggestions would be greatly appreciated.

Thank you,
petela

Problem With Javascript Fade Images Script In I.e.

Similar Tutorials

View Content

Hi

We've been trying to work out the solution to this problem all day now, and no luck. So I'm hoping someone here maybe able to help.

We're using a fade image slideshow from : http://www.javascriptkit.com/script/...tionshow.shtml

On our webpage: http://lovelyhotels.co.uk/lvm/contact.htm

It works perfectly in Firefox, Chrome and Safari. However in I.E. ( were using v.9) it shows no images at all, just a blank space

The code is exactly the same as the page on javascriptkit yet his images fade as they should in IE and ours do not show at all.

Anyone got any ideas at all what maybe wrong

Many thanks!

Star Trail Effect Problem

Similar Tutorials

View Content

Hi my relative wanted this star trail effect on the site: http://www.crazy-stuff.biz/side9023.html

I did similar effect below but I couldn't make smaller stars on trail, how can I achieve this?
http://www.aymavisi.org/new_page_6.htm

Problem With Dynamic Table Rows Sum

Similar Tutorials

View Content

have created dynamic table with two columns
for ex:first column is Income column
and second column is tax from Income
at the third column are different percent options
for ex. I wrote first column 1000 and chose from third drop down box 10%
I would like when i chose 10% sum function automatically writes 10% percent of 1000 into second column so that 100
here is code if possible pls help me i really need this code and i bellieve that this code is useful both me and other users
thanks beforehand
here si code

Code:

<html><head><title>dinamik sheet</title>
 
<script> 
function addrow(){
 
var tbl=document.getElementById('sheet');
var lastrow=tbl.rows.length;
var iteration=lastrow;
var row=tbl.insertRow(lastrow);
var cellLeft=row.insertCell(0);
var textNode=document.createTextNode(iteration);
cellLeft.appendChild(textNode);
var cellRight=row.insertCell(1);
var el=document.createElement('input');
el.type='text';
el.name='txtRow'+iteration;
el.size=40;
el.setAttribute('sumMe',"1");
el.onBlur=sum;
 
 
cellRight.appendChild(el);
 
var cellRight2=row.insertCell(2);
var el1=document.createElement('input');
el1.type='text';
el1.name='txtRowe'+iteration;
el1.id='txtRowe'+iteration;
el1.size=40;
el1.setAttribute('sumMe',"1");
 
cellRight2.appendChild(el1);
 
 
 
 
 
var cellRightsel=row.insertCell(3);
var sel=document.createElement('select');
sel.name='selRow'+iteration;
sel.options[0]=new Option('10%','value="10"');
sel.options[1]=new Option('20%','value="20"');
sel.options[2]=new Option('30%','value="30"');
cellRightsel.appendChild(sel);
var cellRightsel2=row.insertCell(4);
 
}
</script>
<script> 
function sum(){	
var form=document.getElementById('eval_edit');
	if(!form) return;
	var s1 = 0;
	var s2 = 0;
	var tbl=document.getElementById('sheet');
	var iteration=tbl.rows.length-1;
	for(var i=1; i<=iteration; i++){
		var el = form['txtRow'+i];
		if(!el) continue;
		var txt = el.value;
		if(txt != ( '' + Number(txt) )) continue;//reject non-numeric entries
		var el2 = form['selRow'+i];
		var el3 = document.getElementById('txtRowe'+i);
		if(!el2 || !el3) alert('Error in calculating totals');
		var percent = Number(el2[el2.selectedIndex].value)/100;
		var tax = Number(txt) * percent;
		el3.innerHTML = tax.toFixed(2);
 
		s1 += Number(txt);
		s2 += tax;
	}
	if(form['total']){ form['total'].value = s1.toFixed(2); }
	if(form['taxtotal']){ form['taxtotal'].value = s2.toFixed(2); }
}
 
 
onload = function(){
sum();
}
 
</script>
</head>
<body>
<form name="eval_edit" method="POST">
<table align="center" width="75%">
<tr>
<td align="center">Balance sheet</td></tr>
<tr><td align="center">
<table border="1" id="sheet"><tr><td>object</td><td>Income</td><td>Tax from income</td><td>instruktor</td></tr>
<tr><td>1</td>
<td><input sumMe="1" type="text" name="txtrow1" id="txtrow1" size="40"/></td><td><input sumMe="1" type="text" name="txtrowe" id="txtrowe" size="40"/></td>
<td><select name="selRow0">
<option value="value="10">10%</option>
<option value="value="20">20%</option>
<option value="value="30">30%</option></select></td></tr></table>
INCOME SUM<input name="total" type="text"/>
<input type="button" value="Add" onclick="addrow()" /> 
<input type="button" value="Remove" onclick="removeRow()" /> 
<input type="button" value="SUM" onClick="sum()"/> 
<input type="submit" value="Submit" /> <input name="taxtotal" type="text"/>Tax SUM with desirable percent for ex: 20%
</td> 
</tr> 
</table> 
</form> 
 
</body> 
 
</html>

Dynamic Table Sum Of Rows Problem

Similar Tutorials

View Content

hi
I have just took from internet dinamic table. this table is dynamic and its rows dynamically can be increased.
it sum but not like integer
for ex. in row1 i enter 20 and in row2 i enter 5
it sums like 205 but i need it sums like 25
if possible pls help me
Thanks beforehand
here is code

Code:

<html> 
<head> 
<title></title> 
<script type="text/javascript"> 
 
 
function addRow() 
{ 
// grab the element, i.e. the table your editing, in this we're calling it 
// 'mySampleTable' and it is reffered to in the table further down on the page 
// with a unique of id of you guessed it, 'mySampleTable' 
var tbl = document.getElementById('mySampleTable'); 
// grab how many rows are in the table 
var lastRow = tbl.rows.length; 
 
// if there's no header row in the table (there should be, code at least one 
//manually!), then iteration = lastRow + 1 
var iteration = lastRow; 
// creates a new row 
var row = tbl.insertRow(lastRow); 
 
// left cell 
// insert a cell 
var cellLeft = row.insertCell(0); 
// here we're just using numbering the cell, like anything else you don't 
// have to use this, but i've kinda noticed users tend to like them 
var textNode = document.createTextNode(iteration); 
// takes what we did (create the plain text number) and appends it the cell 
// we created in the row we created. NEAT! 
cellLeft.appendChild(textNode); 
 
// right cell 
// another cell! 
var cellRight = row.insertCell(1); 
// creating an element this time, specifically an input 
var el = document.createElement('input'); 
// a data type of text 
el.type = 'text'; 
// the name of the element txtRow, and because this is dynamic we also 
// append the row number to it, so for example if this is the eigth row 
// being created the text box will have the name of txtRow8. super fantastic. 
el.name = 'txtRow' + iteration; 
// the exact same thing with a unique id 
el.id = 'txtRow' + iteration; 
// set it to size of 40. setting sizes is good. 
el.size = 40; 
el.rel = 'sum';
 
// same thing as earlier, append our element to our freshly and clean cell 
cellRight.appendChild(el); 
 
// select cell 
// our last cell! 
var cellRightSel = row.insertCell(2); 
// create another element, this time a select box 
var sel = document.createElement('select'); 
// name it, once again with an iteration (selRow8 using the example above) 
sel.name = 'selRow' + iteration; 
// crates options in an array 
// the Option() function takes the first parameter of what is being displayed 
// from within the drop down, and the second parameter of the value it is carrying over 
sel.options[0] = new Option('text zero', 'value0'); 
sel.options[1] = new Option('text one', 'value1'); 
sel.options[2] = new Option('text two', 'value2'); 
// append our new element containing new options to our new cell 
cellRightSel.appendChild(sel); 
} 
 
function removeRow() 
{ 
// grab the element again! 
var tbl = document.getElementById('mySampleTable'); 
// grab the length! 
var lastRow = tbl.rows.length; 
// delete the last row if there is more than one row! 
if (lastRow > 2) tbl.deleteRow(lastRow - 1); 
} 
 
</script> 
 
<script type="text/javascript"> 
function sum() {
   var elem = document.getElementById('eval_edit').elements;
 
   // loop fields in form
   for (var i = 0; i < elem.length; i++) {
      // check if field has attribute 'rel' with value of 'sum'
      if (elem[i].getAttribute('rel') == 'sum') {
         // parse value as integer and copy to total field
         document.getElementById('total').value += parseInt(elem[i].value);
      }
   }
}
</script> 
 
 
</head> 
 
<body> 
<form action="miro.html" name="eval_edit" method="post" format="html"> 
<table align="center" width = "75%"> 
<tr> 
<td align = "center"> 
click add to you know, add a row, and remove to remove a row, and submit to submit your page! whee! 
</td> 
</tr> 
<tr> 
<td align = "center"> 
<!--- very imporant to give the table an id ---> 
<!--- otherwise it won't know where to edit ---> 
<table border="1" id="mySampleTable"> 
<tr> 
<td> 
Lesson 
</td> 
<td> 
Title 
</td> 
<td> 
Instructor 
</td> 
</tr> 
<!--- i create the initial row by hand, there are a lot of ---> 
<!--- different ways to do this depending on what parsing ---> 
<!--- language you use, i found this was easiest for the ---> 
<!--- snippet, but experiment, do your thing mang. ---> 
<!--- this matches the same specs we laid out in the javascript ---> 
<tr> 
<td> 
1 
</td> 
<td> 
<input type="text" name="txtRow1" id="txtRow1" size="40" rel="sum"/></td> 
<td> 
<select name="selRow0"> 
<option value="value0">text zero</option> 
<option value="value1">text one</option> 
<option value="value2">text two</option> 
</select> 
</td> 
</tr> 
</table> 
<input name="total" /> 
<!--- our buttons call our javascript functions when clicked ---> 
<input type="button" value="Add" onclick="addRow();" /> 
<input type="button" value="Remove" onclick="removeRow();" /> 
<input type="button" value="SUM" onClick="sum()"/> 
<input type="submit" value="Submit" /> 
</td> 
</tr> 
</table> 
</form> 
 
</body> 
 
</html>

Problem In Popup Calender In Dynamically Loading Rows In Java Script

Similar Tutorials

View Content

I have written this code but when i include code for pop calender in a row, then button was disabled, So please help me i just struck in this problem from last one week
Thanking you,
L.Rajesh
rajboy13@gmail.com

my code is

Code:

function addRow()
{
var tbl = document.getElementById('tblMed');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

 var cellLeft = row.insertCell(0);
  var sl = document.createElement('input');
  sl.type = 'text';
  sl.name = 'sln' ;
  sl.id = 'sln' + iteration;
  sl.value = iteration;
  sl.size = 3;
  sl.readOnly = true;
  cellLeft.appendChild(sl);

var cellRights= row.insertCell(1);
var elm= document.createElement('input');
elm.type = 'text';
elm.name = 'txtMdesc' ;
elm.id = 'Mdesc' + iteration;
elm.size = 20;
cellRights.appendChild(elm);

var cellRightt= row.insertCell(2);
var elmn= document.createElement('input');
elmn.type = 'text';
elmn.name = 'txtMqty' ;
elmn.onclick = "cal1xx.select(document.forms[0].sdate,'anchor1xx','dd-MM-yy');
elmn.id = 'Mqty' + iteration;
elmn.size = 20;
cellRightt.appendChild(elmn)";

var cellRightu= row.insertCell(3);
var elmno= document.createElement('input');
elmno.type = 'text';
elmno.name = 'txtMbill' ;
elmno.id = 'Mbill' + iteration;
elmno.size = 20;
cellRightu.appendChild(elmno);

}

the button code is :
Code:

</br>
 <fieldset style="width:60%;" align="center"> <legend>


<SCRIPT LANGUAGE="JavaScript">
function deleteRow(b){
    document.getElementById('table_formcontainer').deleteRow(b)
}
function CompareDates1() 
{ 
	var str1  = document.getElementById("start").value;   
	var str2  = document.getElementById("edate").value;  
	var dt1   = parseInt(str1.substring(0,2),10);    
	var mon1  = parseInt(str1.substring(3,5),10);  
	var yr1   = parseInt(str1.substring(6,10),10);   
	var dt2   = parseInt(str2.substring(0,2),10);    
	var mon2  = parseInt(str2.substring(3,5),10);   
	var yr2   = parseInt(str2.substring(6,10),10);   
	var date1 = new Date(yr1, mon1, dt1);    
	var date2 = new Date(yr2, mon2, dt2);    
	if(date2 < date1)  
		{      
			alert("To date cannot be greater than from date");      
			return false;   
		}    
	else   
		{      
			alert("Submitting ...");     
			document.form1.submit();   
		} 
		return true;
}
function addRow()
{
var tbl = document.getElementById('tblMed');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

 var cellLeft = row.insertCell(0);
  var sl = document.createElement('input');
  sl.type = 'text';
  sl.name = 'sln' ;
  sl.id = 'sln' + iteration;
  sl.value = iteration;
  sl.size = 3;
  sl.readOnly = true;
  cellLeft.appendChild(sl);

var cellRights= row.insertCell(1);
var elm= document.createElement('input');
elm.type = 'text';
elm.name = 'txtMdesc' ;
elm.id = 'Mdesc' + iteration;
elm.size = 20;
cellRights.appendChild(elm);

var cellRightt= row.insertCell(2);
var elmn= document.createElement('input');
elmn.type = 'text';
elmn.name = 'txtMqty' ;
elmn.onclick = "cal1xx.select(document.forms[0].sdate,'anchor1xx','dd-MM-yy');
elmn.id = 'Mqty' + iteration;
elmn.size = 20;
cellRightt.appendChild(elmn)";

var cellRightu= row.insertCell(3);
var elmno= document.createElement('input');
elmno.type = 'text';
elmno.name = 'txtMbill' ;
elmno.id = 'Mbill' + iteration;
elmno.size = 20;
cellRightu.appendChild(elmno);

}

function delRow1(c)
{
    document.getElementById('tblMed').deleteRow(c)
}

function validate()
{
	
	var tbl = document.getElementById('tblMed');
    var lastRow= tbl.rows.length-1;
   	var a;

    for (a=1; a<=lastRow; a++)
		{
      var def = document.getElementById('sln'+ a);
      var ghi = document.getElementById('Mdesc'+ a);
	   var jkl = document.getElementById('Mqty'+ a);
	   var jkl1 = document.getElementById('Mqty'+ a).value;
       var abc = document.getElementById('Mbill'+ a);
       var gpexpdt2 = document.getElementById('tblMed').value;
      var str11  = document.getElementById("sdate").value; 
      var str12  = document.getElementById("edate").value;
	  var tranday = jkl1.substring(0,2);
      var tranmon = jkl1.substring(3,5);
      var tranyear = jkl1.substring(6,10);
	


	var trandate = new Date(tranyear,tranmon,tranday);
	 var tranday2 = str11.substring(0,2);
	  
          var tranmon2 = str11.substring(3,5);
         


	var tranyear2 = str11.substring(6,10);
	


	var trandate2 = new Date(tranyear2,tranmon2,tranday2);
	var tranday3 = str12.substring(0,2);
	  
          var tranmon3 = str12.substring(3,5);
         


	var tranyear3 = str12.substring(6,10);
	


	
if ((document.getElementById("AC").value == ""))
{
alert ( "Please enter Amount Claimed." );
document.form5.AC.focus();
return false;
}

else if((document.getElementById("Amb").value == ""))
{
alert ( "Please enter Relationship" );
document.form5.Amb.focus();
return false;
}

if ( document.form5.Treat.selectedIndex == "")
    {
        alert ( "Please select Treatment Type" );
		document.form5.Treat.focus();
        return false;
    }

else if((document.getElementById("C10").value == ""))
{
alert ( "Please enter Total " );
document.form5.C10.focus();
return false;
}

else if((document.getElementById("C11").value == ""))
{
alert ( "Please enter Place " );
document.form5.C11.focus();
return false;
}

else if((document.getElementById("start").value == ""))
{
alert ( "Please enter from date" );
document.form5.start.focus();
return false;
}

else if((document.getElementById("edate").value == ""))
{
alert ( "Please enter to date" );
document.form5.edate.focus();
return false;
}
    if (ghi.value.length == "")
	  {
        alert('Please enter Bill No');
        ghi.focus();

        return false;
      }
	  if (jkl.value.length == "")
	  {
        alert('Please enter Date');
	   jkl.focus();
        return false;
      }
	  var trandate3 = new Date(tranyear3,tranmon3,tranday3);
	if (tranmon > 12|| tranmon < 1)
		 {
			 alert('Invalid Month In Date Field .Enter as dd-mm-yy');
        	jkl.focus();
			 return false;
		 }
		 if (tranday > 31|| tranday < 1)
		 {
			 alert('Invalid Date In Date Field Enter as dd-mm-yy');
			 		jkl.focus();
			 return false;
		 }
		 if(trandate2.getTime() > trandate.getTime())
			{
	alert("Bill date should be less than From date");
	jkl.focus();
	return false;
			}
			if(trandate3.getTime() < trandate.getTime())
			{
	alert("Bill date should not  be greater than End date");
	jkl.focus();
	return false;
			}
	
     if (abc.value.length == "")
	  {
        alert('Please enter Amount');
	    abc.focus();
        return false;
      }
	  	
	 
var str3  = document.getElementById("AC").value;
var str4  = document.getElementById("Amb").value;

if(parseInt(str3) > parseInt(str4))
{
alert('Amount Claimed must be less than Amount Balance');
document.form5.AC.focus();
return false;
}	
var alertsay = ""; 
if (form5.Treat.value > 4)
{
alert("Sorry You Can Not This Employee Data In Database..........");
form5.Treat.focus();
return (false);
}
var checkOK = "0123456789";
var checkStr = abc.value;
var allValid = true;
var allNum = "";
for (e = 0;  e < checkStr.length;  e++)
{
ch = checkStr.charAt(e);
for (f = 0;  f < checkOK.length;  f++)
if (ch == checkOK.charAt(f))
break;

if (f == checkOK.length)
{
allValid = false;
break;
}
if (ch != ",")
allNum += ch;
}
if (!allValid)
{
alert("Invalid Data Please enter only digits'");
abc.focus();
return (false);
}
}
 return true;
}
var count =0;
function Check()
	{
if (!validate())
	return true;
	 addRow()
	}
function removeRow1()
{
var tbl = document.getElementById('tblMed');
var lastRow = tbl.rows.length;
if (lastRow > 1) tbl.deleteRow(lastRow - 1);
}
function deleteRow(node) {
if (rowNum > 1) {
var td = node.parentNode; 
while (td.tblMed.toLowerCase() != "tr") 
td = td.parentNode; 
td.parentNode.removeChild(td); 
rowNum = rowNum - 1;
document.form1.count.value = rowNum;
}
else { 
alert ("You cannot delete the last remaining row");
} 
}

</script>

<b><font color="#153E7E"border="1">Bill Details</b></legend><br>
<table id="tblMed" width="75%">
<tr>
<th>Sl.No.</th>
<th align="left">Bill No</th>
<th align="left" onClick="cal1xx.select(document.forms[0].edate,'anchor1xx','dd-MM-yy'); return false;" NAME="anchor1xx" ID="anchor1xx" onFocus="self.status='Select Treatment Start Date';return true; " onBlur="self.status='';return true;">Bill Date(DD-MON-YY)</th>
<th>Bill Amount( <span class="WebRupee">Rs.</span> )</th>

</tr>

</table>
<tr><br/>
&nbsp &nbsp <input name="button" type="button" value="Add  Bill" onClick="Check()"/>

................................................................................................

i want popup calender in 3rd row of the table

please help and if any one got solution then please please mail it to my gmail id : rajboy13@gmail.com