...

View Full Version : create and remove elements on button click



sumanreddy
02-03-2005, 05:51 AM
hai,

i want to do something like this,

when i click a "CREATE" button a row should be created which contains 5 columns.
In
first column check box,
second column textbox,
third column textarea,
fourth column radio button,
fifth column a button with "DELETE" as value, which on click should delete the created row.

the number of times i click "create" button that many rows has to be created.their names also should be generated dynamically.

pls send solution as soon as possible.
waiting for ur response.

Kor
02-03-2005, 01:13 PM
use DOM methods:

createElement()
createTextNode()
appendChild()
removeChild()

maybe
cloneNode()

sumanreddy
02-04-2005, 04:33 AM
hai

i have used reateElement()...

but i want all the elements to be in a table with 5 columns.

pls send the code

sumanreddy
02-04-2005, 08:16 AM
hai

the following code is working in Internet Explorer, but not working in Opera. Pls Check the code and give the solution, so that it should work in Opera Browser.

<html>
<head>
<script type="text/javascript">

var i=0;

function insRow()
{
var trow=document.getElementById('myTable').insertRow()

var tdata1=trow.insertCell(0)
var tdata2=trow.insertCell(1)
var tdata3=trow.insertCell(2)
var tdata4=trow.insertCell(3)
var tdata5=trow.insertCell(4)

tdata1.innerHTML="<input type='text' id='txt' >"
tdata2.innerHTML="<input type='CHECKBOX' id='chk'>"
tdata3.innerHTML="<textarea id='tarea'></textarea>"
tdata4.innerHTML="<select id='lov'></select>"
tdata5.innerHTML="<input type='button' id='btn' onclick=delrow(this)>"

document.forms[0].elements[i].id=document.forms[0].elements[i].id+i;
document.forms[0].elements[i+1].id=document.forms[0].elements[i+1].id+i;
document.forms[0].elements[i+2].id=document.forms[0].elements[i+2].id+i;
document.forms[0].elements[i+3].id=document.forms[0].elements[i+3].id+i;
document.forms[0].elements[i+4].id=document.forms[0].elements[i+4].id+i;


tname="txt"+i;
chkname="chk"+i;
tareaname="tarea"+i;
lovname="lov"+i;
btnname="btn"+i;

tid="txt"+i;
chkid="chk"+i;
tareaid="tarea"+i;
lovid="lov"+i;
btnid="btn"+i;


var txtid = document.getElementById(tid);
txtid.setAttribute("name",tname);

var chkid = document.getElementById(chkid);
chkid.setAttribute("name",chkname);

var tareaid = document.getElementById(tareaid);
tareaid.setAttribute("name",tareaname);

var lovid = document.getElementById(lovid);
lovid.setAttribute("name",lovname);


var btnid = document.getElementById(btnid);
btnid.setAttribute("name",btnname);
btnid.setAttribute("value","delete row");



i=i+5;
}
function delrow(curr_row)
{

document.getElementById('myTable').deleteRow(curr_row.parentNode.parentNode.rowIndex);
}

</script>
</head>

<body>
<form>

<table id="myTable" border="1">
</table>

<input type="button" onclick="insRow()" value="Insert row">

</form>

</body>
</html>

Kor
02-04-2005, 08:26 AM
insertRow is a DHTML rather than a DOM Level 2 method.

Kor
02-04-2005, 08:31 AM
Look, I have not enough spare time this very moment, but I'll give you a similar code whioh I have build for a friend. It is not exactely what you want, but you may see the methods and maybe you may build one of your own. If not, maybe later, if time, I might try one for you.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
//genuine code by Corneliu Lucian 'KOR' Rusu corneliulucian@apropo.ro
function addR(){
var oTab = document.getElementById('tab');// the table element
var oRows = oTab.getElementsByTagName('tr');// the rows collection
var root = oRows[1].parentNode;//the root for the future append
var newRow = oRows[1].cloneNode(true);//clone the second row with the entire content
var oFields = oTab.getElementsByTagName('input')//the text field collection
for (var i=0;i<oFields.length;i++){
if(oFields[i].getAttribute('value').length<1){
alert('Please, fill in all the text fields!');//alerts
oFields[i].focus();//focuses the empty field
return false//stops if one of the text fields is not filled
}
}
var newFields = newRow.getElementsByTagName('input');//the fields in the cloned row collection
for(var i=0;i<newFields.length;i++){
newFields[i].setAttribute('name',newFields[i].getAttribute('name')+'_'+oRows.length);//sets the new incremented names
newFields[i].setAttribute('value','');//clears the values
}
var newSel = newRow.getElementsByTagName('select');//the select elements in the cloned row collection
for(var i=0;i<newSel.length;i++){
newSel[i].setAttribute('name',newSel[i].getAttribute('name')+'_'+oRows.length);//sets the new incremented selects' names
newSel[i].setAttribute('value','');//clears the selects' values
}
root.insertBefore(newRow,document.getElementById('tot'));//appends the new row
}
function addT(n,f){
var re = /^[0-9]*$/;
if (!re.test(f.value)) {//validate for numbers input
alert("Value must be all numeric characters, non numeric's removed from field!");
f.value = f.value.replace(/[^0-9]/g,"");
}
var vTot='';
var oTab = document.getElementById('tab');// the table element
var oRows = oTab.getElementsByTagName('tr');// the rows collection
var cIndex= f.parentNode.cellIndex;//the index of the cell in row
for(var i=1;i<oRows.length-1;i++){
vTot = vTot*1+oRows[i].getElementsByTagName('input')[cIndex].getAttribute('value')*1;//calculates the total
}
document.forms[0].elements[n].value = vTot//assigns the total
}
</script>
</head>
<body>
<form>
<table id="tab" width="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th>A/C Cd.</th>
<th>Description</th>
<th>S.L Code</th>
<th>Description</th>
<th>Debit</th>
<th>Credit</th>
</tr>
<tr>
<td><input type="text" name="Ac.code" size="5" maxlength="5"></td>
<td> <input type="text" name="description" size="30"></td>
<td><input type="text" name="slcode" size="10" ></td>
<td> <input type="text" name="description1" size="30"></td>
<td><input type="text" name="debit" size="12" onkeyup="addT('tdebit',this)"></td>
<td> <input type="text" name="credit" size="12" onkeyup="addT('tcredit',this)"></td>
<td><select name="type">
<option value="" selected></option>
<option value="C">C</option>
<option value="O">O</option>
</select> </td>
</tr>
<tr id="tot">
<td><input type="text" name="tdebit" size="12" readonly></td>
<td><input type="text" name="tcredit" size="12" readonly></td>
</tr>
</tbody>
</table>
<br>
<br>
<input type="button" value="ADD" onclick="return addR()">
<br>
<br>
<input type="button" name="Submit" value="Submit" onclick="this.form.submit();this.form.reset()">
</form>
</body>
</html>

sumanreddy
02-04-2005, 10:09 AM
hai,

thanks for ur solution..

i want one more solution
when i click another button it should remove the row.

Kor
02-04-2005, 05:33 PM
Try insert a button in a cell in the row and

<td><input name="but" type="button" value="remove" onclick="this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)"></td>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum