|
JavaScript - Get Data From Dynamic Rows To Php
I wasn't sure if this should go in the JavaScript or PHP forum, so I decided JavaScript.
I have created a site that has a form where the user can create as many rows as wanted. I really have no idea how I can then get this information to use in PHP. Here is my JavaScript function creating the rows: Code: function addDollyRow() {
numDollies++;
document.getElementById("numDollies").value = numDollies;
document.getElementById("removeDolly").disabled = false;
var dollyTable = document.getElementById('dollyTable');
var lastRow = dollyTable.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var row = dollyTable.insertRow(numDollies);
// two blank cells
var blankCellOne = row.insertCell(0);
var blankCellTwo = row.insertCell(1);
// dolly list
var dollyListCell = row.insertCell(2);
var dollyListSel = document.createElement('select');
dollyListSel.name = 'dollyListRow[]';
dollyListSel.id = 'dollyList' + numDollies;
dollyListSel.options[0] = new Option('','-1');
dollyListSel.options[1] = new Option('Regular Duty Dolly Set - Collins-4.80 \'C\'','1');
dollyListSel.options[2] = new Option('Heavy Duty Dolly Set - Collins-5.70 \'C\'','2');
dollyListSel.options[3] = new Option('Super Duty Dolly Set - Collins-5.70 \'D\'','3');
dollyListCell.appendChild(dollyListSel);
// dolly material list
var dollyMatCell = row.insertCell(3);
var dollyMatSel = document.createElement('select');
dollyMatSel.name = 'axleMaterial' + numDollies;
dollyMatSel.id = 'axleMaterial' + numDollies;
dollyMatSel.options[0] = new Option('','-1');
dollyMatSel.options[1] = new Option('Aluminum','1');
dollyMatSel.options[2] = new Option('Steel','2');
dollyMatCell.appendChild(dollyMatSel);
// quantity text cell
var qtyCell = row.insertCell(4);
var qtyInput = document.createElement('input');
qtyInput.type = 'text';
qtyInput.name = 'dollyQuantity' + numDollies;
qtyInput.id = 'dollyQuantity' + numDollies;
qtyInput.size = 3;
qtyCell.appendChild(qtyInput);
}
I read something about naming each element something such as 'el[]' and then iterating through it on the PHP side, but that didn't make much sense to me. I have only been using PHP for a few weeks now so I'm pretty new. Thanks for the help! Similar TutorialsI have written code for adding and removing dynamic rows.i am using same file for both ADD and MODIFY operations.this page is working for ADD operation. lets say for MODIFY operation one employee has added 3 rows and i need to display those rows and user can edit thoese rows and finally these values will be submitted to database. problem is coming in modifyRow() method.how to accomodate array values in the dynamic rows in modifyRow() method.Please review the code in that method?while loading the values the structure should be same as addRow() method? Code: <HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
var enoArray = new Array("122","123","124");
var enameArray = new Array(3)
enameArray[0] = "Mike"
enameArray[1] = "Soleman"
enameArray[2] = "Kick"
var salArray = new Array(3)
salArray[0] = "100"
salArray[1] = "200"
salArray[2] = "300"
enoArray.sort();
function addRow()
{
tbl=document.getElementById('showTable');
var lastRow = tbl.rows.length;
var row = tbl.insertRow(lastRow);
var iteration = lastRow;
var cellremoveRow = row.insertCell(0);
cellremoveRow.innerHTML="<input type='button' value='-' onClick='removeRow(this);'>";
var cellSno = row.insertCell(1);
cellSno.innerHTML=iteration;
var cellEmpno = row.insertCell(2);
cellEmpno.innerHTML="<input type='text' name='empno' value=''>";
var cellEname = row.insertCell(3);
cellEname.innerHTML="<input type='text' name='ename' value=''>";
var cellSal = row.insertCell(4);
cellSal.innerHTML="<input type='text' name='sal' value=''>";
var cellAddRow = row.insertCell(5);
for(var i = 0; i < lastRow; i++)
{
tbl.rows[i].cells[5].innerHTML = '';
}
cellAddRow.innerHTML="<input type='button' value='AddRow' onClick='addRow();'>";
}
function removeRow(theRow){
var tab=document.getElementById('showTable');
index= theRow.parentNode.parentNode.rowIndex;
var lastRow = tab.rows.length;
tab.deleteRow(index);
for(i=1;i<tab.rows.length;i++)
{
tab.rows[i].cells[1].innerHTML=i;
}
tab.rows[lastRow-2].cells[5].innerHTML ="<input type='button' value='AddRow'
onClick='addRow();'>";
}
function modifyRow()
{
var tab=document.getElementById('showTable');
var lastRow = tab.rows.length;
alert(enoArray.length)
for(i=0;i<enoArray.length;i++)
{
var row = tab.insertRow();
var cell =row.insertCell();
tab.rows[i].cells[0].innerHTML="<input type='button' value='-' onClick='removeRow(this);'>";
tab.rows[i].cells[2].innerHTML= "<input type='text' name='empno' value='"+enoArray[i]+"'>"
;
tab.rows[i].cells[3].innerHTML= "<input type='text' name='empno'
value='"+enameArray[i]+"'>" ;
tab.rows[i].cells[4].innerHTML= "<input type='text' name='empno' value='"+salArray[i]+"'>"
;
}
}
</script>
</HEAD>
<BODY onload="modifyRow()">
<table id='showTable' border="0">
<tr>
<td> </td>
<td> </td>
<td>EmpNo</td>
<td>Name</td>
<td>Sal</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>1</td>
<td><input type='text' name='empno' value='' ></td>
<td><input type='text' name='ename' value='' ></td>
<td><input type='text' name='sal' value='' ></td>
<td><input type='button' value='AddRow' onClick='addRow();'> </td>
</tr>
</table>
</BODY>
</HTML>
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>
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. 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, 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 I CANNOT GET THIS! I created a for loop to generate a specified number of input type fields onto the page within my form. The for loop will not work! to my knowledge all the code within the for loop is correct... please help me out! Here is all the code regarding this problem... 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>History Countdown</title>
<style>
div#mainChart {
display: none;
}
fieldset#main {
padding: 20px 0 20px 20px;
text-align: left;
width: auto;
min-width: 400px;
}
fieldset#moreInfo {
padding: 20px 0 20px 20px;
text-align: left;
width: auto;
min-width: 200px;
margin: 20px;
display: none;
}
table {
margin: 0;
padding: 0;
}
td {
padding-right: 25px;
}
</style>
<script>
function enterData() {
document.getElementById("moreInfo").style.display = "block";
var start = document.getElementById("startNumber").value;
var end = document.getElementById("endNumber").value;
var thisNumber = Math.abs(start - end);
var dataFields = thisNumber + 1;
alert(dataFields);
setTimeout(makeFields, 500);
function makeFields() {
for (var i=1;i<=dataFields;i+=1){
var newNode = createElement("tr");
var newTD = createElement("td");
newTD.appendChild(document.createTextNode("Data for field " + i));
newNode.appendChild(newTD);
document.getElementById("dataTable").appendChild(newNode);
var newTD2 = createElement("td");
var newInput = createElement("input");
newInput.id = "data" + i;
var attr1 = document.createAttribute("type");
attr1.nodeValue = "text";
newInput.setAttribute(attr1);
newTD2.appendChild(newInput);
newNode.appendChild(newTD2);
document.getElementById("dataTable").appendChild(newNode);
}
}
}//end makeFields function
</script>
</head>
<body>
<div id="wrapper">
<form name="dataForm" id="chartCreator">
<h1>Countdown Chart</h1><br />
<fieldset id="main">
<table>
<legend>Chart Details</legend>
<tr><td>Name of chart</td>
<td><input name="countdownName" id="countDownName" type="text"></td>
</tr>
<tr><td>Start Countdown at...</td>
<td><input name="BeginNumber" id="startNumber" type="text" value="1"></td>
</tr>
<tr><td>End Countdown at...</td>
<td><input name="BeginNumber" id="endNumber" type="text" value="2011"></td>
</tr>
<tr><td><input type="button" value="Continue..." id="generateChart" onclick="enterData();" /></td>
</tr>
</table>
<fieldset id="moreInfo">
<legend>Data</legend>
<table id="dataTable">
<tr><td><input type="button" value="Create Chart!" id="generateChart" onclick="build();" /></td>
</tr>
</table>
</fieldset>
</fieldset>
</form>
</div>
</body>
</html>
This article ( http://www.webreference.com/js/column24/userdata.html ) explains how to do userdata persistence, but (like most things in ie) the code is in the source. Anyone know if you can do user data persistence dynamically in ie? Could I create the requisite metatag and css rule on-demand, instead of in the source? Any tips/links welcome. I have a website I am currently debugging, http://display.ist-apps.com/. When you select a ski resort, then go on to select a date, the dates relating to that ski resort show. However if you then go back and select another ski resort, the dates do not update they still continue to show the ones from the ski resort you originally selected. This is a debug piece of work I am doing based on something someone else built so it's a bit of a toughie, any help is appreciated. Here is the related (I think) JS file. Code: (function($){$.fn.
dynamicResortSelect = function(options)
{
var defaults = {
'dateFormat' : 'dd/mm/y',
'forceDatePickerZindex' : false,
'uris' : {
'get_availiable_durations' : '/get-availiable-durations',
'get_availiable_start_dates' : '/get-availiable-start-dates'}};
var options = $.extend(defaults, options);
var datePickerDrawn = false;
var durationsDrawn = false;
var currentMonth = '';
var resortTitle = '';
var resorts = [];
function _updateDurations(dateText, durationsValue)
{
$.getJSON(options.uris.get_availiable_durations, {'resort_title': resortTitle, 'start_date': dateText}, function (data)
{
var options = {0:'Duration...'};
for (var i in data)
{
options[data[i]] = data[i]+' Nights'
}
if (durationsValue < 0)
{
$('.duration_container').addClass('disabled');
$('select[name="duration"]')
.selectBox('disable')
.selectBox('value', 0);
}
else
{
$('.duration_container').removeClass('disabled');
$('select[name="duration"]')
.selectBox('options', options)
.selectBox('enable')
.selectBox('value', durationsValue);
}
});
}
/*
function _isValidDate(dates, date)
{
var formattedMonth = date.getMonth()+1;
if (formattedMonth < 10)
formattedMonth = '0'+formattedMonth;
var formattedDate = date.getDate();
if (formattedDate < 10)
formattedDate = '0'+formattedDate;
var dateFormatted = date.getFullYear()+'-'+formattedMonth+'-'+formattedDate+' 00:00:00';
return [$.inArray(dateFormatted, dates) != -1];
}*/
function _drawDatePicker(startDate, endDate, dates)
{
$('.date_picker_conatiner').removeClass('disabled');
$('.date_picker_conatiner .date_picker').removeAttr('disabled').datepicker(
{
dateFormat: options.dateFormat,
minDate: startDate,
maxDate: endDate,
beforeShow: function()
{
if (typeof(options.forceDatePickerZindex) == 'number')
setTimeout('jQuery("#ui-datepicker-div").css("z-index", "'+options.forceDatePickerZindex+'")', 1);
},
beforeShowDay: function(date)
{
var formattedMonth = date.getMonth()+1;
if (formattedMonth < 10)
formattedMonth = '0'+formattedMonth;
var formattedDate = date.getDate();
if (formattedDate < 10)
formattedDate = '0'+formattedDate;
var dateFormatted = date.getFullYear()+'-'+formattedMonth+'-'+formattedDate+' 00:00:00';
return [$.inArray(dateFormatted, dates) != -1];
},
onSelect: function(dateText, inst)
{
_updateDurations(dateText, 0);
}
});
}
function _updateDatePicker(value)
{
if (datePickerDrawn)
$('.date_picker').destroy();
resortTitle = resorts[value];
$.getJSON(options.uris.get_availiable_start_dates, {'resort_title': resortTitle}, function (data)
{
var startDate = data[0];
var endDate = data[data.length-1];
currentMonth = startDate.substring(5, 7);
startDate = _buildDate(startDate);
endDate = _buildDate(endDate);
_drawDatePicker(startDate, endDate, data);
});
return true;
}
function _buildDate(text)
{
ret = new Date(
text.substring(0, 4),
(text.substring(5, 7) - 1),
text.substring(8, 10));
return ret;
alert('alerting');
}
return this.each(function()
{
var alreadyPopulated = $('select[name="duration"]').val() != 0;
$('select[name="first_hotel_id"] option').each(function()
{
resorts[$(this).val()] = $(this).text();
});
// $('select[name="first_hotel_id"]').selectBox();
$('select[name="first_hotel_id"]').change(function()
{
var value = $(this).val();
_updateDatePicker(value);
/*
if (durationsDrawn)
$('select[name="duration"]').*/
});
// $('select[name="duration"]').selectBox();
// alert("true");
if (alreadyPopulated)
{
_updateDatePicker($('select[name="first_hotel_id"]').val());
durationsValue = $('select[name="duration"]').val();
_updateDurations($('.date_picker_conatiner .date_picker').val(), durationsValue);
}
});
}})(jQuery);
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'>£</option><option value='dol'>$</option><option value='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'>£</option><option value='dol'>$</option><option value='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>£</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 Hi, i'm a newbie in javascript. To make all clear of what I wanna do is, take a look at this URL: http://danecdotes.hostei.com/addproposal.html What i wanna do is when you click add more input link, you can have more rows to input more things. Note that in those <td> there's an input field in each <td> and I want those input to have their own names with increment ID (e.g like name1, name2, name3.). How can I make that possible? Thanks My table starts like this: Code: <table> <tr> <td rowspan='2'></td><td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> When an addRows button is clicked, the first two rows are copied (cloned), a checbox is then inserted into the row1 cell1, then the two rows are appended: <table> <tr> <td rowspan='2'></td><td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td rowspan='2'><input type='checkbox' name='check[]'></td><td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> Rows,except the first two can then be deleted by selecting the appropriate checkbox and clicking a deleteRow button. The check[] only exists after the first two rows have been copied and appended, so undefined means only two rows exist. Having a problem with the while loop. If a browser sees the next sibling of a tr as a td, the the loop should force the browser to go to the next sibling until its a tr, i.e row4. But its causing my browser(FF) to become unresponsive. Code: function deleteRow()
{
if(check == 'undefined')
{
return;
}
else
{
var check = document.getElementsByName('check[]'),row,nextRow,x;
var len = check.length;
for(x=len-1; x>=0; x--)
{
if(check[x].checked)
{
row = check[x].parentNode.parentNode;
while(row.nextSibling.nodeName != 'tr')
{
nextRow = row.nextSibling;
}
nextRow = row.nextSibling;
alert('ok');
}
}
}
}
Appreciate ans help with this? I've got this JavaScript code that is doing stuff to the content of <TR> rows.. but it's overselecting and I need to filter the <TR>s it selects in the bold line. var theRows = document.getElementsByTagName("TR"); var r = 0; var strTitle = ""; while (r < theRows.length) { try { strTitle = theRows[r].innerText || theRows[r].textContent; strTitle = strTitle.replace(/\n|\r|\t|\^ /g,""); if (strTitle.substring(0,1) == "(") { if (strTitle.indexOf("STAT") == -1) { theRows[r].style.display = "none"; ... continues Below is the rendered html. What I really want to do instead of if (strTitle.substring(0,1) == "(") Is only perform the operation when a row that is using class="ms- formlabel, or maybe has a FieldInternalName. I understand that strTitle is just pulling content, so how do I condition on other properties or strings within the <TR> row given my currently logic? Rendered HTML. <TR> <TD nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader"> <nobr>1. Do you become short of breath or develop chest pain when climbing a flight of stairs?</nobr> </H3></TD> <TD valign="top" class="ms-formbody" width="400px"> <!-- FieldName="1. Do you become short of breath or develop chest pain when climbing a flight of stairs?" FieldInternalName="ShortofBreath" FieldType="SPFieldBoolean" --> <span dir="none"> Thanks for any help or information! Hellooo. So I'm having trouble figuring out how to dynamically add another set of rows to a table when a button is clicked. The code below shows what goes into one set. When the button is clicked, it needs to create another three rows with the same format as the code below, but the variable names need to show what row they're on so I can easily call the values that have been inputed in another function that saves the information. Sooo for example the first variable, bhrs1-1 needs to become bhrs4-1 in the next set (because there's already a bhrs2-1 and bhrs3-1 in this set, which would become bhrs5-1 and bhrs6-1 in the new set). Sorry the code's so long! Help would be greatly appreciated. Thanksss!! Code: <TBODY>
<INPUT TYPE=HIDDEN id=bhrs1-1 name=bhrs1-1><INPUT TYPE=HIDDEN id=comment1-1 name=comment1-1>
<INPUT TYPE=HIDDEN id=bhrs1-2 name=bhrs1-2><INPUT TYPE=HIDDEN id=comment1-2 name=comment1-2>
<INPUT TYPE=HIDDEN id=bhrs1-3 name=bhrs1-3><INPUT TYPE=HIDDEN id=comment1-3 name=comment1-3>
<INPUT TYPE=HIDDEN id=bhrs1-4 name=bhrs1-4><INPUT TYPE=HIDDEN id=comment1-4 name=comment1-4>
<INPUT TYPE=HIDDEN id=bhrs1-5 name=bhrs1-5><INPUT TYPE=HIDDEN id=comment1-5 name=comment1-5>
<INPUT TYPE=HIDDEN id=bhrs1-6 name=bhrs1-6><INPUT TYPE=HIDDEN id=comment1-6 name=comment1-6>
<INPUT TYPE=HIDDEN id=bhrs1-7 name=bhrs1-7><INPUT TYPE=HIDDEN id=comment1-7 name=comment1-7>
<TR>
<TD HEIGHT=20 SDVAL="1" SDNUM="1033;1033;#,##0_);[RED](#,##0)">
<SELECT style="width:500px;" name=project_id1 size=1 onChange='onProjectChanged(1);'>
<?
//
// Load Projects
//
// $sresults = mysql_query("SELECT project_id, project, billable_rate, customer_id, Customer.CustomerName FROM Project LEFT OUTER JOIN Customer ON Project.customer_id=Customer.customer_id WHERE status_id='active' ORDER BY project");
$sresults = mysql_query("SELECT project_id, project, billable_rate, Project.customer_id, CostCenter.DisplayNameShort FROM Project LEFT OUTER JOIN CostCenter ON Project.customer_id=CostCenter.customer_id WHERE status_id='active' ORDER BY customer_id,CostCenter.DisplayNameShort,project");
// $srate = 0;
print "<OPTION value='0'>--</OPTION>\n";
while($arow = mysql_fetch_assoc($sresults))
{
// $srate = $arow["billable_rate"];
print "<OPTION value=\"" . $arow["project_id"] . "\">" . substr($arow["DisplayNameShort"], 0, 15) . ": " . $arow["project"] . "</OPTION>\n";
}
// print "\n</SELECT>Billable Rate: <INPUT name=billable_rate value=\"" . $srate . "\" size=10 DISABLED></TD>\n";
?>
</TD>
<TD>
<SELECT name=task11 size=1 style="width:220px;" onChange='onTaskChange(1);'>
<?
print "<OPTION value='0'>--</OPTION>\n";
print "<OPTION value='1'>Sales Support</OPTION>\n";
print "<OPTION value='2'>Project Management</OPTION>\n";
print "<OPTION value='3'>Discovery and Requirements Documentation</OPTION>\n";
print "<OPTION value='4'>Analysis and Design</OPTION>\n";
print "<OPTION value='5'>Coding, Unit Testing, Infrastructure Changes</OPTION>\n";
print "<OPTION value='6'>QA, Planning, System Testing</OPTION>\n";
print "<OPTION value='7'>User Acceptance Testing</OPTION>\n";
print "<OPTION value='8'>User Documentation and Training</OPTION>\n";
print "<OPTION value='9'>Launch</OPTION>\n";
print "<OPTION value='10'>Maintenance, Support, Account Management</OPTION>\n";
?>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs1-1 name=hrs1-1 size=2 maxlength=2 onFocus='onCellFocus(1,1);' onChange='calcRowTotal(1,1);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs1-2 name=hrs1-2 size=2 maxlength=2 onFocus='onCellFocus(1,2);' onChange='calcRowTotal(1,2);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs1-3 name=hrs1-3 size=2 maxlength=2 onFocus='onCellFocus(1,3);' onChange='calcRowTotal(1,3);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs1-4 name=hrs1-4 size=2 maxlength=2 onFocus='onCellFocus(1,4);' onChange='calcRowTotal(1,4);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs1-5 name=hrs1-5 size=2 maxlength=2 onFocus='onCellFocus(1,5);' onChange='calcRowTotal(1,5);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs1-6 name=hrs1-6 size=2 maxlength=2 onFocus='onCellFocus(1,6);' onChange='calcRowTotal(1,6);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs1-7 name=hrs1-7 size=2 maxlength=2 onFocus='onCellFocus(1,7);' onChange='calcRowTotal(1,7);'><BR>
</P>
</TD>
<TD BGCOLOR="#ffff99" SDVAL="0" SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><FONT SIZE=3><B><INPUT id=task1total size=2 maxlength=4 DISABLED></B></FONT>
</P>
</TD>
</TR>
<INPUT TYPE=HIDDEN id=bhrs2-1 name=bhrs2-1><INPUT TYPE=HIDDEN id=comment2-1 name=comment2-1>
<INPUT TYPE=HIDDEN id=bhrs2-2 name=bhrs2-2><INPUT TYPE=HIDDEN id=comment2-2 name=comment2-2>
<INPUT TYPE=HIDDEN id=bhrs2-3 name=bhrs2-3><INPUT TYPE=HIDDEN id=comment2-3 name=comment2-3>
<INPUT TYPE=HIDDEN id=bhrs2-4 name=bhrs2-4><INPUT TYPE=HIDDEN id=comment2-4 name=comment2-4>
<INPUT TYPE=HIDDEN id=bhrs2-5 name=bhrs2-5><INPUT TYPE=HIDDEN id=comment2-5 name=comment2-5>
<INPUT TYPE=HIDDEN id=bhrs2-6 name=bhrs2-6><INPUT TYPE=HIDDEN id=comment2-6 name=comment2-6>
<INPUT TYPE=HIDDEN id=bhrs2-7 name=bhrs2-7><INPUT TYPE=HIDDEN id=comment2-7 name=comment2-7>
<TR>
<TD HEIGHT=20 SDVAL="2" SDNUM="1033;1033;#,##0_);[RED](#,##0)">
<INPUT name=remove1 value=Remove type=button onClick='removeProject(1);'>
</TD>
<TD>
<SELECT name=task12 size=1 style="width:220px;" onChange='onTaskChange(2);'>
<?
print "<OPTION value='0'>--</OPTION>\n";
print "<OPTION value='1'>Sales Support</OPTION>\n";
print "<OPTION value='2'>Project Management</OPTION>\n";
print "<OPTION value='3'>Discovery and Requirements Documentation</OPTION>\n";
print "<OPTION value='4'>Analysis and Design</OPTION>\n";
print "<OPTION value='5'>Coding, Unit Testing, Infrastructure Changes</OPTION>\n";
print "<OPTION value='6'>QA, Planning, System Testing</OPTION>\n";
print "<OPTION value='7'>User Acceptance Testing</OPTION>\n";
print "<OPTION value='8'>User Documentation and Training</OPTION>\n";
print "<OPTION value='9'>Launch</OPTION>\n";
print "<OPTION value='10'>Maintenance, Support, Account Management</OPTION>\n";
?>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs2-1 name=hrs2-1 size=2 maxlength=2 onFocus='onCellFocus(2,1);' onChange='calcRowTotal(2,1);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs2-2 name=hrs2-2 size=2 maxlength=2 onFocus='onCellFocus(2,2);' onChange='calcRowTotal(2,2);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs2-3 name=hrs2-3 size=2 maxlength=2 onFocus='onCellFocus(2,3);' onChange='calcRowTotal(2,3);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs2-4 name=hrs2-4 size=2 maxlength=2 onFocus='onCellFocus(2,4);' onChange='calcRowTotal(2,4);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs2-5 name=hrs2-5 size=2 maxlength=2 onFocus='onCellFocus(2,5);' onChange='calcRowTotal(2,5);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs2-6 name=hrs2-6 size=2 maxlength=2 onFocus='onCellFocus(2,6);' onChange='calcRowTotal(2,6);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs2-7 name=hrs2-7 size=2 maxlength=2 onFocus='onCellFocus(2,7);' onChange='calcRowTotal(2,7);'><BR>
</P>
</TD>
<TD BGCOLOR="#ffff99" SDVAL="0" SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><FONT SIZE=3><B><INPUT id=task2total size=2 maxlength=4 DISABLED></B></FONT>
</P>
</TD>
</TR>
<INPUT TYPE=HIDDEN id=bhrs3-1 name=bhrs3-1><INPUT TYPE=HIDDEN id=comment3-1 name=comment3-1>
<INPUT TYPE=HIDDEN id=bhrs3-2 name=bhrs3-2><INPUT TYPE=HIDDEN id=comment3-2 name=comment3-2>
<INPUT TYPE=HIDDEN id=bhrs3-3 name=bhrs3-3><INPUT TYPE=HIDDEN id=comment3-3 name=comment3-3>
<INPUT TYPE=HIDDEN id=bhrs3-4 name=bhrs3-4><INPUT TYPE=HIDDEN id=comment3-4 name=comment3-4>
<INPUT TYPE=HIDDEN id=bhrs3-5 name=bhrs3-5><INPUT TYPE=HIDDEN id=comment3-5 name=comment3-5>
<INPUT TYPE=HIDDEN id=bhrs3-6 name=bhrs3-6><INPUT TYPE=HIDDEN id=comment3-6 name=comment3-6>
<INPUT TYPE=HIDDEN id=bhrs3-7 name=bhrs3-7><INPUT TYPE=HIDDEN id=comment3-7 name=comment3-7>
<TR>
<TD HEIGHT=20 SDVAL="3" SDNUM="1033;1033;#,##0_);[RED](#,##0)">
<P><BR>
</P>
</TD>
<TD>
<SELECT name=task13 size=1 style="width:220px;" onChange='onTaskChange(3);'>
<?
print "<OPTION value='0'>--</OPTION>\n";
print "<OPTION value='1'>Sales Support</OPTION>\n";
print "<OPTION value='2'>Project Management</OPTION>\n";
print "<OPTION value='3'>Discovery and Requirements Documentation</OPTION>\n";
print "<OPTION value='4'>Analysis and Design</OPTION>\n";
print "<OPTION value='5'>Coding, Unit Testing, Infrastructure Changes</OPTION>\n";
print "<OPTION value='6'>QA, Planning, System Testing</OPTION>\n";
print "<OPTION value='7'>User Acceptance Testing</OPTION>\n";
print "<OPTION value='8'>User Documentation and Training</OPTION>\n";
print "<OPTION value='9'>Launch</OPTION>\n";
print "<OPTION value='10'>Maintenance, Support, Account Management</OPTION>\n";
?>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs3-1 name=hrs3-1 size=2 maxlength=2 onFocus='onCellFocus(3,1);' onChange='calcRowTotal(3,1);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs3-2 name=hrs3-2 size=2 maxlength=2 onFocus='onCellFocus(3,2);' onChange='calcRowTotal(3,2);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs3-3 name=hrs3-3 size=2 maxlength=2 onFocus='onCellFocus(3,3);' onChange='calcRowTotal(3,3);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs3-4 name=hrs3-4 size=2 maxlength=2 onFocus='onCellFocus(3,4);' onChange='calcRowTotal(3,4);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs3-5 name=hrs3-5 size=2 maxlength=2 onFocus='onCellFocus(3,5);' onChange='calcRowTotal(3,5);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs3-6 name=hrs3-6 size=2 maxlength=2 onFocus='onCellFocus(3,6);' onChange='calcRowTotal(3,6);'><BR>
</P>
</TD>
<TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><INPUT id=hrs3-7 name=hrs3-7 size=2 maxlength=2 onFocus='onCellFocus(3,7);' onChange='calcRowTotal(3,7);'><BR>
</P>
</TD>
<TD BGCOLOR="#ffff99" SDVAL="0" SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)">
<P ALIGN=CENTER><FONT SIZE=3><B><INPUT id=task3total size=2 maxlength=4 DISABLED></B></FONT>
</P>
</TD>
</TR>
</TBODY>
My table had the following layout. Code: <table> <tr> <td rowspan='2'><td> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> After clicking an add rows button, the two rows are cloned and appended as follows with a checkbox added as shown. Code: <table> <td rowspan='2'><td> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td rowspan='2'><input type='checkbox' name='check'><td> <td>Data</td><td>Data</td><td>Data</td> </tr> <tr> <td>Data</td><td>Data</td><td>Data</td> </tr> </table> I want to be able to delete rows 3&4 by selecting the checkbox in row 3 and clicking a delete rows button. Regardless of how many sets of rows have been previously added, any set of rows can be deleted by selecting the appropriate checkbox(es) and clicking delete button. I'm trying to figure out how this can be done. My thinking is if checkbox is checked, calculate row index. I would then have to call deleteRow twice on that row index. Is there a better way of doing this? The code so far works, but the rows form horizontally rather than vertically. This is my first time working with XMLHttpRequest() so it's probably pretty sloppy. Also, when the function runs again, it creates another row above the previous row, I'll add a screen shot. http://tinyurl.com/7c7fylb - What it looks like when I've typed "bloodb" which means everything after the return if statement has ran twice Code: function findCard()
{
str = document.getElementById("cardName").value;
if (str.length<=4)
{
return;
}
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","CardInfo/cards.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var strLng = str.length;
var x = xmlDoc.getElementsByTagName("card");
var table = document.getElementById("cardDisplay")
var newRow = table.insertRow(0)
for (i=0; i {
var resaultStr = x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue.slice(0,strLng)
if (str==resaultStr)
{
newRow.insertCell(0).innerHTML=x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue
}
}
}
I writed the following HTML code: Quote: <html> <head> <title>Pagina di Prova</title> <script type="text/javascript" src="/home/savio/Scrivania/prova.js"></script> </head> <body> <h1 align="center">PROVA DI RIMOZIONE DI RIGHE E CELLE DALLA TABELLA</h1> <br/><br/> <table id="nometabella" border="2" align="center" cellpadding="10%"> <tr id="nomeriga1"><td>Cella 1</td><td>Cella 2</td></tr> <tr id="nomeriga2"><td>Cella 3</td><td>Cella 4</td></tr> <tr id="nomeriga3"><td>Cella 5</td><td>Cella 6</td></tr> </table> <input type="submit" value="Enter" onclick="return del()"/> </body> </html> and the following javascript code: Quote: function del() { if (document.getElementById) { var tabella = document.getElementById("nometabella"); var riga1 = document.getElementById("nomeriga1"); tabella.removeChild(riga1); } } I want to delete first row of table, but it happens nothing. How can solve this problem? I have created a calculator for my site but I am having troubles figuring out a way to make the "add row" and "delete row" functionality work correctly. I would like the user to only see 1 row of information and then add/delete rows as needed. I currently only have 4 static rows. If anyone can help it would be greatly appreciated. Thanks The page is at https://learningportal.juniper.net/j...lator/Calc.htm Hi, Is there away to alternate DIV rows in a specific section. When I try to alternate the DIVs it alternates everything that is a DIV on the page. I want to just alternate a DIV table. Is this possible? Thanks alot Joe I would like to be able to write a function (or something) to count the number of rows in the table, I don't know how to do it, any help is appreciated.
|
|||||||