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.

HTML Code:

<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>

Code:

<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:

Code:

<!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.

Code:

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'.

Thread: Big trouble with dinamic form

Thread Tools

Search Thread

Big trouble with dinamic form

Bookmarks

Bookmarks

Posting Permissions