Thread: adding new row using javascript...

Hi,

One of my html page i am using one table. After this table i have one button "Insert Row". In that table i have five column. First three column contains the textfield and the next two column contains the select box.

My Requirement is whenever i click the button "Insert Row", At the end of my table(that means last row) a new row will be added with the three textbox and two select box.

I am really confused about this requirement. If anybody have a idea then please share with me...I am expecting your valuable reply.

------------------------
suresh

Hi Friends,

I found the result for my problem...Here is the script for adding new rows.

......script starts here.......
function addRowToTable()
{
var tbl = document.getElementById('tblSample');//tblSample is the table id.
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(lastRow);


// left cell
var cellLeft = row.insertCell(0);
var check1 = document.createElement('input');
check1.type="text";
check1.name="text1";
check1.height=25;
cellLeft.appendChild(check1);

// right cell
var cellRight = row.insertCell(1);
var check2 = document.createElement('input');
check2.type="text";
check2.name="text2";
check2.height=25;
cellLeft.appendChild(check1);

// left cell
var cellLeft = row.insertCell(2);
var check3 = document.createElement('input');
check3.type="text";
check3.name="text2";
check3.height=25;
cellLeft.appendChild(check3);

// right cell
var cellRight = row.insertCell(3);
var e1 = document.createElement('select');
e1.options[0] = new Option('Select','value0');
e1.options[1] = new Option('Java','value1');
e1.options[2] = new Option('.NET','value2');
e1.options[3] = new Option('Database','value3');
e1.options[4] = new Option('SAP','value4');
e1.options[5] = new Option('Testing','value5');
e1.options[6] = new Option('Communication','value6');
e1.className="white1";
cellRight.className="white";
cellRight.appendChild(e1);

// select cell
var cellLeft = row.insertCell(4);
var sel = document.createElement('select');

sel.name = 'selRow' + iteration;
sel.options[0] = new Option('Select', 'value0');
sel.options[1] = new Option('JSP', 'value1');
sel.options[2] = new Option('EJB', 'value2');
sel.options[3] = new Option('Struts', 'value3');
sel.options[4] = new Option('Java Script', 'value4');
sel.options[5] = new Option('C# .NET', 'value5');
sel.options[6] = new Option('VB .NET', 'value6');
sel.options[7] = new Option('ASP .NET', 'value7');
sel.options[8] = new Option('SQL', 'value8');
sel.options[9] = new Option('Oracle', 'value9');
sel.options[10] = new Option('ABAP', 'value10');
sel.options[11] = new Option('Error Checking', 'value11');
sel.options[12] = new Option('Manual Testing', 'value12');
sel.options[13] = new Option('Automated Testing', 'value13');
sel.options[14] = new Option('Verbal Commn', 'value14');
sel.options[15] = new Option('Written Commn', 'value15');
sel.options[16] = new Option('Testing', 'value16');
sel.className="white1";
cellLeft .className="gridselect1";
cellLeft .appendChild(sel);

}
.......script ends here.........
.......style sheet starts here.........
.white1
{
font-family:verdana;
font-size:12px;
width:175px;
color:#000000;
}
.white
{
font-family:verdana;
font-size:12px;
width:175px;
color:#000000;
}
........style sheet ends here..........

-----------------------
suresh