Hi, I have page with a table, an

oraclec · Jul 3, 2003

Hi,

I have page with a table, and a button to add rows to this table dynamically.

This is a very basic concept I have of this program. It adds a row at a time:

<%
Function addrow()
%>
<tr>
<td>value1</td>
<td>value2</td>
</tr>
<%
End Function
%>

<form>
<input type="Submit" value="Add Row" onClick="addrow()">
</form>

How do I enclose the HTML tags in the function so that it actually adds my row? Or is my concept too basic?

Thanks for any help!

|~*Oraclec*~|

shaddow · Jul 4, 2003

You cant call ASP function from client side.
You need to use client side scripting to add a row.

Code:

<html>
<script language=javascript>
function addRow()
{
	var tableObj=document.all.table1;
	var whereToInsert=tableObj.rows.length;
	var newRow=tableObj.insertRow(whereToInsert-1);
	var newCell=newRow.insertCell();
	newCell.innerText=whereToInsert-1;
}
</script>
<body>
<table name=table1 border=1 id=table1>
<tr>
<td>
	This table will add rows
</td>
</tr>

<tr>
<td align=center>
	<input type=button value=&quot;Add row&quot; onclick=&quot;addRow()&quot;>
</td>
</tr>
</table>
</body>
</html>

________
George, M

oraclec · Jul 4, 2003

Thanks for the example! I added more columns to each of my rows by multiplying the following line of code--

var newCell=newRow.insertCell();

2 further questions:
(1) Is it possible to have text boxes or select lists for user input in the cells in each column?

(2) How can individual cells in each row be identified so that calculations on the values in the cells can be done, with the result showing in a different cell on the same row?

e.g. My Table has 3 columns: the 1st column is a text box, the 2nd, a drop-down list and the 3rd, a calculation field (when link in the cell is click, the calculated result appears in the same cell.)

Thanks again.

|~*Oraclec*~|

LakshmiKiran · Jul 4, 2003

Try out this..

<html>
<script language=javascript>
var counter=0;
function addRow()
{
var tableObj=document.all.table1;
var whereToInsert=tableObj.rows.length;
var newRow=tableObj.insertRow(whereToInsert-1);
var newCell=newRow.insertCell();

var a="<INPUT type=text value='text' name=t"+ counter++ + ">";
var b="<INPUT type=checkbox value='text' name=c"+ counter++ + ">";
var c="<select name=sel"+ counter++ + "><option>1</option>";

newCell.insertAdjacentHTML("AfterBegin",c);
newCell.insertAdjacentHTML("AfterBegin",b);
newCell.insertAdjacentHTML("AfterBegin",a);

}
</script>

<body>
<table name=table1 border=1 id=table1>
<tr>
<td>
This table will add rows
</td>
</tr>

<tr>
<td align=center>
<input type=button value="Add row" onclick="addRow()">
</td>
</tr>
</table>
</body>
</html>

shaddow · Jul 5, 2003

LakshmiKiran has right, you can add HTML code inside using innerHtml property

________
George, M

oraclec · Jul 13, 2003

Hi!

Thanks for all your help. There were some table layout problems though when the number of columns increased. But I've worked around the problem by adding and specifying one cell at a time. Below is a short abstract of my codes:

I actually need to capture the user input in each row and calculate speed from distance and time on the same row.

(1)
Does anyone know how to retrieve the values from the function within the script? The HTML text fields are enclosed with a string variable. Where do I put the <form> </form> tags so I can get the user inputs and do the calculation within the same page?

(2)
Also, I want to save everything, (after adding rows, having user inputs in each row, and do the calculations for all rows) in a database with my SAVE button beside the ADD ROW button.

I am grateful for any help. Below are my codes:

<HTML>

<HEAD>
<script language=javascript>

var counter=0;

function addRow()
{
var tableObj=document.all.DLAtable;
var whereToInsert=tableObj.rows.length;
var newRow=tableObj.insertRow(whereToInsert-0);

var newCell=newRow.insertCell();

var cell_dateDay="<select name=sel_dateDay"+ counter++ + "><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option>";
newCell.insertAdjacentHTML("AfterBegin",cell_dateDay);

var newCell=newRow.insertCell();

var cell_dateMth="<select name=sel_dateMth"+ counter++ + "><option>January</option><option>February</option><option>March</option><option>April</option><option>May</option><option>June</option><option>July</option><option>August</option><option>September</option><option>October</option><option>November</option><option>December</option>";
newCell.insertAdjacentHTML("AfterBegin",cell_dateMth);

var newCell=newRow.insertCell();

var cell_dateYr="<select name=sel_dateYr"+ counter++ + "><option>2003</option><option>2004</option><option>2005</option><option>2006</option><option>2007</option>";
newCell.insertAdjacentHTML("AfterBegin",cell_dateYr);

var newCell=newRow.insertCell();
var cell_dailydist="<INPUT type=text value='' size=5 name=txt_dailydist"+ counter++ + ">";
newCell.insertAdjacentHTML("AfterBegin",cell_dailydist);

var newCell=newRow.insertCell();
var cell_dailytimeHr="<INPUT type=text value='' size=3 name=txt_dailytimeHr"+ counter++ + ">";
newCell.insertAdjacentHTML("AfterBegin",cell_dailytimeHr);

var newCell=newRow.insertCell();
var cell_dailytimeMin="<INPUT type=text value='' size=2 name=txt_dailytimeMin"+ counter++ + ">";
newCell.insertAdjacentHTML("AfterBegin",cell_dailytimeMin);

var newCell=newRow.insertCell();
var cell_dailyspd="<INPUT type=text value='' size=4 name=txt_dailyspd"+ counter++ + "><a href='#'>[calculate]</a>";
newCell.insertAdjacentHTML("AfterBegin",cell_dailyspd);
}
</script>
</HEAD>

<BODY>

<table width="100%" bgcolor="#E8E8E8" border="1" name="DLAtable" id="DLAtable">

<tr>
<td align="center"><input type=button value="Add row" onclick="addRow()">
</td>


<td><input type="submit" value="Save Changes"><img src="images/save.gif">
</td>

</tr>

<tr>
<td>Date</td>
<td>Month</td>
<td>Year</td>
<td>Daily Distance</td>
<td>Daily Time (Hrs)</td>
<td>Daily Time (Mins)</td>
<td>Daily Avg Speed</td>
</tr>

</table>

</BODY>
</HTML>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Hi, I have page with a table, an

oraclec

Programmer

shaddow

Programmer

oraclec

Programmer

LakshmiKiran

Programmer

shaddow

Programmer

oraclec

Programmer

Similar threads

Part and Inventory Search

Sponsor