PDA

View Full Version : How to Add BR in dynamically created rows



pskumar
12-17-2005, 05:44 AM
Hi all,

I have some doubt while creating dynamic rows. I want to created two text box in a <td>. One textbox is separated with <br> tag. But I don't know the property to add <br>.

Here is my code...

<html>
<head>
<title>InsertTable Row </title>
<script language="javascript">
var gRowId = 2;


function addRow()
{
var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];
var gRowId1 = gRowId;
var row = document.createElement('TR');
var cell1 = document.createElement('TD');
var cell2 = document.createElement('TD');
var cell3 = document.createElement('TD');


var inp1 = document.createElement('INPUT');
var inp2 = document.createElement('INPUT');

inp1.setAttribute('type','text');
inp1.setAttribute('name','usertxt'+gRowId1);
inp1.setAttribute('value','Original Row'+gRowId1);
inp1.id='usertxt'+gRowId1;


var anc = document.createElement("a");
anc.href="#"
anc.onclick= function() {
window.caller = document.getElementById("usertxt" + gRowId1)
var cal = window.open('C:/del4.html','search','resizable=no,left=300,top=200,width=350,height=300');
if (!cal.opener) cal.opener = self;
return false
}
var img = document.createElement('img');
img.src = 'C:/cal.jpg';
img.border='0';
anc.appendChild(img);

inp2.setAttribute('type','text');
inp2.setAttribute('name','srow'+gRowId1);
inp2.setAttribute('value','Original Col'+gRowId1);
inp2.id='srow'+gRowId1;

cell1.innerHTML = gRowId;
cell2.appendChild(inp1);
cell2.appendChild(anc);
cell3.appendChild(inp2);

row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);

tbody.appendChild(row);
gRowId++;
}
</script>

</head>
<body>
<form name="myform" method="post">
<table id="table1" border=1>
<tbody>
<tr>
<th>ID</th><th>Data1</th><th>Data2</th>
</tr>
<tr>
<td>1</td>
<td><input name="usertxt" type=text value="Original Row1"><a href="#" onClick="window.caller = document.forms[0].usertxt;cal = window.open('C:/del4.html','search','resizable=no,left=300,top=200,width=350,height=300'); if (!cal.opener) cal.opener = self; return false"><img src = "C:/cal.jpg" border="0" ><br><input name="subusertxt" type=text value="Sub Value 1"></td>
<td><input name="srow" type=text value="Original Col1"></td>

</tr>
</tbody>
</table>
<input type="button" value="Insert Row" onClick="addRow();">
<input type="submit" name="submit" value="Submit">
</form>
</body>
</html>


If I click on Add, In Second Row, 1st column I need to create one more textbox under the present one....

Initiall page loads, can see Two colums --
1st Column there are two textboxes containing values "Original Row1" and "Sub Value1" and Second Column containing "Original Col1".

If I click on the Insert Row button, Need to create two textboxes in 1st column (values as "Original Row2" and "Sub Value2") and in 2nd Column "Original Col2". Present code will give "Original Row2" in 1st Column, I want to generate a textbox in that <td> followed by <br> tag and textbox value as "Sub Value2".

Hope my question is clear... I didn't get any solution to add <br> TAG inside a <TD> to create dynamic rows.

Could you please find a solution to this problem.

Thanks

jscheuer1
12-17-2005, 07:49 AM
var lf=document.createElement('br')
cell1.appendChild(lf)