Click to See Complete Forum and Search --> : Create Rows based on other rows dynamically


Babak
02-07-2003, 11:12 AM
I have a table made dynamically on server. I want to create a new row like first row and append it to the table using Java Script .

I tried the following code but it doesn't work


<table id="tblDataEntry1" bordercolor="LightGrey" border="0" style="border-color:LightGrey;">
<tr>
<td><select name="ddlUserId1" id="ddlUserId1" style="width:70pt;">
<option value=""></option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="6">6</option>

</select><select name="ddlScore1" id="ddlScore1" style="width:50px;">
<option value=""></option>
<option value="20">20</option>
<option value="19">19</option>


</select><input name="txtComment1" type="text" id="txtComment1" style="width:600px;" /></td>
</tr>
</table>



<INPUT id="Add1" type="button" value="Add Empty Row" onclick="AddRow"></P>

<script>
function AddRow()
{
var MyTable=document.getElementById("tblDataEntry1");
var MyRow=MyTable.getElementsByTagName("tr")[0];
MyTable.appendChild(MyRow);
}
</script>

rannasJem
02-07-2003, 12:08 PM
Not sure if this is what you are looking for, I just wrote it so it's not that great but it works



<script>
function CreateNewTable()
{
var MyTable
var Rows
var Columns

Rows = document.all.Rows.value
Columns = document.all.Columns.value

MyTable = "<table border='1'>"
for(i=0; i<Columns; ++i)
{
MyTable = MyTable + "<tr>"
for(j=0; j<Rows; ++j)
{
MyTable = MyTable + "<td>Column " + j + "<br>Row " + i + "</td>"
}
MyTable = MyTable + "</tr>"
}
MyTable = MyTable + "</table>"
document.all.DynamicTable.innerHTML = MyTable;
}
</script>
<table>
<tr>
<td>
Rows
</td>
<td>
<select name="Columns" id="Columns">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td>
Columns
</td>
<td>
<select name="Rows" id="Rows">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
</table>

<input type="button" value="Create Table" onclick="CreateNewTable()">
<div id="DynamicTable"></div>

rannasJem
02-07-2003, 12:10 PM
Try this instead, just added the function to an onchange event rather than another button



<script>
function CreateNewTable()
{
var MyTable
var Rows
var Columns

Rows = document.all.Rows.value
Columns = document.all.Columns.value

MyTable = "<table border='1'>"
for(i=0; i<Columns; ++i)
{
MyTable = MyTable + "<tr>"
for(j=0; j<Rows; ++j)
{
MyTable = MyTable + "<td>Column " + j + "<br>Row " + i + "</td>"
}
MyTable = MyTable + "</tr>"
}
MyTable = MyTable + "</table>"
document.all.DynamicTable.innerHTML = MyTable;
}
</script>
<table>
<tr>
<td>
Rows
</td>
<td>
<select name="Columns" id="Columns" onchange="CreateNewTable()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
<tr>
<td>
Columns
</td>
<td>
<select name="Rows" id="Rows" onchange="CreateNewTable()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
</tr>
</table>
<div id="DynamicTable"></div>

Babak
02-07-2003, 12:38 PM
Thanks very much
but I already have a table that user might has done some dataentry in at the time clicking "Add New Button".
So I want to have the table intact and just add a new row which is like any other row.
Thanks in advance