JavaScript - Problem With Dynamic Elements

Hello there,

new to this forum and starting with a quick question. Normaly I can figure things out myself but I'm a bit stuck on this one.

I have two scripts.

one is for TinyMCE (WYZIWYG editor):

Code:

		tinyMCE.init({
				mode : "textareas",
				theme : "advanced",
				plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

						
				// Theme options - button# indicated the row# only
        theme_advanced_buttons1 : "newdocument,save,|,styleprops,del,ins,attribs,|,visualaid,visualchars,template,pagebreak,|,preview,cleanup,code,print,|,|,help,fullscreen",
        theme_advanced_buttons2 : "insertlayer,absolute,moveforward,movebackward,|,tablecontrols,|,hr,advhr,,charmapemotions,iespell,media,ltr,rtl,anchor,image,nonbreaking,|,insertdate,inserttime",
		theme_advanced_buttons3 : "bold,italic,underline,strikethrough,|,outdent,indent,|,bullist,numlist,|,sub,sup,|,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons4 : "undo,redo,|,cut,copy,paste,|,pastetext,pasteword,|,search,replace,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,blockquote,cite,|,abbr,acronym,|,link,unlink,|,removeformat",
		content_css : '/CSS/TinyMCE.css',
		theme_advanced_styles : "Test style=header1;",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,

		});
		
		function setup() {
			tinyMCE.init({
					mode : "textareas",
					theme : "advanced",
					plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",

							
					// Theme options - button# indicated the row# only
			theme_advanced_buttons1 : "newdocument,save,|,styleprops,del,ins,attribs,|,visualaid,visualchars,template,pagebreak,|,preview,cleanup,code,print,|,|,help,fullscreen",
			theme_advanced_buttons2 : "insertlayer,absolute,moveforward,movebackward,|,tablecontrols,|,hr,advhr,,charmapemotions,iespell,media,ltr,rtl,anchor,image,nonbreaking,|,insertdate,inserttime",
			theme_advanced_buttons3 : "bold,italic,underline,strikethrough,|,outdent,indent,|,bullist,numlist,|,sub,sup,|,styleselect,formatselect,fontselect,fontsizeselect",
			theme_advanced_buttons4 : "undo,redo,|,cut,copy,paste,|,pastetext,pasteword,|,search,replace,|,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,blockquote,cite,|,abbr,acronym,|,link,unlink,|,removeformat",
			content_css : '/CSS/TinyMCE.css',
			theme_advanced_styles : "Test style=header1;",
			theme_advanced_toolbar_location : "top",
			theme_advanced_toolbar_align : "left",
			theme_advanced_statusbar_location : "bottom",
			theme_advanced_resizing : true,

			});
		}

first part loads tinymce when it's there on the page, second part loads it when a button is pushed.

second script is for loading filecontent into a div:

Code:

		function load_this(url) {
			if (window.XMLHttpRequest) { // Non-IE browsers
				req = new XMLHttpRequest();
				req.onreadystatechange = targetDiv;
				try {
					req.open("GET", url, true);
				} catch (e) {
					alert(e);
				}
				req.send(null);
			} else if (window.ActiveXObject) { // IE
				req = new ActiveXObject("Microsoft.XMLHTTP");
				if (req) {
					req.onreadystatechange = targetDiv;
					req.open("GET", url, true);
					req.send();
				}
			}
		}

		function targetDiv() {
			if (req.readyState == 4) { // Complete
				if (req.status == 200) { // OK response
					document.getElementById("main").innerHTML = req.responseText;
				} else {
					alert("Problem: " + req.statusText);
				}
			}
		}

now the problem:

I have this page with div 'main'. an url loads this script, but after loading the dynamic content into the div, the setup() script isn't working:

Code:

		function load_editor(url) {
			load_this(url);
                        setup();
		}

where url=editor.php.

The funny thing is: when I click the button to load the content into the div, the textarea (from editor.php) loads, but the javascript function to start tinymce isn't working!

This is probably because right after loading the div with 'editor.php' the setup() script doens't recognise the freshly loaded content. However, when I place a link in 'editor.php' which calls javascript:setup(); and click it after loading the content, setup() does work.


my question:

How can I make it so, that, when I press a link or button to load the editor.php into a div, the setup() script recognises the fresh code and starts the WYSIWYG editor? Do I have to use state ready or something? And ifso, how do I do this?

Or is there some other way I can do this?

Kind regards and many thanks for your help!

Kevin

Hello all!
As it could not be otherwise, in my first post here, I have a horribly simple problem...

I'm currently working on a homepage for my browser, where I have many frequently used links, and I'm trying to implement some search engines too.

The one I'm working on is simply, a predefined URL, and the input text string at the end. For example: "http://www.example.com/search/(textinput)"

This is the code I have so far:
Code:

    <script type="text/javascript">
	function gosearch()
	{
		var srchstring = document.getElementById('string').value;
		var resulturl = 'http://www.example.com/search/' + srchstring;
		window.location.href = resulturl;
	}
	</script>
    
    <form name="searchform" onsubmit="gosearch();">
    <input id="string" size="31" maxlength="255" value="" />
    <input type="submit" value="Search!" />
    </form>

But what happens by using this code, is that, to the current URL, a "?" gets added, as if the code tried to send some info using GET.

I could do this quite easily using PHP, but as I want to use this locally, I cannot use any server-side code... Besides the fact that I want to learn some JScript too.

Thanks for your help.

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>

Hello,

I've a checkbox validation script to check for at least one ckeck.
Code:

<script type="text/javascript">

function chkChecks(){
isChecked=false
alert(document.forms["form1"]["checked[]"].length);
for(var i=0;i<document.forms["form1"]["checked[]"].length;i++){
if(document.forms["form1"]["checked[]"][i].checked){
isChecked=true
}
}

if(isChecked){
document.forms["form1"].submit()
}
else{
alert('Please select a checkbox')
}

}

</script>

for the form Code:

<form name="form1" action="test.php">
<input type="checkbox" name="checked[]" value="1">
<input type="checkbox" name="checked[]" value="2">
<input type="checkbox" name="checked[]" value="3">
<input class="button_140" type="button" value="Check" onclick="chkChecks()">
</form>

It works well for more than one checkboxes, but these are generated dynamically by PHP and if there is only one checkbox, document.forms["form1"]["checked[]"].length returns 'undefined'.

Can I modify this to work in all cases?

thanks,
art.

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>

Hi All,
i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one..

i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after..

For what i need that :

i have my user inserting information on the level 1. let say Copagny info
2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level ..
and so on...

3- those sub level ( subforms ) can also call their respective subforms..



Any idea how to design this ?


thanks

I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total.

Here is the bit that does the calculation:
Code:

function advCalc(selected) {

	var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;

	result = result.toFixed(2) ;
	result = addCommas(result) ;
	
	document.getElementById("total"+selected).innerHTML = result ;

}

The bit that adds a new row of fields is:
Code:

function addPart(divName){
          var newdiv = document.createElement('div') ;
		  newdiv.setAttribute('id', 'partrow' + counter) ;
		  newdiv.setAttribute('style', 'clear:both;') ;
          newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>&pound;</option><option value='dol'>$</option><option value='euro'>&euro;</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>&pound;</option><option value='dol'>$</option><option value='euro'>&euro;</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>&pound;</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
          document.getElementById(divName).appendChild(newdiv) ;
          counter++ ;
}

The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc.

It isn't working for any other fields added but I can't see what is wrong

Ok so I have these Input boxes and select boxes on my form. I have them input this way:

Code:

<input type="text" name="monto[]">

So I can then parse the many that get added and removed when I submit the form, this way PHP see's them as an array.

Now I have used this in the past to cycle through my inputs to check values and such on them, but with these [] it doesn't work.

Code:

var changeCheck = document.getElementsByName('check');
	for(i=0; i<changeCheck.length; i++)
	{
		var enter = new Number(getEl('dueitem' + changeCheck[i].value));
		
		if(changeCheck[i].checked == true) {
			final = enter + final;
		}
	}

Is there a way to cycle all these elements when they are as []. Even if it's cycle them by name, though I never had a determined amount I always have the same names for the 12 different fields there are.

Ok so I have these elements on my page:

Code:

<input type="text" size="5" name="val[]" value="'.$NotaMaxima.'">

I want to loop through each one and take their number add it to another number set in a variable elsewhere and then alert that number.

The amount of these elements on the page changes constantly, so I can't count on that. It has to loop through each one to find the values. I tried this:

Code:

var els,i,asig;
 els=document.getElementsByTagName('val');
 for(i in els) {
   asig = parseInt(els[i].value) - parseInt(asig);
 }
alert(asig);

But no go, any ideas?

Hi again!!
This is my code to add and delete dynamic rows and auto calculate the amount field by multiplying qty and rate.

PHP Code:
<form name="staff_reg" action="<?php echo $_SERVER['PHP_SELF']."?".$_SERVER['QUERY_STRING']; ?>" method="post" enctype="multipart/form-data">

<table width="100%" border="0" cellspacing="0" cellpadding="2">

<table border="0" cellpadding="1" cellspacing="0" class="normal-text" align="left">

<tr align="center">

<td width="10" class="forhead" style="white-space:nowrap;">&nbsp;</td>

<td width="92" class="forhead" style="white-space:nowrap;">Qty</td>

<td width="94" class="forhead" style="white-space:nowrap;">Rate</td>

<td width="94" class="forhead" style="white-space:nowrap;">Amount</td>

</tr>

</table>



<tr align="left">

<td class="forhead" style="white-space:nowrap;"><input type="button" value="Add Row" onClick="addRow('dataTable')" >&nbsp;

<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" ></td>

<table border="0" id="dataTable" cellpadding="1" cellspacing="0" class="normal-text">

<tr>

<td width="10" class="forhead" style="white-space:nowrap;"><input type="checkbox" name="chk[]"/></td>

<td width="92" class="forhead" style="white-space:nowrap;">



<input type="text"  name="qty[]"  style="width:80px;" onblur="">



</td>

<td width="94" class="forhead" style="white-space:nowrap;">



<input type="text"  name="rate[]" style="width:80px;" value=""></td>



<td width="94" class="forhead" style="white-space:nowrap;">



<input type="text"  onblur="getValues('qty[]','rate[]','amt[]')" name="amt[]" style="width:80px;"></td>



</tr>

</table>

<table border="0">

<tr>

<td>Total:</td>

<td><input type="text"  name="total[]" style="width:80px;" value=""></td>

</tr>



<tr>

<td colspan="2">

<input name="Submit" type="submit" value="Save" style="text-decoration:none" />

<input type="reset" value="Cancel" onclick="window.location.href='<?php echo $_SERVER['PHP_SELF'];?>'">

</td>

</tr>

</form>

<script type="text/javascript">



    function getValues(objName,objName2,objName3)

    {    

        var var3 = "";

        var arr = new Array();

        arr = document.getElementsByName(objName);

        arr2 = document.getElementsByName(objName2);

        arr3 = document.getElementsByName(objName3);

        for(var i = 0; i < arr.length; i++)

        {

            for(var i = 0; i < arr2.length; i++)

            {

            for(var i = 0; i < arr3.length; i++)

            {

            

                var obj1 = document.getElementsByName(objName2).item(i);

                var var2 = obj1.value;



                var obj = document.getElementsByName(objName).item(i);

                var var1 = obj.value;



                var obj3 = document.getElementsByName(objName3).item(i);

                var var3 = obj3.value;

                var var4 = var1 * var2;

                document.getElementsByName(objName3).item(i).value=var4;



            }        

            }

        }    

        

    }

    

  function addRow(tableID) {

     var table = document.getElementById(tableID);

     var rowCount = table.rows.length;

     var row = table.insertRow(rowCount);

     var colCount = table.rows[0].cells.length;

           for(var i=0; i<colCount; i++) {

               var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[0].cells[i].innerHTML;

                //alert(newcell.childNodes);

                switch(newcell.childNodes[0].type) {

                    case "text":

                            newcell.childNodes[0].value = "";

                            break;

                    case "checkbox":

                            newcell.childNodes[0].checked = false;

                            break;

                    case "select-one":

                            newcell.childNodes[0].selectedIndex = 0;

                            break;

                }

            }

        }

        

function deleteRow(tableID)

{

            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) 

                            {

                            if (rowCount <= 1) 

                                {

                                alert("Cannot delete all the rows.");

                                break;

                                }

                

                            table.deleteRow(i);

                            rowCount--;

                            i--;

                            }



                        }

                    } catch(e) 

                        {

                        alert(e);

                        }

}



</script>

I would like to know that how can I show the value of all the elements in array "amount" in total field??

Hi,

I got a table with hundreds of rows...and I want the user to be able to hide a single one by clicking on the table row.

How can I do this without typing in hundreds of ids like 1,2,3,4,5... Since you can't get elements by class and ids have to unique I'm not sure how to do this. Also the order of the rows will change when they get updated so it would end up being a mess of unordered ids.

Thanks.

I tried the following code based on a post I saw somewhere else about summing all the elements of an array together. When I tried it though I couldn't seem to get it working. Can someone please point out what I did wrong or tell me a different way to sum array elements together? Thanks.
Code:

<script type="text/javascript">

Array.prototype.sum = function() {
for (var i = 0, L = this.length, sum = 0; i < L; sum += this[i++]);
return sum;
}

var myArray=[1,2,3,4,5];

document.write(myArray.prototype.sum);

</script>

Hi all, iv'e been trying to get round this for 2 days and still nothing.

What i want to do is to be able to outline elements on a page when hovered over... simple you might think. which it is.

Then with the id of the item outlined when right clicked, and chose an option, other things happen.

The menu side is sorted, and the hover outline is sorted. But iv'e been trying to put them both together but it wont work!

This is the closest iv'e gotten, whcih runs sooooo slow.

Code:

$(document).ready(function() {
		function elementHover(){
			$("*").bind("mouseover", function(event) {
				var element = $(event.target);
				if($(element).attr("rel")!="rightClickMenu"){
					$(element).addClass('outline-element');
					if( ($(element).attr("id")!="") && (typeof $(element).attr("id") != "undefined") ){
						getElementObj($(element));
						$("[id!='" + $(element).attr("id") + "']").hover(function(){
							$("#" + $(element).attr("id")).removeClass('outline-element');
						});
					}else{
						return "";
					}
				}else{
					return "";
				}
			});
		}
		elementHover();
    });

the big problem being this
var element = $(event.target);
if i changed it to
var element = $(event.target);
alert($(element).attr("id"));

it would open the dialog box about 10 times spitting all kinds of results. Any help would be much appreciated.

I put this at the end of my code thinking that after the div displays (id = 'link_container') I can eliminate (id = 'link_container') from memory when the script ends so there's a place for another div (id = 'link_container') when/if there's onkeyup event.

Wouldn't this little script remove any element with an id = 'link_container' ?

<script type="text/javascript">
var deleteDiv = document.getElementById('link_container');
document.body.removeChild(deleteDiv);
</script>