Menu
Cross Browser adding/editing/deleting rows in a table
I have a page which has a button saying add item.
when the user clicks on the button a new window should popup.
In the pop up window there should be a form with all the columns to be added for that row in main wondow. when the user enters the values in the pop up window they should be dynamically added to the main window.
the bottom line is _dynamically adding rows to a table with a form.
i know how to do this is jsp or asp.
but i want it to perform on the client side.
This works well on windows IE and Netscape
but i want it browser independent.
it falis on mac IE and Netscape…
kindly anyone help me . thank you for your time.
<script language=’javascript’>
var val=1; var rowels=3;
function addrow(val1,val2) {
val+=1
newfields=”<table><tr><td><input type=’text’ value='”+val1+”‘></td><td><input type=’text’ value='”+val2+”‘></td><td><input type=’checkbox’ value='” +val+ “‘ onClick=’enabling(this.checked)’></td></tr></table>”
document.getElementById(‘tcell’).innerHTML+=newfields
document.forms[1].del.disabled=false
}
function delrows() {
numel=document.forms[0].elements.length
for(i=2; i<numel; i=i+rowels) {
if(document.forms[0].elements[i].checked==true)
{delrow(document.forms[0].elements[i].value,true)}
}}
function enabling(checked) {
var disable=false;
if(checked==true)
{document.forms[1].dels.disabled=false;
document.forms[1].edit.disabled=false;}
else {
numel=document.forms[0].elements.length
for(i=2; i<numel; i=i+rowels) {
if(document.forms[0].elements[i].checked==true)
{disable=true}}
if(disable==false)
{document.forms[1].dels.disabled=true;
document.forms[1].edit.disabled=true;}
}}
function delrow(num,stat) {
numel=document.forms[0].elements.length
rows=document.forms[0].elements.length/rowels
elnum=3*num-3
if(document.forms[0].elements[elnum].value!=”” || document.forms[0].elements[elnum+1].value!=””) {
if(stat==false) {
if(confirm(‘There is data in the cell you wish to delete. Are you sure you want to delete it?’))
{dlt(num,stat)}}
else {
if(confirm(‘There is data in row ‘ +num+ ‘, the row you wish to delete. Are you sure you want to delete it?’))
{dlt(num,stat)}}}
else{dlt(num,stat)}}
function dlt(num,stat) {
rows=document.forms[0].elements.length/rowels
current=document.getElementById(‘tcell’).innerHTML
numel=document.forms[0].elements.length
pos=0
lpos=current.length
for(loop=1; loop<=num; loop++) {
pos=current.indexOf(“<TABLE>”,pos)
pos+=1}
for(loop=1; loop<=rows-num+1; loop++) {
lpos=current.lastIndexOf(“</TABLE>”,lpos)
lpos-=1}
newstr=current.substring(0,pos-1) + current.substring(lpos+9,current.length)
document.getElementById(‘tcell’).innerHTML=newstr
val-=1
for(a=1; a<rows; a++) {
b=a
if(document.forms[0].elements[b].value!=a)
{document.forms[0].elements[b].value=a}}
if(document.forms[0].elements.length==0)
{document.forms[1].del.disabled=true}
if(stat==true)
{delrows()}}
function addels() {
var newwin=window.open(”,’newwin’,’height=300,width=200′)
newwin.document.write(“<form><input type=’text’ name=’txt1′></td><td><input type=’text’ name=’txt2′>”)
newwin.document.write(“<input type=’button’ onClick=’window.opener.addrow(this.form.txt1.value,this.form.txt2.value);self.close()’ value=’add’></form>”)
}
function editrow(){
var editId=new Array(); var cnt=0;
numel=document.forms[0].elements.length
for(i=2; i<numel; i=i+rowels) {
if(document.forms[0].elements[i].checked==true)
{editId[cnt++]=i;}}
if(editId.length>0){
var win2=window.open(”,’win2′,’height=300,width=200′)
for(j=0;j<editId.length;j++){
r=(editId[j]+1)/3
val1=document.forms[0].elements[r*3-3].value
val2=document.forms[0].elements[r
win2.document.write(“Row “+r+”:”)
win2.document.write(“<form>”)
win2.document.write(“<input type=’text’ name=’txt1′ value='”+val1+”‘><br>”)
win2.document.write(“<input type=’text’ name=’txt2′ value='”+val2+”‘><br>”)
win2.document.write(“<input type=’button’ onClick=’window.opener.edit2(this.form.txt1.value,this.form.txt2.value,”+r+”);’ value=’Edit’></form>”)
}
win2.document.write(“<form><input type=’button’ onClick=’self.close();’ value=’Close Window’></form>”)
}}
function edit2(val1,val2,rownum){
document.forms[0].elements[rownum*3-3].value=val1;
document.forms[0].elements[rownum
}
</script>
<form><table border=”1″>
<TR><TD id=’tcell’>
<table><tr>
<td><input type=’text’></td>
<td><input type=’text’></td>
<td><input type=’checkbox’ value=’1′ onClick=”enabling(this.checked)”></td>
</tr></table>
</td></TR></table>
</form>
<form>
<input type=’button’ name=’add’ value=”Add Row” onClick=”addels()”>
<input type=’button’ name=’edit’ value=”Edit” onClick=”editrow()” disabled=’true’>
<input type=’button’ name=’del’ value=”Delete Last Row” onClick=”delrow(document.forms[0].elements.length/rowels,false)”>
<input type=’button’ name=’dels’ value=”Delete Rows” onClick=”delrows()” disabled=’true’>
</form>