adding row dynamically and sending all the row data to the server side

**hsriat** · Feb 27 '08, 10:11 AM

Originally posted by vicky2k4

Hello All,

I have to add row dynamically through js.
Sometimes some data also comes from database and placed in the row data.

If i add row , i should have database values and the data which i will add through clicking add button.

for example :
if 3 rows data came from database if I click add button , i should get new row in 4th row position and i should send all values(3 database rows value + values i added) to the server side.
i need to keep these values in session also.

Thanks,
vicky

You will send data to server by AJAX or directly by submitting the form?

Show me the code which you have till now. Then I can try my best.

**balurajeev** · Apr 2 '08, 03:23 PM

[HTML]<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitl ed Page</title>
<script type="text/javascript" language="javas cript">[/html]
[code=javascript]

var ar=new Array();
var ar2=new Array();
var len;
function LoadDdl()
{
debugger;
if(document.get ElementById('Se lect1')!=null)
{
len=document.ge tElementById('S elect1').option s.length;

for(i=0;i<len;i ++)
{

ar[i]=document.getEl ementById('Sele ct1').options[i].innerHTML;
ar2[i]=document.getEl ementById('Sele ct1').options[i].value;
}
}
}

function addRow()
{
var ni = document.getEle mentById('trCon tent');
var numi = document.getEle mentById('theVa lue');
var num = (document.getEl ementById('theV alue').value -1)+ 2;
numi.value = num;
//add a row to the rows collection and get a reference to the newly added row
var newRow = document.all("t blGrid").insert Row();

//add 7 cells (<td>) to the new row and set the innerHTML to contain text boxes

var oCell = newRow.insertCe ll();
oCell.innerHTML = "<input type='text' id="+"slno"+num +" name='t1' style='width: 72px'>";

oCell = newRow.insertCe ll();
//oCell.innerHTML = "<input type='text' name='t2' style='width: 72px'>";
//oCell.innerHTML = "<select id='ddl' name='t2' style='width: 72px'>";
var selecttg="<sele ct id="+"ddl"+num+ "' style='width:72 px'>";
var optiontg="";
for(i=0;i<len;i ++)
{

//var sel=document.ge tElementById('d dl');
var optiontg =optiontg+"<opt ion value="+ar2[i].toString()+">" +ar[i].toString()+"</option>";

}
var fullbotle=selec ttg+optiontg;
oCell.innerHTML =fullbotle+"</select>";
//oCell.innerHTML ="</select>";
oCell = newRow.insertCe ll();
oCell.innerHTML = "<input type='text' id="+"number"+n um+" name='t3' style='width: 72px'>" ;
oCell = newRow.insertCe ll();
oCell.innerHTML = "<input type='text' id="+"qty"+num+ " name='t4' style='width: 72px'>";

oCell = newRow.insertCe ll();
oCell.innerHTML = "<input type='text' id="+"rate"+num +" name='t5' style='width: 72px'>";

oCell = newRow.insertCe ll();
oCell.innerHTML = "<input type='text' id="+"discount" +num+" name='t6' style='width: 72px'>";
oCell = newRow.insertCe ll();
oCell.innerHTML = "<input type='text' id="+"Amount"+n um+" name='t7' style='width: 72px'>";
oCell = newRow.insertCe ll();
oCell.innerHTML = "<input type='button' value='Delete' onclick='remove Row(this);'/>";
}

//deletes the specified row from the table
function removeRow(src)
{
/* src refers to the input button that was clicked.
to get a reference to the containing <tr> element,
get the parent of the parent (in this case case <tr>)
*/
var oRow = src.parentEleme nt.parentElemen t;

//once the row reference is obtained, delete it passing in its rowIndex
document.all("t blGrid").delete Row(oRow.rowInd ex);
}[/code]
[html] </script>
</head>
<body onmouseover="Lo adDdl()">
<input type="hidden" value="0" id="theValue" />
<form id="form1" runat="server">
<div>
<table id="tblGrid" style="table-layout:fixed" runat="server">
<tr>
<td >
SLNo</td>
<td >
Item</td>
<td >
Number</td>
<td >
Quantity</td>
<td >
Rate</td>
<td >
Discount</td>
<td>
Amount</td>
</tr>
<tr id="trContent" >
<td >
<input id="Text1" type="text" runat="server" style="width: 84px" /></td>
<td >
<select id="Select1" runat="server" style="width: 102px"></select></td>
<td >
<input id="Text3" type="text" runat="server" style="width: 72px" /></td>
<td >
<input id="Text4" type="text" runat="server" style="width: 66px" /></td>
<td >
<input id="Text5" type="text" runat="server" style="width: 66px" /></td>
<td >
<input id="Text6" type="text" runat="server" style="width: 66px" /></td>
<td>
<input id="Text7" type="text" runat="server" style="width: 72px" /></td> <td ><input type="button" value="Delete" onclick="remove Row(this);" /></td>
</tr>

</table>
<hr/>
<input type="button" value="Add Row" onclick="addRow ();" />
<asp:Button ID="Button1" runat="server" OnClick="Button 1_Click" Text="Save" /></div>
</form>
</body>
</html>[/HTML]

**hsriat** · Apr 2 '08, 03:30 PM

Can you please do a little favor of including your code within [html] and [/html] tags?

**acoder** · Apr 3 '08, 06:43 AM

balurajeev, are you and vicky one and the same person?

If not, you should've explained what the problem with your code is (and posted using code tags).

adding row dynamically and sending all the row data to the server side

adding row dynamically and sending all the row data to the server side

Comment

Comment

Comment

Comment