Big trouble with dinamic form [Archive]

View Full Version : Big trouble with dinamic form

rw1000

02-01-2007, 07:44 PM

Hello!
I try to build the dinamic form with JavaScript. On click event I need to add or remove one row from table. But Firefox do nothing, and IE is throw unknown exception :(
Please help me who can.

<div id="tbody">
<table class="odd" align="center" border="0" cellspacing="1">
<thead><tr><td>№</td><td>Value</td><td></td></tr></thead>
<tbody>
<tr nomer="111">
<td class="odd">111</td>
<td class="odd"><input size="30" name="value[111]" value="Author1" type="text"></td>
<td class="odd"><a href="#" onclick="return rmline(111);">Delete</a></td></tr>
<tr nomer="112">
<td>112</td>
<td><input size="30" name="value[112]" value="Author2" type="text"></td>
<td><a href="#" onclick="return rmline(112);">Delete</a></td></tr>
</tbody>
<tr><td colspan="3"><a href="#" onclick="return addline();">+ add row</a>
<input name="count" id="count" value="4" type="hidden"></td>
</tr>
</table>
</div>

<script language="JavaScript" type="Text/Javascript">

function addline(){
c=++document.getElementById('count').value;
// extract html of last row
s=document.getElementById('tbody').innerHTML;
s=s.replace(/[\r\n]/g,'');
re=/(.*)(<tr nomer=.*>)(<\/tbody>)/gi;
s1=s.replace(re,'$2');
// changing all numbers to new row number
s2=s1.replace(/\[\d+\]/gi,'['+c+']');
s2=s2.replace(/(rmline$)(\d+$)/gi,'$1'+c+')');
s=s.replace(re,'$1$2'+s2+'$3');
// updating html of table
document.getElementById('tbody').innerHTML=s;
return false;
}
function rmline(q){
s=document.getElementById('tbody').innerHTML;
s=s.replace(/[\r\n]/g,'');
//replace all html of needed row with space
re=new RegExp('<tr nomer="?\\['+q+'.*?<\\/tr>','gi');
s=s.replace(re,'');
document.getElementById('tbody').innerHTML=s;
return false;
}
</script>

jscheuer1

02-02-2007, 06:12 AM

I'm not really sure what exactly you are going for but, this works pretty well:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.odd {
background-color:#dddddd;
}
</style>
<script type="text/javascript">
function addline(el){
var el=el.parentNode
while (el=el.parentNode)
if(el.tagName&&el.tagName.toLowerCase()=='table')
break;
var newRow=el.rows[el.rows.length-2].cloneNode(true);
el.rows[el.rows.length-1].parentNode.insertBefore(newRow,el.rows[el.rows.length-1]);
newRow.cells[0].innerHTML=newRow.cells[0].innerHTML*1+1;
newRow.cells[1].getElementsByTagName('input')[0].name='value['+newRow.cells[0].innerHTML+']';
newRow.cells[1].getElementsByTagName('input')[0].setAttribute('value', 'Author'+[newRow.cells[1].getElementsByTagName('input')[0].value.replace(/Author/,'')*1+1], 0);
oddClass(el);
return false;
}
function rmline(el){
var el=el.parentNode;
while (el=el.parentNode)
if(el.tagName&&el.tagName.toLowerCase()=='tr')
break;
var tel=el;
while (tel=tel.parentNode)
if(tel.tagName&&tel.tagName.toLowerCase()=='table')
break;
if(tel.rows.length==3)
return false;
el.parentNode.removeChild(el);
oddClass(tel);
return false;
}
function oddClass(el){
var i=0;
for (var i_tem = 0; i_tem < el.rows.length-1; i_tem++)
if(i_tem%2==1)
for (i = 0; i < el.rows[i_tem].cells.length; i++)
el.rows[i_tem].cells[i].className='odd';
else
for (i = 0; i < el.rows[i_tem].cells.length; i++)
el.rows[i_tem].cells[i].className='';
}
</script>
</head>
<body>
<div id="tbody">
<table align="center" border="0" cellspacing="1">
<thead><tr><td>?</td><td>Value</td><td></td></tr></thead>
<tbody>
<tr>
<td class="odd">111</td>
<td class="odd"><input size="30" name="value[111]" value="Author1" type="text"></td>
<td class="odd"><a href="#" onclick="return rmline(this);">Delete</a></td></tr>
<tr>
<td>112</td>
<td><input size="30" name="value[112]" value="Author2" type="text"></td>
<td><a href="#" onclick="return rmline(this);">Delete</a></td></tr>
<tr><td colspan="3"><a href="#" onclick="return addline(this);">+ add row</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

rw1000

02-03-2007, 03:45 PM

jscheuer1 Thank you very much!
I'll try to use your solution.
But who knows why IE don't want replace innerHTML? All other browsers work fine.

newrow='<tr nomer="'+count+'"><td '+cl+'>'+newid+'</td><td '+cl+'>'
+"<input size='30' type='text' name='val["+newid+"]' value='' /></td></tr>";
// extract html of last row
s=document.getElementById('tablebody').innerHTML;
// updating html of table
document.getElementById('tablebody').innerHTML=s+newrow;

Last line throw exception 'Unknown runtime error'?
P.S. All objects are exist, I repeat FF and Opera works fine.

jscheuer1

02-03-2007, 04:03 PM

I didn't even bother testing your code in other browsers because I have it on good authority from those even more knowledgeable than myself that using innerHTML with forms or with form elements is a recipe for disaster. The problem being (if I remember correctly) that values and sometimes other attributes can get lost or 'wiped out'.