JS code to add rows dynamically in to the table

**acoder** · Feb 22 '08, 09:09 AM

So what happens? Does it work? Are there any errors? If so, what is it and on what line?

**hsriat** · Feb 22 '08, 10:36 AM

@bharathmngl
And also please tell me how to add textarea and radiobutton in to the dynamically created rows..

Either create them by DOM method or just provide textarea html to the innerHTML the fields.

Rest I'm too reluctant to read the whole code.

**bharathmngl** · Feb 26 '08, 06:53 AM

Originally posted by acoder

So what happens? Does it work? Are there any errors? If so, what is it and on what line?

hey i got this code from other source.. so please post me working code if you have, i need it urgently.......

**acoder** · Feb 26 '08, 10:39 AM

How about this ?

**bharathmngl** · Feb 27 '08, 06:34 AM

Originally posted by acoder

How about this ?

hey i've tried this code , buut not successfull..
give me some other, please.. its urgent..

**acoder** · Feb 27 '08, 07:40 AM

What doesn't work? Have you tried the example?

**bharathmngl** · Feb 27 '08, 07:57 AM

Originally posted by acoder

What doesn't work? Have you tried the example?

hey friend,

the example which u had reffered is working fine...
but when i modify that example to suit my need, its not working.....

**acoder** · Feb 27 '08, 08:51 AM

So post your modified code and point out where the problem is (e.g. errors).

**vee10** · Feb 27 '08, 10:05 AM

Hi ,

This may solve ur problem

Code:

var table = document.getElementById(id);
var checkboxes = document.getElementById(id).getElementsByTagName("INPUT");
j=0;
for(i=0;i<parseInt(checkboxes.length);)
{
flag=0;
if(checkboxes[i].type == "checkbox")
{
if(checkboxes[i].checked == true)
{
table.deleteRow(j+1);
i=0;
j=0;
flag=1;
}
if(flag == 0)
j++;
} 
if(flag == 0)
i++;
}

Originally posted by bharathmngl

hey friend,

the example which u had reffered is working fine...
but when i modify that example to suit my need, its not working.....

**bharathmngl** · Feb 28 '08, 08:03 AM

Originally posted by acoder

So post your modified code and point out where the problem is (e.g. errors).

Hai friend,
I have attached my code below. Here i am successfull in adding rows. Now i wanna to delete the rows that are only checked.... so please help me to solve my problem....its very urgent...

[HTML] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitl ed Page</title>

<style type="text/css">

</style>

<script type="text/javascript">
[/HTML]
[CODE=javascript]var INPUT_NAME_PREF IX = 'inputName'; // this is being set via script
var RADIO_NAME = 'totallyrad'; // this is being set via script
var TABLE_NAME = 'tblSample'; // this should be named in the HTML
var ROW_BASE = 1; // first number (for display)
var hasLoaded = false;

window.onload=f illInRows;

function fillInRows()
{
hasLoaded = true;
addRowToTable() ;

}

// CONFIG:
// myRowObject is an object for storing information about the table rows
function myRowObject(one , two, three, four,five)
{
this.one = one; // text object
this.two = two; // input text object
this.three = three; // input checkbox object
this.four = four; // input radio object
this.five = five;
}

/*
* insertRowToTabl e
* Insert and reorder
*/
function addRowToTable()
{
var tbl = document.getEle mentById(TABLE_ NAME);
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);

// serial numbering
var cell0 = row.insertCell( 0);
var textNode = document.create TextNode(iterat ion);
cell0.appendChi ld(textNode);

//check box
var cell1 = row.insertCell( 1);
var chkbox = document.create Element('input' );
chkbox.type='ch eckbox';
cell1.align="ce nter";
cell1.height="3 9px";
cell1.appendChi ld( chkbox);

// text box1
var cell2 = row.insertCell( 2);
var tl = document.create Element('input' );
tl.type = 'text';
tl.name = 'txtRow' + iteration;
tl.id = 'txtRow' + iteration;
tl.size = 5;

// el.onkeypress = keyPressTest;
cell2.appendChi ld(tl);

//textbox 2
var cell3 = row.insertCell( 3);
var t2 = document.create Element('input' );
t2.type = 'text';
t2.name = 'txtRow1' + iteration;
t2.id = 'txtRow1' + iteration;
t2.size = 5;
cell3.appendChi ld(t2);

// el.onkeypress = keyPressTest;

var cellrad = row.insertCell( 4);
var rad = document.create Element('input' );
rad.type = 'radio';
rad.name ='r[i]';
//rad.value='ngfh fghgf';
var lab = document.create TextNode("HAI") ;
var lab1 = document.create Element('label' );
lab1.appendChil d(lab);
cellrad.appendC hild(rad);
cellrad.appendC hild(lab1);

row.myRow = new myRowObject(tex tNode, chkbox, tl,t2, rad);

// CONFIG: this entire function is affected by myRowObject settings
// If there isn't a checkbox in your row, then this function can't be used.
function deleteChecked()
{
if (hasLoaded) {
var checkedObjArray = new Array();
var cCount = 0;

var tbl = document.getEle mentById(TABLE_ NAME);
for (var i=0; i<tbl.tBodies[0].rows.length; i++) {
if (tbl.tBodies[0].rows[i].myRow && tbl.tBodies[0].rows[i].myRow.one.getA ttribute('type' ) == 'checkbox' && tbl.tBodies[0].rows[i].myRow.one.chec ked) {
checkedObjArray[cCount] = tbl.tBodies[0].rows[i];
cCount++;
}
}
if (checkedObjArra y.length > 0) {
var rIndex = checkedObjArray[0].sectionRowInde x;
deleteRows(chec kedObjArray);
reorderRows(tbl , rIndex);
}
}
}

// If there isn't an element with an onclick event in your row, then this function can't be used.
function deleteCurrentRo w(obj)
{
if (hasLoaded) {
var delRow = obj.parentNode. parentNode;
var tbl = delRow.parentNo de.parentNode;
var rIndex = delRow.sectionR owIndex;
var rowArray = new Array(delRow);
deleteRows(rowA rray);
//reorderRows(tbl , rIndex);
}
}

function reorderRows(tbl , startingIndex)
{
if (hasLoaded) {
if (tbl.tBodies[0].rows[startingIndex]) {
var count = startingIndex + ROW_BASE;
for (var i=startingIndex ; i<tbl.tBodies[0].rows.length; i++) {

// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows[i].myRow.one.data = count; // text

// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows[i].myRow.two.name = INPUT_NAME_PREF IX + count; // input text

// CONFIG: next line is affected by myRowObject settings
var tempVal = tbl.tBodies[0].rows[i].myRow.two.valu e.split(' '); // for debug purposes
tbl.tBodies[0].rows[i].myRow.two.valu e = count + ' was' + tempVal[0]; // for debug purposes

// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows[i].myRow.four.val ue = count; // input radio

// CONFIG: requires class named classy0 and classy1
tbl.tBodies[0].rows[i].className = 'classy' + (count % 2);

count++;
}
}
}
}

function deleteRows(rowO bjArray)
{
if (hasLoaded) {
for (var i=0; i<rowObjArray.l ength; i++) {
var rIndex = rowObjArray[i].sectionRowInde x;
rowObjArray[i].parentNode.del eteRow(rIndex);
}
}
}

}
[/CODE]
[HTML]</script>

</head>
<body>

<form action="file:///C|/Documents%20and %20Settings/Riyaz/Desktop/prac/tableaddrow_nw. html" method="get">

<p>
<input type="button" value="Add" onclick="addRow ToTable();" />
<input type="button" value="Insert [I]" onclick="insert RowToTable();" />

<input type="button" value="Delete [D]" onclick="delete Checked();" />
<input type="button" value="Submit" onclick="openIn NewWindow(this. form);" />
</p>
<table border="0" cellspacing="0" id="tblSample" style="width: 454px; height: 53px">
<thead>
<tr>
<th colspan="5">Sam ple table</th>
</tr>

<tr>
<th>#</th>
<th>Input Text</th>
<th>Delete</th>
<th>D</th>
<th>I</th>

<th></th>

</tr>
</thead>
<tbody></tbody>
</table>
</form>

</body>
</html>[/HTML]

**acoder** · Feb 28 '08, 11:36 AM

Either name your checkboxes so you can refer to them or loop over all the checkboxes and delete the rows with checked checkboxes.

JS code to add rows dynamically in to the table

JS code to add rows dynamically in to the table

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment