Dynamic table with dropdown and textboxes

RamananKalirajan · Mar 24 '08, 04:58 AM

Originally posted by Sriku

Thanks Ramanan Kalirajan

Regards
Srikanth

You are always Welcome

Regards
Ramanan Kalirajan

Sriku · Mar 23 '08, 03:07 PM

Thanks Ramanan Kalirajan

Regards
Srikanth

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

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.

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 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 19 '08, 12:34 PM

Originally posted by daitasri

Hi
Thanks for your help.I tried that but it shows as 'undefined'. I m sending u the whole code which i am using.Please tell me wat is wrong in that or how can i modify to achieve my requirement.

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

am new to this scripts.

daitasri · Feb 20 '08, 03:57 AM

Originally posted by vee10

Hi ,

this may help ur problem

Code:

var tbl = document.getElementById('t1head');
alert(tbl.rows.length);
for(i=0;i<tbl.rows.length;i++)
{
for(j=0;j<tbl.rows[i].cells.length;j++)
alert(tbl.rows[i].cells[j].childNodes[0].value);
}

Thanks a lot. This is able to get all the values of both textboxes and dropdowns. And now i am able to store all the values .

daitasri · Feb 20 '08, 03:55 AM

Originally posted by gits

put that to your script-section:

[CODE=javascript]var data = [];

function save1() {
var table = document.getEle mentById('t1hea d');
var rows = table.getElemen tsByTagName('tr ');

for (var i = 0, r; r = rows[i]; i++) {
data[i] = get_row_values( r);
}
}

function get_row_values( row) {
var record = {};
var fields = row.getElements ByTagName('inpu t');

for (var i = 0, node; node = fields[i]; i++) {
record[node.name] = node.value;
}

return record;
}
[/CODE]
please fix the error in your onload where the js-statement has to be enclosed in quotes. the above code stores all row-data in an array called data ...

kind regards

PS: you have to adapt it for the select-nodes :)

Thank You very much .Its working fine. I am able to store all the values. :)

vee10 · Feb 19 '08, 01:21 PM

Hi ,

this may help ur problem

Code:

var tbl = document.getElementById('t1head');
alert(tbl.rows.length);
for(i=0;i<tbl.rows.length;i++)
{
for(j=0;j<tbl.rows[i].cells.length;j++)
alert(tbl.rows[i].cells[j].childNodes[0].value);
}

Originally posted by daitasri

Hi
Thanks for your help.I tried that but it shows as 'undefined'. I m sending u the whole code which i am using.Please tell me wat is wrong in that or how can i modify to achieve my requirement.

gits · Feb 19 '08, 01:10 PM

put that to your script-section:

[CODE=javascript]var data = [];

function save1() {
var table = document.getEle mentById('t1hea d');
var rows = table.getElemen tsByTagName('tr ');

for (var i = 0, r; r = rows[i]; i++) {
data[i] = get_row_values( r);
}
}

function get_row_values( row) {
var record = {};
var fields = row.getElements ByTagName('inpu t');

for (var i = 0, node; node = fields[i]; i++) {
record[node.name] = node.value;
}

return record;
}
[/CODE]
please fix the error in your onload where the js-statement has to be enclosed in quotes. the above code stores all row-data in an array called data ...

kind regards

PS: you have to adapt it for the select-nodes :)

daitasri · Feb 19 '08, 12:22 PM

Hi
Thanks for your help.I tried that but it shows as 'undefined'. I m sending u the whole code which i am using.Please tell me wat is wrong in that or how can i modify to achieve my requirement.

[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 equest_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 reference_acces s');
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 ctivity_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_rights');
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 ','Del'+i);
row1td7btn.valu e='Delete';
row1td7btn.id=' Del'+i;
row1td7btn.oncl ick=function remove(){ removeRowFromTa ble(row1td7btn. id);};
row1td7.appendC hild(row1td7btn );

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'+iter ation);
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=func tion remove(){ removeRowFromTa ble(el.id);};
cell7.appendChi ld(el);

}

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

gits · Feb 19 '08, 11:53 AM

hi ...

assuming you have the following row:

[HTML]<table>
<tr>
<td><input type="text" value="test"/></td>
<td><input type="text" value="test1"/></td>
<td><input type="text" value="test2"/></td>
</tr>
</table>
[/HTML]
you may use something like the following simple function to retrieve the values of all the textboxes of that row:

[CODE=javascript]function get_row_values( row) {
var record = {};
var fields = row.getElements ByTagName('inpu t');

for (var i = 0, node; node = fields[i]; i++) {
record['field' + i] = node.value;
}

return record;
}

var row = document.getEle mentsByTagName( 'tr')[0];
var rec = get_row_values( row);

alert(rec.field 0 + ' - ' + rec.field1 + ' - ' + rec.field2);
[/CODE]
that retrieves the values of all inputnodes found in a <tr>-element and stores it in an javascript object called 'record' ...

kind regards

daitasri · Feb 19 '08, 11:40 AM

I tried using textboxname.val ue also but it shows error. I named the textboxes as "text"+i where 'i' is getting incremented in a loop. I want to access the data entered in that textbox, using a javascript function and i want to store those values in some variables but not able to do.Request you to help on this.

Thanks

daitasri · Feb 19 '08, 11:35 AM

Can u please send some examples of how to access the textboxes and data entered in textbox? I m not using AJAX. I need to do in javascript only. Please help me on this.

Dynamic table with dropdown and textboxes

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment:

Leave a comment: