Unable To edit html table using javascript - javascript

I want to edit content of my html table using javascript. I am getting content in the form on click of edit button but when i click on save button it doesn't update the values of that row please help me out as it'll be very appreciated..
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(myTable) {
var table = document.getElementById("myTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
cell2.innerHTML=document.getElementById('txtname').value;
cell3.innerHTML=document.getElementById('txtauthor').value;
cell4.innerHTML=document.getElementById('txtcdate').value;
}
function deleteRow(myTable) {
try {
var table = document.getElementById(myTable);
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);
}
}
function edt(myTable) {
try {
var table = document.getElementById(myTable);
var rowCount = table.rows.length;
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
document.getElementById("txtname").value = table.rows[i].cells["1"].innerHTML;
document.getElementById("txtauthor").value = table.rows[i].cells["2"].innerHTML;
document.getElementById("txtcdate").value = table.rows[i].cells["3"].innerHTML;
//document.getElementById("et1").value = table.rows[i].cells["4"].innerHTML;
//document.getElementById("ep1").value = table.rows[i].cells["5"].innerHTML;
document.getElementById("crw").value = i;
}
}
}catch(e) {
alert(e);
}
}
function savedit(myTable){
if(null != chkbox && true == chkbox.checked) {
var table = document.getElementById("myTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
cell2.innerHTML=document.getElementById('txtname').value;
cell3.innerHTML=document.getElementById('txtauthor').value;
cell4.innerHTML=document.getElementById('txtcdate').value;
}
}
</SCRIPT>
</HEAD>
HTML
<BODY>
<INPUT type="button" value="Add Row" onClick="addRow('myTable')" />
<INPUT type="button" value="Delete Row" onClick="deleteRow('myTable')" />
<INPUT type="button" value="Edit Row" onClick="edt('myTable')" />
<INPUT type="button" value="Save" onClick="savedit('myTable')" />
<table id="myTable" border="1">
<thead>
<th id="name"><input type="checkbox" id="chkbox" /></th>
<th id="name">Name</th>
<th id="author">Author</th>
<th id="cdate">Date</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="chkbox1" /></td>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td><input type="checkbox" id="chkbox2" /></td>
<td>cell 4</td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
</tbody>
</table>
<form name="create"2 style="width:80px;">
Name:<input type="text" id="txtname" /><br/>
Author<input type="text" id="txtauthor" name="txtauthor" /><br/>
Date:<input type="text" id="txtcdate" name="txtcdate" /><br/>
Content:<input type="text" id="txtcontent" name="txtcontent" style="height:80px; " />
</form>
<input type="hidden" id="crw">
</BODY>
</HTML>

replace edit function with following code(vice verse of your add function)
function savedit(myTable){
var table = document.getElementById(myTable);
var rowCount = table.rows.length;
for(var i=1; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.rows[i].cells["1"].innerHTML = document.getElementById("txtname").value ;
table.rows[i].cells["2"].innerHTML = document.getElementById("txtauthor").value;
table.rows[i].cells["3"].innerHTML = document.getElementById("txtcdate").value ;
//document.getElementById("et1").value = table.rows[i].cells["4"].innerHTML;
//document.getElementById("ep1").value = table.rows[i].cells["5"].innerHTML;
document.getElementById("txtname").value = '';
document.getElementById("txtauthor").value = '';
document.getElementById("txtcdate").value = '' ;
chkbox.checked = false;
document.getElementById("crw").value = i;
}
}
}
I strongly recommend you to use some plugin or grid like kendo that is already tested and working

Related

Edit button not working in table

I am creating datab;e for user wherein after they have added the subject they can change the descrption but not the code. I am able to add and delete the content but not sure of how to edit only the description column.I am new to javascript and jquery so not sure of how to incorporate this
Javascript
function addRow(tableID) {
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";
element1.name = "chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "checkbox";
element4.name = "chkbox[]";
cell4.appendChild(element4);
}
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);
}
}
HTML used is
<label>Academic Year</label>
<input type="text" name="acadyear" readonly>
<br>
<br>
<label>Class</label>
<input type="text" name="stuclass" readonly>
<label>Section</label>
<input type="text" name="stusection" readonly>
<br>
<br>
<input type="button" value="Add Subject" onclick="addRow('dataTable')" />
<input type="button" value="Delete Subject" onclick="deleteRow('dataTable')" />
<br>
<br>
<table id="dataTable" style="text-align: left; width: auto; height: 32px;" border="2" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<th></th>
<th>Subject Code</th>
<th>Subject Description</th>
<th>Enrol?</th>
</tr>
<tr>
<td>
<input type="checkbox" name="chk[]">
</td>
<td>
<input type="text" name="subcode[]">
</td>
<td>
<input type="text" name="subdesc[]">
</td>
<td>
<input type="checkbox" name="enrol[]">
</td>
</tr>
</tbody>
</table>
Are you expecting something like this?
I am making the subject code field readonly after the user changes it using JQuery change event.
function addRow(tableID) {
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";
element1.name = "chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
element2.className = 'sub';
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "checkbox";
element4.name = "chkbox[]";
cell4.appendChild(element4);
}
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);
}
}
$('body').on('change', '.sub', function(e) {
$(this).attr('readonly', 'readonly');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Academic Year</label>
<input type="text" name="acadyear" readonly>
<br><br>
<label>Class</label>
<input type="text" name="stuclass" readonly>
<label>Section</label>
<input type="text" name="stusection" readonly>
<br><br>
<input type="button" value="Add Subject" onclick="addRow('dataTable')" />
<input type="button" value="Delete Subject" onclick="deleteRow('dataTable')" />
<br><br>
<table id="dataTable" style="text-align: left; width: auto; height: 32px;" border="2" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<th></th>
<th>Subject Code</th>
<th>Subject Description</th>
<th>Enrol?</th>
</tr>
<tr>
<td><input type="checkbox" name="chk[]"></td>
<td><input type="text" name="subcode[]" class="sub"></td>
<td><input type="text" name="subdesc[]"></td>
<td><input type="checkbox" name="enrol[]"></td>
</tr>
</tbody>
</table>
make the subject reeadonly
<td><input type="text" name="subcode[]" readonly class="sub"></td>
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
element2.className = 'sub';
element2.setAttribute('readonly',true)
cell2.appendChild(element2);

Pass Value from javascript to another jsp

I have a Javascript value from a.jsp and I want to pass the value of it to b.jsp.
how can it be done?
a.jsp
<script type="text/javascript">
var inspection_method_row_limit=50;
</script>
as example I want to pass to value of inspection_method which can be used in b.jsp.
In a.jsp, you need to forward to another jsp. I am assuming you will do it on a click of some anchor.
In javascript code, Make the final url.
var forward_url = "/jsp/b.jsp?inspection_method_row_limit="+50;
Update the location probably, on a click of an anchor tag...
Forward.
In the target jsp, use the following...
The value of inspection_method_row_limit is <b>
<%= request.getParameter("inspection_method_row_limit") %></b>!
<script type="text/javascript">
var inspection_method_row_limit=0;
var deleted_row_inspection_method="";
function myCreateFunction(tableID) {
var ClickMax = 5;
if (inspection_method_row_limit < ClickMax){
var table = document.getElementById(tableID);
var x = inspection_method_row_limit + 1;
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
//compare if no deleted row before then enter if statement and numbering is follow inspection_method_row_limit
if (deleted_row_inspection_method == ""){
var cell2 = row.insertCell(1);
cell2.innerHTML = x;
var cell3 = row.insertCell(2);
var element2 = document.createElement("textarea");
element2.type = "textarea";
var txt = tableID + x;
element2.name = txt;
element2.className = "textarea2";
cell3.appendChild(element2);
}
//if user had deleted row before then the numbering of previously will be reuse
else
{
var stringlength = deleted_row_inspection_method.length;
var foundLocation = deleted_row_inspection_method.search("-");
var subStringname = deleted_row_inspection_method.substring(0,foundLocation);
deleted_row_inspection_method = deleted_row_inspection_method.slice(foundLocation + 1,stringlength);
var cell2 = row.insertCell(1);
cell2.innerHTML = subStringname;
var cell3 = row.insertCell(2);
var element2 = document.createElement("textarea");
element2.type = "textarea";
element2.name = tableID + subStringname;
element2.className = "textarea2";
cell3.appendChild(element2);
}
inspection_method_row_limit ++;
}
function myDeleteFunction(tableID) {
//delete row for inspection method
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) {
var res = row.cells[1].innerHTML + "-";
deleted_row_inspection_method = deleted_row_inspection_method.concat(res);
table.deleteRow(i);
rowCount--;
i--;
inspection_method_row_limit --;
}
}
}catch(e) {
alert(e);
}
</script>
<form action="index.html?pageid=inspection_session&content=inspection_summary_result" name="form1" id="form1" method="post" onsubmit="return validateForm(document.form1)" >
<tr>
<td width="300" height="100"><font style="font-size:18px">2. Inspection Method <img src="images/information.png" width="20" height="20" align="absmiddle" style="cursor:pointer;" title="Add Row for More Data" alt="Add Row for More Data"></font></td>
<td valign="top">
<button type="button" class="mybtn" onclick="myCreateFunction('inspection_method')"><img align="absmiddle" src="icons/action_add.png"/> Add Row</button>
<button type="button" class="mybtn" onclick="myDeleteFunction('inspection_method')"><img align="absmiddle" src="icons/action_remove.png"/> Delete Row</button>
<table id="inspection_method" border="1">
<tr>
<td width="50"><img src="images/001_06.gif" width="20" height="20" align="absmiddle" style="cursor:pointer;" title="Tick to Delete" alt="Tick to Delete"></td>
<td width="50">No.</td>
<td width="589">Description</td>
</tr>
</table><br>
</td>
</tr>
<table>
<tr>
<td height="45" colspan="4"><input type="submit" name="submit" class="mybtn3" value="Next"/> <input type="reset" class="mybtn3" name="reset" value="Reset"/></td>
</tr>
</table>
</form>

add/remove multiple rows using checkbox with javascript

I'm stuck with javascript I working on. I want to add more fields dynamically, my problem is I want to be able to add a row with input boxes. Within the added row, first column contain checkbox, second column contain an increment number, third column contain input txtbox, fourth column checkbox1, fifth column contain input txtbox1 and sixth column contain input txtbox3. Now my question is, how would I add dynamicaly second row under fourth column checkbox1, fifth column txtbox1 and sixth column txtbox3 while maintaing alignment with checkbox,txtbox?
And within the added row, if possible it have to have two button, add row and delete row.
Here is snippet which runs but doesn't do want I expecting:
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
var i=0;
i++;
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";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 0;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "checkbox";
element4.name="chkbox[]";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
cell5.innerHTML = rowCount -1;
var cell6 = row.insertCell(5);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox1[]";
cell6.appendChild(element5);
var cell7 = row.insertCell(6);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "txtbox2[]";
cell7.appendChild(element6);
var cell8 = row.insertCell(7);
var element7 = document.createElement("input");
element7.type = "text";
element7.name = "txtbox3[]";
cell8.appendChild(element7);
}
function addVillageNames()
{
}
function removeVillageNames()
{
}
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>
</HEAD>
<BODY>
<form action="Untitled-2.php" name="Untitled-2" method="post">
<table width="760" id="dataTable" border="1">
<tr>
<TD width="22" rowspan="2"><INPUT type="checkbox" name="chk"/></TD>
<TD width="12" rowspan="2"> 1 </TD>
<TD width="149" rowspan="2"> <INPUT type="text" name="txtbox[]" /> </TD>
<TD width="20"><INPUT type="checkbox" name="chk1"/></TD>
<TD width="12"> 1 </TD>
<TD width="200"> <INPUT type="text" name="txtbox1[]" /></TD>
<TD width="146"> <INPUT type="text" name="txtbox2[]" /> </TD>
<TD width="188"> <INPUT type="text" name="txtbox3[]" /> </TD>
</TR>
<tr>
<TD width="20"> </TD>
<TD width="12"> </TD>
<TD><input type="button" value="Add Row1" onClick="addRow1('dataTable')" /> <input type="button" value="Delete Row1" onClick="deleteRow1('dataTable')" /></TD>
<TD width="146"> </TD>
<TD width="188"> </TD>
</TR>
</TABLE>
<tr>
<td>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" /> </td></tr>
</form>
</BODY>
</HTML>
As much as I love plain/vanilla javascript, I would have to recommend jQuery for your next project. Here's a jsfiddle of the code using only plain/vanilla javascript.
Here's the JavaScript function you'll need
function hasClass(el, cssClass) {
return el.className && new RegExp("(^|\\s)" + cssClass + "(\\s|$)").test(el.className);
}
var rowNumber = 1;
function addRow(tableID) {
var counter = document.getElementById(tableID).rows.length-1;
var row = document.getElementById(tableID);
var newRow0 = row.rows[1].cloneNode(true);
var newRow1 = row.rows[counter].cloneNode(true);
// Increment
rowNumber ++;
newRow0.getElementsByTagName('td')[1].innerHTML = rowNumber;
// Update the child Names
var items = newRow0.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
items[i].value = null;
items[i].name = counter + '_' + items[i].name;
}
var refRow = row.getElementsByTagName('tbody')[0];
refRow.insertBefore(newRow0, refRow.nextSibling);
refRow.insertBefore(newRow1, refRow.nextSibling);
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var i = table.rows.length - 1;
while (2 < i && !hasClass(table.rows[i], 'row-parent')) {
table.deleteRow(i)
i--;
}
if (2 < i) {
table.deleteRow(i)
rowNumber --;
}
}
function addChildRow(e, tableID) {
var table = document.getElementById(tableID);
var newRow = table.rows[0].cloneNode(true);
// Increment
if (e > 0)
if (!isNaN(table.rows[e-1].getElementsByTagName('td')[4].innerHTML))
var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[4].innerHTML)
else
var counter = parseInt(table.rows[e-1].getElementsByTagName('td')[1].innerHTML)
newRow.getElementsByTagName('td')[1].innerHTML = counter + 1;
// Update the child Names
var items = newRow.getElementsByTagName("input");
for (var i = 0; i < items.length; i++) {
items[i].value = null;
items[i].name = counter + '_' + items[i].name;
}
var i = e;
while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
i--;
var parent = table.rows[i].getElementsByTagName('td');
parent[0].rowSpan = counter+2;
parent[1].rowSpan = counter+2;
parent[2].rowSpan = counter+2;
var refRow = table.getElementsByTagName('tr')[e-1];
refRow.parentNode.insertBefore(newRow, refRow.nextSibling);
}
function deleteChildRow(e, tableID) {
var table = document.getElementById(tableID);
var i = e;
while (1 <= i && !hasClass(table.rows[i], 'row-parent'))
i--;
if (e-1 > i)
table.deleteRow(e-1)
}
And here's the HTML
<form action="Untitled-2.php" name="dataTable" method="post">
<table width="760" id="dataTable" border="1">
<tr>
<td width="20">
<input type="checkbox" name="chk1" />
</td>
<td width="12">1</td>
<td width="200">
<input type="text" name="txtbox1[]" />
</td>
<td width="146">
<input type="text" name="txtbox2[]" />
</td>
<td width="188">
<input type="text" name="txtbox3[]" />
</td>
</tr>
<tr class="row-parent">
<td width="22" rowspan="2">
<input type="checkbox" name="chk" />
</td>
<td width="12" rowspan="2">1</td>
<td width="149" rowspan="2">
<input type="text" name="txtbox[]" />
</td>
<td width="20">
<input type="checkbox" name="chk1" />
</td>
<td width="12">1</td>
<td width="200">
<input type="text" name="txtbox1[]" />
</td>
<td width="146">
<input type="text" name="txtbox2[]" />
</td>
<td width="188">
<input type="text" name="txtbox3[]" />
</td>
</tr>
<tr>
<td width="20"> </td>
<td width="12"> </td>
<td>
<input type="button" value="+ Child Row" onClick="addChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
<input type="button" value="- Child Row" onClick="deleteChildRow(this.parentNode.parentNode.rowIndex, 'dataTable')" />
</td>
<td width="146"> </td>
<td width="188"> </td>
</tr>
</table>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" />
</form>
And here's the CSS to hide the first row:
table tr:first-child {
display: none;
}

AppendChild Form / Table [Javascript/Html/PHP]

My main issue is that I have a really nicely set up ability to add forms/remove them HOWEVER, the problem is that Doing one type of append will make the inputs show up (exactly how I want it) but not actually be added to the form while the other makes the form invisible however you can see it pop up on the $_POST.
<script language="javascript">
function addRow(tableID,texting,values) {
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);
cell2.innerHTML = texting+":";
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = texting; // Change this dummy.
if(tableID == "levelup")
element2.name += "rate";
if(values != "" && values != null && values != "undefined")
element2.value = values;
cell3.appendChild(element2); //This isn't hidden but no works, wat?
//document.forms[1].appendChild(element2); //This works but is hidden
//document.forms[1].write("hi!");
}
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>
<html>
<table>
<tr><td>Add statistic:</td></tr>
<form action="<?php echo $PHP_SELF; ?>" method="post" enctype="multipart/form-data">
<tr><td><input type="text" name="addme"><input type="button" value="add" onclick="addRow('formulas',document.forms[0].addme.value); addRow('levelup',document.forms[0].addme.value,'1+'+document.forms[0].addme.value)"/></td><td><input type="button" value="Delete" onclick="deleteRow('formulas'); deleteRow('levelup')"/></td></tr>
</form>
<form action="<?php echo $PHP_SELF; ?>" method="post" enctype="multipart/form-data">
<tr><td>Formula name:</td><td><input type="text" name="formulaname"></td></tr>
<tr><td>Statistics at level 1(required)</td></tr>
<tr>
<table>
<tr><td>Level 1:</td></tr>
<tr><td>Move speed:</td><td><input type="text" value="1" name="movespeed"></td></tr>
<tr><td>Stats:</td></tr>
<tr><td><table id="formulas"></table></td></tr>
</table></tr>
<tr><td>Level up Formula Rates</td></tr>
<table>
<tr><td>Move speed:</td><td><input type="text" value="Mov+1" name="Movrate"></td></tr>
<tr><td>Experience:</td><td><input type="text" value="(Exp*0.25)*Exp*Lvl+(0.25*Mov)" name="Exprate"></td></tr>
<tr><td><table id="levelup"></table></td></tr>
</table>
<tr><td><input type="submit" value="Save"/></td></tr>
</form>
</table>
</html>
This doesn't work because you append a new row outside the form. Split your table into two separate tables, one for the first form and one for the second. Then wrap the tables in the form tags that are currently inside it.
The result should have the following structure:
<form>
<table> (add statistics form) </table>
</form>
<form>
<table> (formulas) </table>
</form>

How to dynamically add Date in a form using JavaScript?

I have this form code to dynamically add rows. How can I add a date dynamically?
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
<SCRIPT language="javascript">
function addRow(tableID) {
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);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);
}
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>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
</TR>
</TABLE>
</BODY>
</HTML>
This the code for adding row dynamically
This is the code for calendar
<script language="JavaScript" src="calendar_us.js"></script>
<link rel="stylesheet" href="calendar.css">
<INPUT type="text" name="testinput" />
<script language="JavaScript">
new tcal ({
// form name
'formname': 'testform',
// input name
'controlname': 'testinput'
});
</script>
add a new cell for example,
var cell4 = row.insertCell(3);
cell4.innerHTML = new Date();
.
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
<TD> <INPUT type="text" name="testinput" /></TD>
</TR>
can you explain where to insert the date?

Categories