|
JavaScript - Dynamic Table Broken Delete Row Function
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>
Similar TutorialsA common javascript function that capitalizes input as user types (onkeypress) no longer works as of IE9. Need a function that also works in IE 9 that doesn't not change method call or interface (as it's used in 150 places throughout application). CALL: [CODE] el.onkeypress = function(el) { return c_capitalizeInput(el); } [CODE] FUNCTION: [CODE] // Intercepts keyboard input and capitalizes keystrokes. // Call with onkeypress="return capitalizeInput(event);" // Compatible with both IE and Netscape/Mozilla function c_capitalizeInput(evt) { evt = (evt) ? evt : ((window.event) ? window.event : ""); if (window.event) { // IE if ((evt.keyCode >= 97) && (evt.keyCode <= 122)) { evt.keyCode = evt.keyCode - 32; } return true; } else if (evt.which) { // Netscape and Mozilla key = evt.which; if ((key >= 97) && (key <= 122)) { key = key - 32; evt.target.value = evt.target.value + String.fromCharCode(key); return false; } return true; } else { return true; // Can't do anything for other browsers } } [CODE] Any suggestions to make this work in IE9? This function is part of a page that will delete a product that a customer has selected. The question I have is what is the line line that actually removes the item from the list of products chosen? From my understanding, in order to establish an array, new array = elements[i] has to be added but Im thinking that elements[i] is the array that holds the product. Does the "0" in this line actually delete the item? document.template.elements[i].value = 0 ; Code: function del_item(X,msg) {
// var msg = "Are you sure you want to delete this line item?"
resp = confirm("Are you sure you want to " + msg + "?") ;
if (resp) {
var len = document.template.elements.length
//loop to put into arrays
for (var i = 0; i < len; i++) {
var lname = document.template.elements[i].name ;
if(lname == X) {
document.template.elements[i].value = 0 ;
process_order(0) ;
document.template.loginpath.value = "CO" ;
document.template.submit() ;
}
}
} else {
return ;
}
}
hi guys i having some problems with jquery plugin table sorter on a dynamic table. if i use it on a regular html table it works fine,but on my dynamic table its not working. if someone could look at my code and see if i done something wrong i would appreciate it . Thanks will43 Code:
<script type="text/javascript" src="table sorter/jquery.tablesorter/jquery-latest.js" ></script>
<script type="text/javascript" src="table sorter/jquery.tablesorter/jquery.tablesorter.js" ></script>
<script type="text/javascript"/>
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
<form id="form1" name="form1" method="post" action="">
<label for="Position">Position</label>
<select name="Position" id="Position">
<option>QB</option>
<option>HB</option>
<option>FB</option>
<option>WR</option>
<option>TE</option>
<option>RG</option>
<option>RT</option>
<option>C</option>
<option>LG</option>
<option>LT</option>
<option>CB</option>
<option>LB</option>
<option>SS</option>
<option>FS</option>
<option>DE</option>
<option>DT</option>
<option>P</option>
<option>K</option>
</select>
<input type="submit" name="Summit" id="Summit" value="Submit" />
</form>
<p> </p>
<p> </p>
<table width="950" border="1" cellpadding="3" cellspacing="3" class="tablesorter" id="myTable">
<thead>
<tr>
<th bgcolor="#FF0000">id</th>
<th bgcolor="#FF0000">Team</th>
<th bgcolor="#FF0000">FirstName</th>
<th bgcolor="#FF0000">LastName</th>
<th bgcolor="#FF0000">Position</th>
<th bgcolor="#FF0000">Year</th>
<th bgcolor="#FF0000">Overall</th>
<th bgcolor="#FF0000">Speed</th>
</tr>
</thead>
<?php do { ?>
<tbody>
<tr>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['id']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Team']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['FirstName']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['LastName']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Position']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Year']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Overall']; ?></td>
<td bgcolor="#FFFF00"><?php echo $row_Recordset1['Speed']; ?></td>
</tr>
</tbody>
<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
</table>
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. 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. Hey everyone, I have a small script to open a little window, which is created for each record in a database through asp. The problem is, if there are multiple records, the function name is all the same, so the links open the same window for each record.. not good. Here is the code which is created for every record, until there arent anymo <SCRIPT language="javaScript"> function openwindow() {window.open("pofull.asp?poid=<%=MySqlRS("lpoid")%>","mywindow","menubar=0,resizable=0,width=500,hei ght=250");} </SCRIPT> <% Response.write "<td width=""30px"" align=""center""><a href=""javascript: openwindow()""><img src=""../style/edit.png"" border=""0"" title=""View Full Description""></a></td>" So obviously openwindow is being created multiple times. Is there a way to have this created in a way that every function name created is unique so they all work? I know.. its confusing but it would work really well. I've built this script piece by piece to juggle a bunch of stacked pages by their zIndex. The object lists the nav images to their appropriate container divs for that page. The array lists the nav images and their keys I want to use for their zIndex. I tested the first two functions (splicer and pusher) successfully using the little prompter function I left in there but I can't get the last one to do anything with the zIndex. I hope to eventually use my navto function for an onClick event. I'm not all that comfortable playing with objects/properties, hence the separate object and array. I'm sure there is a more efficient way of doing it, but I'm mainly concerned with figuring out what I was doing wrong in that final part. Code: <script type="text/javascript">
var sitepage = {};
sitepage.staff_tags= "page_staff";
sitepage.links_tags= "page_links";
sitepage.rules_tags= "page_rules";
sitepage.services_tags= "page_services";
sitepage.events_tags= "page_events";
sitepage.accom_tags= "page_accom";
sitepage.reserve_tags= "page_reserve";
sitepage.welcome_tags= "page_welcome";
var sitepagearray = new Array("staff_tags", "links_tags", "rules_tags", "services_tags", "welcome_tags", "events_tags", "accom_tags", "reserve_tags" );
var selection = prompt("Choose: (staff, links, rules, services, events, accom, reserve, welcome)", "Type you response here")+"_tags";
function splicer() {
sitepagearray.splice(sitepagearray.indexOf(selection),1);
};
function pusher() {
sitepagearray.push(selection);
};
function zindexswap() {
for(x in sitepagearray){
document.getElementById('sitepage[x]').style.zIndex = sitepagearray.indexOf(x);
};
};
function navto(){
splicer();
pusher();
zindexswap();
};
Hi All, I am working on a script to generate a dynamic table and populate the fields in that table with data from a number of text fields on my page. The page uses Adobe spry validation and this is the only way I can get my validation to function and add the data to the table dynamically (I had a script where the text fields were part of the first row and blank rows were added dynamically but the validation would not work for the added rows... This is a workaround). Being new to JS I did the best I could and I think it's clear what I am going for but I am sure my syntax and method usage is off. When I click to add the table row, I get "[object HTMLLabelElement]" in each cell (dunno what that is). Could someone please help me get going in the right direction with this code? Here it is and thanks in advance for any help. Code: A<!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) {
//These variable are commented out and coded inline below.
//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("id","StartTime[]");
//Set the value to the form's textfield.
element2.value = document.getElementById(StartTime);
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.setAttribute("id","EndTime[]");
//Set the value to the form's textfield.
element3.value = document.getElementById(EndTime);
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.setAttribute("id","MaterialID[]");
//Set the value to the form's textfield.
element4.value = document.getElementById(MaterialID);
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.setAttribute("id","Title[]");
//Set the value to the form's textfield.
element5.value = document.getElementById(Title);
cell5.appendChild(element5);
}
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) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
<body>
<span id="spryStartTime">
<label for id="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 id="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 id="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 id="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')" />
<!--
I would prefer not to start with a table with blank rows
(but rather create the rows already populated)
but I can work on this later.
-->
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD><INPUT type="text" /></TD>
<TD><INPUT type="text" /></TD>
<TD><INPUT type="text" /></TD>
<TD><INPUT type="text" /></TD>
</TR>
</TABLE>
<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>
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>
Hi All, I tried to add links to open local xml files in browser in a dynamic table cells. I need help. I tried all ways but I think I miss something. I can open them without table just by document.write(xmlfile location). Here is my code. please help. function showResultsTable(searched, srchedname) { // get the reference for the body var mybody = document.getElementsByTagName("body")[0]; // creates a <table> element and a <tbody> element mytable = document.createElement("table"); mytable.setAttribute('id', 'resulttable'); mytablebody = document.createElement("tbody"); // creating all cells var mycurrent_cell = new Array(); for(var j = 0; j < srchedname.length; j++) { // creates a <tr> element mycurrent_row = document.createElement("tr"); mycurrent_cell[0] = document.createElement("td"); currenttext = document.createTextNode(j); mycurrent_cell[0].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[0]); mycurrent_cell[1] = document.createElement("td"); link = document.createElement("a"); link.name = ""+srchedname[j]); link.href = "C:\\AAA\\TestCasesList.xml"; mycurrent_cell[1].appendChild(link); mycurrent_row.appendChild(mycurrent_cell[1]); mycurrent_cell[2] = document.createElement("td"); currenttext = document.createTextNode(searched[j]); mycurrent_cell[2].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[2]); // appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row); } // appends <tbody> into <table> mytable.appendChild(mytablebody); // appends <table> into <body> mybody.appendChild(mytable); // sets the border attribute of mytable to 2; mytable.setAttribute("border", "2"); } <script language="javascript"> function splitNumber() {alert("inside splitnumber"); var x = parseInt(document.getElementById("value1").value); var z = x%10; /*units*/ var y = (x - z)/10; /*tens*/ var c = parseInt(document.getElementById("value3").value); var a = c%10; /*units*/ var b = (c - a)/10; /*tens*/ for(var i=0;i<=z;i++) { var parseInt(document.getElementById("u1").td.value); for(((document.getElementById("u1").td.value))=0;((document.getElementById("u1").td.value))<=i;((doc ument.getElementById("u1").td.value))++) { document.write("<td> " +document.getElementById("u1").td.value +"</td>") } } } </script> /*this is the code i write for generating unique values in the table cells, but it is not working*/ <body > <div class="left"> <table class="main" cellpadding="3px" cellspacing="6px"> <tr> <td width="630px" height="50px" bgcolor="#ffffff"> <table class="tens"> <tr id="t1"> <td value="9"></td> <td value="8"></td> <td value="7"></td> <td value="6"></td> <td value="5"></td> <td value="4"></td> <td value="3"></td> <td value="2"></td> <td value="1"></td> </tr> </table> </td> <td width="200px" height="50px" bgcolor="#ffffff"> <table class="units"> <tr id="u1"> <td value="9"></td> <td value="8"></td> <td value="7"></td> <td value="6"></td> <td value="5"></td> <td value="4"></td> <td value="3"></td> <td value="2"></td> <td value="1"></td> </tr> </table> </td> </tr> <tr> <td width="630px" height="50px" bgcolor="#ffffff"> <table class="tens"> <tr id="t2"> <td value="9"></td> <td value="8"></td> <td value="7"></td> <td value="6"></td> <td value="5"></td> <td value="4"></td> <td value="3"></td> <td value="2"></td> <td value="1"></td> </tr> </table> </td> <td width="200px" height="50px" bgcolor="#ffffff"> <table class="units"> <tr id="u2"> <td value="9"></td> <td value="8"></td> <td value="7"></td> <td value="6"></td> <td value="5"></td> <td value="4"></td> <td value="3"></td> <td value="2"></td> <td value="1"></td> </tr> </table> </td> </tr> <tr> <td width="630px" height="50px" bgcolor="#ffffff"> <table class="tens"> <tr id="t3"> <td value="9">9</td> <td value="8">8</td> <td value="7">7</td> <td value="6">6</td> <td value="5">5</td> <td value="4">4</td> <td value="3">3</td> <td value="2">2</td> <td value="1">1</td> </tr> </table> </td> <td width="200px" height="50px" bgcolor="#ffffff"> <table class="units"> <tr id="u3"> <td value="9">9</td> <td value="8">8</td> <td value="7">7</td> <td value="6">6</td> <td value="5">5</td> <td value="4">4</td> <td value="3">3</td> <td value="2">2</td> <td value="1">1</td> </tr> </table> </td> </tr> </table> </div> <div class="right" > <table cellpadding="3px"> <tr> <td width="5px"></td> <td><span class="row"><input min="0" max="99" type="number" id="value1" name="value1" value="0" onchange="javascript:addNumbers()"/></span></td> </tr> <tr> <td width="5px"><b style="font-size:25px; position:relative; top:18px;">+</b></td> <td><span class="row"><input min="0" max="99" type="number" id="value3" name="value3" value="0" onchange="javascript:addNumbers()"/></span></td></tr> <tr><td width="5px"></td> <td><span class="row" ><input style=" width:66px; position:relative; right:25px;" readonly="readonly" id="answer" name="answer" value="0" /></span></td></tr> </table> </div> </body> Hi, I have an HTML table dynamically populated with data from a coldfusion query and having radio buttons - see code following below. I need javascript to see the radio buttons and the user's selection - "approved"; "denied"; or, "N/A". If the user selects "approved" for multiple rows and then Submit the information will update the database table and remove those rows. However, if the user selects "approved" and "denied" then I need to update the "approved" rows and stop the update at the "denied" row and show a dialog box which informs the user that the "Reason for Denial" text box must be entered. Then the Submit button can be engaged and the "denied" selection processed. Only one "denied" at a time will be updated - but all "approved" entries can be denied similtaneously - unless a "denied" intervenes. I do have javascript code for the "denied" selection with empty "Reason for Denial" text box - see below: Code: <script type="text/javascript">
function rationale() {
var denInfo = document.getElementById("denialReason");
if(denInfo.value == ""){
alert("Please enter reason for denial in Rationale for Request Denial");
return false;
denInfo.focus();
}
}
</script>
The overall action seems like it would need some extensive javascript coding and I haven't a clue how to do it. Any help is GREATLY APPRECIATED. Code: <table border="1" cellspacing="1" cellpadding="2" style="position:relative; left:50px;" width="1000">
<tr>
<td width="140" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;"> Name<hr />Begin Date</font></td>
<td width="75" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;"> Request Date<hr />End Date</font></td>
<td width="145" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;">Type of Hrs<hr />Request Justification</font></td>
<td width="76" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;"> Num Hrs Req<hr />Rel Comp Begin Date</font></td>
<td width="98" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;"> Projects<hr />Rel Comp End Date</font></td>
<td width="180" align="center" bgcolor="#FEF9E7"><font color="#0000FF" style="font-weight:bold;"> Decision<hr />Leave Slip Submitted</font></td>
</tr>
<cfoutput query="Req">
<tr style="background-color:'FFFFFF';" onMouseOver="this.style.backgroundColor='FFCC33';" onMouseOut="this.style.backgroundColor='FFFFFF'" >
<td colspan="6">
<table cols="6" border="1" cellpadding="5" cellspacing="0">
<tr>
<td width="177"> #Name#</td>
<td width="107"> #DateFormat(RequestDate, "m/d/yyyy")#</td>
<td width="178"> #TypeofHours#</td>
<td width="105"> #NumberHrsRequested#</td>
<td width="127"> #project#</td>
<td width="218"> #Decision#
<cfinput name="Decision_#ID#" id="Decision_#ID#" type="radio" value="approved" size="1">Approve
<cfinput name="Decision_#ID#" id="Decision_#ID#" type="radio" value="denied" size="1">Deny
<cfinput name="Decision_#ID#" id="Decision_#ID#" type="radio" value="" size="1" checked="yes">N/A
</td>
</tr>
<tr>
<td> #DateFormat(BeginDate, "m/d/yyyy")#</td>
<td> #DateFormat(EndDate, "m/d/yyyy")#</td>
<td> #justification#</td>
<td> #DateFormat(RCBDate, "m/d/yyyy")#</td>
<td> #DateFormat(RCEDate, "m/d/yyyy")#</td>
<td> #RCLeaveSlip#</td>
</tr>
<tr id="denyRow_#ID#">
<td colspan="1"><font color="##0000FF"; style="font-weight:bold">Reason For Denial</font></td>
<td colspan="5"> #ReasonForDenial#
<cftextarea name="denial_#ID#" cols="85" rows="3" wrap="hard"/>
</td>
</tr>
</table>
</td>
</tr>
</cfoutput>
</table>
Thank you, John I have a temp HTML file that is based the code I found on this site at http://www.codingforums.com/showthread.php?t=103961. It dynamically adds and removes rows from an HTML table with inputs in the cells. I have tweaked my copy a bit to match our needs. Of importance to this post is that column 1 is simply the row number. Unfortunately, I am unable to figure out how to re-sequence the first column if a row is deleted. For example, if there are 4 rows, and I delete row 3, I need to re-sequence (re-number) the values to reflect 1, 2, 3, not 1, 2, 4. Below is the insert logic (which adds a delete button for the row). Code: function insertRow() {
nForm = document.forms[0];
nForm['submit'].disabled = false;
nTable = document.getElementById('worksheet');
var lastRow = nTable.rows.length;
var x = nTable.insertRow(lastRow);
var a = x.insertCell(0);
var b = x.insertCell(1);
var c = x.insertCell(2);
var d = x.insertCell(3);
var e = x.insertCell(4);
var f = x.insertCell(5);
var g = x.insertCell(6);
var h = x.insertCell(7);
var i = x.insertCell(8);
var j = x.insertCell(9);
var k = x.insertCell(10);
var l = x.insertCell(11);
var z = x.insertCell(12);
a.innerHTML="<input type='text' class='PanelNo' name='PanelNo[]' value='"+lastRow+"' readonly>";
b.innerHTML="<input type='text' class='PanelQty' name='PanelQty[]' value='1' onblur='setDefault(this)' onKeyup='verifyNumeric(this)' >";
c.innerHTML="<input type='text' class='PanelThickness' name='PanelThickness[]' onkeyup='verifyNumeric(this)' >";
d.innerHTML="<input type='text' class='PanelWidth' name='PanelWidth[]' onkeyup='verifyNumeric(this)' onChange='recalcSqFootage()'>";
e.innerHTML="<input type='text' class='PanelHeight' name='PanelHeight[]' onkeyup='verifyNumeric(this)' onChange='recalcSqFootage()'>";
f.innerHTML="<input type='text' class='FloorElev' name='FloorElev[]' onkeyup='calc(this)' onkeyup='verifyNumeric(this)' >";
g.innerHTML="<input type='text' class='BlockoutSQFootage' name='BlockoutSQFootage[]' align='center' readonly>";
h.innerHTML="<input type='text' class='PanelWeight' name='PanelWeight[]' readonly>";
i.innerHTML="<input type='text' class='TotalCubicYds' name='TotalCubicYds[]' readonly>";
j.innerHTML="<input type='text' class='LiftingInsReq' name='LiftingInsReq[]' readonly>";
k.innerHTML="<input type='text' class='DaytonBraceReq' name='DaytonBraceReq[]' readonly>";
l.innerHTML="<input type='text' class='DaytonBraceQty' name='DaytonBraceQty[]' readonly>";
z.innerHTML="<input type='button' value='Delete' class='button' onclick='deleteRow(this)'>";
}
Here is the logic for deleting a row (dynamically added for each row with the last line in the above code). I have added all the code after the 1st line, but it clearly does not work (but gives no errors): Code: function deleteRow(subjRow) {
subjRow.parentNode.parentNode.parentNode.removeChild(subjRow.parentNode.parentNode);
var PanelNo = document.getElementsByName('PanelNo[]');
NoRows = PanelNo.length;
if (NoRows > 0) {
var temp = new Array();
for (xx1=0; xx1 < NoRows; xx1++) {
temp[xx1] = (xx1+1);
}
// how do I do this?
document.getElementsByName('PanelNo[]').innerHTML = temp;
}
}
I have never worked with arrays like this for dynamic inputs, so any help would be appreciated. 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>
My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its: Code: <script type="text/javascript">
addLoadEvent(function() { function1(1); })
//function1 makes the table rows do something appearance wise.
</script>
<tr>
<td></td>
<td></td>
<td>
<img src="pics/delete.png" alt="Delete" onclick="function2();">
</td>
</tr>
I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site. Hi All, I tried to add links to open local xml files in browser in a dynamic table cells. I need help. I tried all ways but I think I miss something. I can open them without table just by document.write(xmlfile location). Here is my code. please help. function showResultsTable(searched, srchedname) { // get the reference for the body var mybody = document.getElementsByTagName("body")[0]; // creates a <table> element and a <tbody> element mytable = document.createElement("table"); mytable.setAttribute('id', 'resulttable'); mytablebody = document.createElement("tbody"); // creating all cells var mycurrent_cell = new Array(); for(var j = 0; j < srchedname.length; j++) { // creates a <tr> element mycurrent_row = document.createElement("tr"); mycurrent_cell[0] = document.createElement("td"); currenttext = document.createTextNode(j); mycurrent_cell[0].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[0]); mycurrent_cell[1] = document.createElement("td"); link = document.createElement("a"); link.name = ""+srchedname[j]); link.href = "C:\\AAA\\TestCasesList.xml"; mycurrent_cell[1].appendChild(link); mycurrent_row.appendChild(mycurrent_cell[1]); mycurrent_cell[2] = document.createElement("td"); currenttext = document.createTextNode(searched[j]); mycurrent_cell[2].appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell[2]); // appends the row <tr> into <tbody> mytablebody.appendChild(mycurrent_row); } // appends <tbody> into <table> mytable.appendChild(mytablebody); // appends <table> into <body> mybody.appendChild(mytable); // sets the border attribute of mytable to 2; mytable.setAttribute("border", "2"); } Hi, I have a dynamic JS table and the user can add several rows then populate rows with data. There are 4 columns in table. First row, first two columns have JQuery calendar. Third column has populated select list. Fourth column, first row has JS function to ensure that user enters integer/decimal with corresponding alert for incorrect entry. Two things I want to do: 1. Populate added rows with JQuery calendars and integer/decimal alert. 2. Capture added rows and data from user entries so that information can be sent to database via ColdFusion programming. The following is the js code I am using: For the datepicker I linked to an in-house URL so this is the function - Code: $(function() {
$("#startdate").datepicker();
$("#enddate").datepicker();
$("#RcompStart").datepicker();
$("#RcompEnd").datepicker();
});
</script>
The objects (inputs) for the above are Code: <td><input style="width: 70px" type="text" id="startdate"></td> <td><input style="width: 70px" type="text" id="enddate"></td> For the numeric alert the function is Code: <script type="text/javascript">
function checkQuarters( fld )
{
var val = parseFloat(fld.value);
if ( isNaN(val) || ( val*4 != Math.floor(val*4) ) )
{
alert("Value must be a numeric and a multiple of 0.25");
return false;
}
return true;
}
</script>
The object (input) for the above is Code: <td><p> <form style="width: 5px; height: 1px;"> <input type="text" name="No. of Hours" id="No. of Hours" style="width: 70px;" onblur="checkQuarters(this);" /> </form> </td> And to add and remove rows the function is Code: <script language="Javascript" type="text/javascript">
/*<![CDATA[*/
var new_rows=new Array();
var row_count=0;
function addRow()
{
var tbl = document.getElementById('ReqDtTbl');
new_rows[row_count]=new Array();
var lastRow = tbl.rows.length;
var iteration = lastRow;
if (lastRow>7){
return;}
var row = tbl.insertRow(lastRow);
var cellLeft = row.insertCell(0);
var textNode = document.createElement('input');
textNode.size = 7;
textNode.name = 'startdate' + iteration;
cellLeft.appendChild(textNode);
new_rows[row_count]['cell']=textNode;
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'enddate' + iteration;
el.id = 'enddate' + iteration;
el.size = 7;
new_rows[row_count]['cell2']=el;
cellRight.appendChild(el);
// the last cell!
var cellRightSel = row.insertCell(2);
var sel = document.createElement('select');
sel.name = 'TypeHrs' + iteration;
sel.options[0] = new Option('-Select-', '""');
sel.options[1] = new Option('Comp Time', 'Comp Time');
sel.options[2] = new Option('Credit Hrs', 'Credit Hrs');
sel.options[3] = new Option('Overtime', 'Overtime');
sel.options[4] = new Option('Rel Comp', 'Rel Comp');
cellRightSel.appendChild(sel);
new_rows[row_count]['cell3']=sel;
var cellRight = row.insertCell(3);
var el = document.createElement('input');
el.type = 'text';
el.name = 'No. of Hours' + iteration;
el.id = 'No. of Hours' + iteration;
el.size = 7;
cellRight.appendChild(el);
new_rows[row_count]['cell']=el;
row_count++;
}
function removeRow()
{
// grab element again
var tbl = document.getElementById('ReqDtTbl');
// grab length
var lastRow = tbl.rows.length;
// delete last row if there is more than one row
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
/*]]>*/
</script>
The buttons for this function are Code: <input type="button" value="Add a row" onclick="addRow('ReqDtTbl',5)";/>
<input type="button" value="Remove a row" onclick="removeRow();" />
That's it. Thanks - John Dear all Gurus, I'm stucked with below logic. Wanna get your advice to find out where I went wrong.Please help.... Below is my Coding done. A dynamic HTML table is generated text boxes in table Rows(Dissable mode) with EDIT & DELETE buttons. When user clicks on Edit button, particular row(Text Box) should be enable to edit the values generated. But Unfortunately in my coding, always the fist row only gets enabled. <script type="text/javascript"> function m(id){ document.getElementById('Record_id').disabled=false; document.getElementById('file_number').disabled=false; return false; } </script> PHP Code: while ($rw = mysql_fetch_array($query1)) {$k = $rw['Record_id'];echo '<tr>';echo'<form name = "t_data">';echo '<td>'.'<input type="text" id="Record_id" name="Record_id"value="'.$rw['Record_id'].'" disabled="true" size ="5"/>'.'</td>';echo '<td>'.'<input type="text" id="file_number" name="file_number" value="'.$rw['file_number'].'" disabled="true" size = "9"/>'.'</td>';echo '</tr>'; echo '<tr>';echo' <td>';echo'<form action="dlt_grid.php" method = "GET">';echo'<input type="submit" value="Delete">';echo'<input type="hidden" name="hf" value="'.$k.'">';echo'</form> ';echo'</td>'; echo' <td>';echo'<input type="submit" id="'.$k.'" value="Edit" onclick = "return m(this.id)">';echo'<input type="hidden" name="hf" value="'.$k.'">';echo'</td>';echo '</tr>';echo'</form>'; Hi, Thank you for helping me and also read my post. Anyone know how to make a function of below request?. 1)Textarea for input text 2)Button for submit text 3)Submitted text into table 4)All the text into table one by one what i need help is 1) How to separate each word or text to table cols or rows 2) How to auto add another cols or rows once the text submit by Textares 3) How to separate each table th or tr by ID or Name like below Code: <table border="1">
<tr>
<th>First</th>
<th>scoend</th>
<th>third</th>
</tr>
<tr>
<td id="1">1</td>
<td id="2">2</td>
<td id="3">3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Thank you so much. I have the two functions below, I want to write a function that puts them into a chart, I have the chart sorted etc but just struggling with how to get the actual validated users inputs from these two functions into the chart, I've tried document.write('<td> $' + productIndex + '</td>'); into the chart but that wouldn't work anyway as there could be multiple inputs? Just need a way to get the output really. function getProductChoice(min, max) { var getProductChoice = function(min, max){ do{ var productIndex = parseInt(prompt('Enter your product choice; 0-5', '0')); } while( isNaN(productIndex) || productIndex < min || productIndex > max); }; getProductChoice(0,5); } function getProductQuantity(max) { do{ var productIndexQuantity = parseInt(prompt('How many would you like?', '0')); } while( isNaN(productIndexQuantity) || productIndexQuantity < 0 || productIndexQuantity > max); }; getProductQuantity(MAX_QUANTITY); |
|||||||