Dynamic table with dropdown and textboxes

**acoder** · Mar 19 '08, 08:57 PM

Originally posted by Sriku

Dosth i am not able to delete any row can u help me please?

am new to this scripts.

Post your code. Is this in any way related to the original question?

**Sriku** · Mar 20 '08, 04:28 AM

my requirements is same as above(post ID 10, posted by "daitasri ") that's why i thought of pickup this code. but delete button is not working properly.

Thanks for reply
Srikanth

**acoder** · Mar 20 '08, 10:14 AM

There's no delete row code. Can I see your attempt at deleting a row.

To delete a row, use the deleteRow() method and pass the rowIndex of the row that you want to delete.

**RamananKalirajan** · Mar 20 '08, 11:34 AM

Originally posted by Sriku

my requirements is same as above(post ID 10, posted by "daitasri ") that's why i thought of pickup this code. but delete button is not working properly.

Thanks for reply
Srikanth

Hello Mr. Srikanth I think the following code will be useful for you. I had did some modification in the diatsri code, that matches your requirement. Keep in doing with your work. Any doubts means post me

[HTML]<html>
<head>
<script language="javas cript">
function createTable(id, ctr)
{
var tbody = document.getEle mentById(id).ge tElementsByTagN ame("TBODY")[0];
var i;
for(i=1;i<=ctr; i++)
{
var row1=document.c reateElement('T R');

var row1td1=documen t.createElement ('TD');
var row1td1_n=docum ent.createEleme nt('INPUT');
row1td1.appendC hild(row1td1_n) ;
row1td1_n.setAt tribute('TYPE', 'text');
// row1td1_n.setAt tribute('ID','u id'+i);
row1td1_n.setAt tribute('NAME', 'UID'+i);
row1td1_n.setAt tribute('ID','U ID'+i);

var row1td2=documen t.createElement ('TD');
var row1td2_n=docum ent.createEleme nt('INPUT');
row1td2.appendC hild(row1td2_n) ;
row1td2_n.setAt tribute('TYPE', 'text');
row1td2_n.setAt tribute('NAME', 'CID'+i);
row1td2_n.setAt tribute('ID','C ID'+i);

//row1td2.appendC hild(document.c reateElement('I NPUT' ));
//row1td2.setAttr ibute('TYPE','t ext','NAME','CN '+i);

var row1td3=documen t.createElement ('TD');
var row1td3sel=docu ment.createElem ent('select' );
row1td3sel.setA ttribute('id',' RA'+i,'NAME','r eques t_access');
row1td3.appendC hild(row1td3sel );

var subrow3_y=docum ent.createEleme nt('option');
subrow3_y.inner HTML='Y';
subrow3_y.value =1;

var subrow3_n=docum ent.createEleme nt('option');
subrow3_n.inner HTML='N';
subrow3_n.value =2;
row1td3sel.appe ndChild(subrow3 _y);
row1td3sel.appe ndChild(subrow3 _n);

var row1td4=documen t.createElement ('TD');
var row1td4sel=docu ment.createElem ent('select' );
row1td4sel.setA ttribute('id',' PA'+i,'NAME','p refer ence_access');
row1td4.appendC hild(row1td4sel );

var subrow4_y=docum ent.createEleme nt('option');
subrow4_y.inner HTML='Y';
subrow4_y.value =1;

var subrow4_n=docum ent.createEleme nt('option');
subrow4_n.inner HTML='N';
subrow4_n.value =2;

row1td4sel.appe ndChild(subrow4 _y);
row1td4sel.appe ndChild(subrow4 _n);

var row1td5=documen t.createElement ('TD');
var row1td5sel=docu ment.createElem ent('select' );
row1td5sel.setA ttribute('id',' AA'+i,'NAME','a ctivi ty_access');
row1td5.appendC hild(row1td5sel );

var subrow5_y=docum ent.createEleme nt('option');
subrow5_y.inner HTML='Y';
subrow5_y.value =1;

var subrow5_n=docum ent.createEleme nt('option');
subrow5_n.inner HTML='N';
subrow5_n.value =2;

row1td5sel.appe ndChild(subrow5 _y);
row1td5sel.appe ndChild(subrow5 _n);

var row1td6=documen t.createElement ('TD');
var row1td6sel=docu ment.createElem ent('select' );
row1td6sel.setA ttribute('id',' UR'+i,'NAME','u ser_r ights');
row1td6.appendC hild(row1td6sel );

var subrow6_y=docum ent.createEleme nt('option');
subrow6_y.inner HTML='Y';
subrow6_y.value =1;

var subrow6_n=docum ent.createEleme nt('option');
subrow6_n.inner HTML='N';
subrow6_n.value =2;

row1td6sel.appe ndChild(subrow6 _y);
row1td6sel.appe ndChild(subrow6 _n);

var row1td7=documen t.createElement ('TD');
var row1td7btn=docu ment.createElem ent('input');
row1td7btn.setA ttribute('type' ,'button','name ','De l'+i);
row1td7btn.valu e='Delete';
row1td7btn.id=' Del'+i;
row1td7btn.oncl ick="removeThis (this)";
row1td7.appendC hild(row1td7btn );
row1td7.innerHT ML= row1td7.innerHT ML;

row1.appendChil d(row1td1);
row1.appendChil d(row1td2);
row1.appendChil d(row1td3);
row1.appendChil d(row1td4);
row1.appendChil d(row1td5);
row1.appendChil d(row1td6);
row1.appendChil d(row1td7);

tbody.appendChi ld(row1);
}

}

function addRowToTable()
{
var tbl = document.getEle mentById('t1hea d');
var lastRow = tbl.rows.length ;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(l astRow);

// left cell
var cell1 = row.insertCell( 0);
var textNode = document.create Element('input' );
textNode.setAtt ribute('type',' text','name','t ext'+ iteration,'id', 'txt'+iteration );
cell1.appendChi ld(textNode);

// right cell
var cell2 = row.insertCell( 1);
var el = document.create Element('input' );
el.type = 'text';
el.name = 'text' + (iteration+1);
el.id = 'txt' + (iteration+1);
cell2.appendChi ld(el);

// select cell
var cell3 = row.insertCell( 2);
var sel3 = document.create Element('select ');
sel3.name = 'request_access ';
sel3.id='RA'+it eration;
sel3.options[0] = new Option('Y', '0');
sel3.options[1] = new Option('N', '1');
cell3.appendChi ld(sel3);

// select cell
var cell4 = row.insertCell( 3);
var sel4 = document.create Element('select ');
sel4.name = 'preferences_ac cess';
sel4.id='PA'+it eration;
sel4.options[0] = new Option('Y', '0');
sel4.options[1] = new Option('N', '1');
cell4.appendChi ld(sel4);

// select cell

var cell5 = row.insertCell( 4);
var sel5 = document.create Element('select ');
sel5.name = 'activity_acces s';
sel5.id='AA'+it eration;
sel5.options[0] = new Option('Y', '0');
sel5.options[1] = new Option('N', '1');
cell5.appendChi ld(sel5);

// select cell

var cell6 = row.insertCell( 5);
var sel6 = document.create Element('select ');
sel6.name = 'user_rights';
sel6.id='UR'+it eration;
sel6.options[0] = new Option('Y', '0');
sel6.options[1] = new Option('N', '1');
cell6.appendChi ld(sel6);

//button cell

var cell7 = row.insertCell( 6);
var el = document.create Element('input' );
el.type = 'button';
el.name = 'Del' + (iteration);
el.id = 'Del' + (iteration);
el.value='Delet e';
el.onclick="rem oveThis(this)";
cell7.appendChi ld(el);
cell7.innerHTML =cell7.innerHTM L;

}

function removeThis(row)
{
var rIndex = row.parentNode. parentNode.rowI ndex;
document.getEle mentById('t1hea d').deleteRow(r Index);
}

</script>
<body bgcolor="#fffcd 0" onLoad=createTa ble('t1head',5) >
<form id=frm1 name=form1>
<table class="layout" border="4" align="center" width="100%" id=t1head>
<tr>
<td align="center"> <b> USER ID </b></td>
<td align="center"> <b> CLIENT </b></td>
<td align="center"> <b> REQUEST_ACCESS </b></td>
<td align="center"> <b> PREFERENCES_ACC ESS</b></td>
<td align="center"> <b> ACTIVITY_ACCESS </b></td>
<td align="center"> <b> USER_RIGHTS </b></td>

</tr>

</table>
<table>
<tr><td></td></tr><tr><td></td></tr>
<tr><td></td></tr></tr><tr><td></td></tr>
</tr><tr><td></td></tr><tr><td></td></tr>
<tr><td></td></tr></tr><tr><td></td></tr>
</table>
<table class="layout" border="0" align="center" id=tabBtn>
<tr>
<td align="center" colspan="2">
<input type="button" value="ADD" name="add" onClick=addRowT oTable()>
</td>

<td align="center" colspan="2">
<input type="button" value="SAVE" name="save" onClick=save1() >
</td>

<td align="center" colspan="2">
<input type="button" value="CANCEL" name="cancel" onClick="histor y.go(0)">
</td>
</tr>
</table>
</form>
</body>
</html>[/HTML]

Regards
Ramanan Kalirajan

**Sriku** · Mar 23 '08, 03:07 PM

Thanks Ramanan Kalirajan

Regards
Srikanth

**RamananKalirajan** · Mar 24 '08, 04:58 AM

Originally posted by Sriku

Thanks Ramanan Kalirajan

Regards
Srikanth

You are always Welcome

Regards
Ramanan Kalirajan

Dynamic table with dropdown and textboxes

Comment

Comment

Comment

Comment

Comment

Comment