Creating a new element in the DOM + Prototype +Ruby on Rails

<%=javascript_include_tag :defaults%>
<title>Creating a new element in the DOM</title>

<table width=”100%” id=”tblmain”>
<tr id=’main_1′>
<td>
<table width=”100%”>
<tr>
<td width=’22%’><%=text_field ‘dharmdip’ , ‘rathod’ , :size=>25%></td>
<td width=’22%’><%=text_field ‘dharmdip’ , ‘rathod’ , :size=>25%></td>
<td width=’22%’><%=text_field ‘dharmdip’ , ‘rathod’ , :size=>25%></td>
<td width=’22%’><%=text_field ‘dharmdip’ , ‘rathod’ , :size=>25%></td>
<td width=’12%’><%=link_to_function (‘Add’,(“clickhere()”))%></td>
</tr>
</table>
</td>
</tr>
</table>

<script>
function clickhere()
{
var len = $(‘tblmain’).rows.length
new Insertion.After(‘main_’+len, ‘<tr id=”main_’+(len+1)+'”><td><table width=”100%”><tr><td width=”22%”><%=text_field ‘dharmdip’ , ‘rathod’ , :size=>25%></td><td width=”22%”><%=text_field ‘dharmdip’ , ‘rathod’ , :size=>25%></td><td width=”22%”><%=text_field ‘dharmdip’ , ‘rathod’ , :size=>25%></td><td width=”22%”><%=text_field ‘dharmdip’ , ‘rathod’ , :size=>25%></td><td width=”12%”><a href=”#” id=”lnk_’+(len)+'” title=”‘+(len)+'” onclick=”clickdelete(this.title)”>Remove</a></td></tr></table></td>’)
}

function clickdelete(val)
{
$(‘tblmain’).deleteRow(val);
updateAllRow(val);
//alert($(‘tblmain’).innerHTML);
}

function updateAllRow(val)
{
var no = $(‘tblmain’).rows.length;
var obj_Row = Object();

val1 = parseInt(val) + 1;
for(i=val1;i<=no;i++)
{
//alert(val);
obj_Row = $(‘main_’+i);
obj_lnk = $(‘lnk_’+i);
obj_lnk.id = ‘lnk_’+val;
obj_lnk.title = val;
val++;
}
}
</script>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s