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!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

dynamically adding/deleting table rows 2

Status
Not open for further replies.
yesti

yesti

MIS
Dec 8, 2000
166
US
I have a table with a default number of rows drawn with vbscript so that text boxes in each row are named 'name'&rownumber via code similar to below:

<%
ctr=1
Response.Write &quot;<table><tr><td>Q1</td></tr>&quot;
Do until ctr=2
Response.Write &quot;<tr><td><input type=text name=Q1&quot;&ctr&&quot;>&quot;
Response.Write &quot;</td></tr>&quot;
ctr=ctr+1
Loop
Response.Write &quot;</table>&quot;
%>

Is there a way to use javascript to dynamically draw or erase rows if the user needs more room? The new rows need to have the input objects named correctly so that I can validate each row and update a database.

The way I have it now is they can enter the number of rows they want in a textbox, submit a blank form and it redraws the table with the number of rows they want. This clears the form though. The only other way I would do it is save the table data in a temp table, then redraw the table and filling in the data that was already there. If need be I guess I will code it that way. Thanks!
 
Sort by date Sort by votes
Yes, you can insert rows and delete them at your will with DOM API. Use the method insertRow() to insert a row wherever you want in your table. To know more about insertRow() search on the net for the same.

This method doesnot work on opera5 browsers but since IE and Netscape use Mozilla u should be fine unless u r bound to code for opera browsers as well.
Badrinath Chebbi
 
Upvote 0 Downvote
Thanks, I did a little searching, but I can't figure out how to use this method. I made a simple page:

<html><body>
<table id=a border=1><tr><td>a</td></tr></table>
<input type=button onClick=&quot;document.all.a.insertRow();&quot; value=clickme>
</body></html>

The button doesn't do anything. Sorry for being such a novice, but could you provide sample code? Thanks again.
 
Upvote 0 Downvote
I'm a newbie to this concept, too, but I think I've started to figure it out. Here's what I've got in my document body:
Code: 
<form name=&quot;form1&quot; method=&quot;post&quot; action=&quot;&quot;>
  <input type=&quot;button&quot; name=&quot;Button&quot; value=&quot;Add Row&quot; onClick=&quot;addRow()&quot;>
  <table border=&quot;1&quot; id=&quot;dynatable&quot;>
    <tr> 
      <td><strong>ID Number</strong></td>
      <td><strong>Notes</strong></td>
    </tr>
    <tr> 
      <td><input type=&quot;text&quot; name=&quot;item1&quot;></td>
      <td><input name=&quot;notes1&quot; type=&quot;text&quot; size=&quot;75&quot;></td>
    </tr>
  </table>
  <input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Add Item(s)&quot;>
</form>
And my addRow function looks like this:
Code: 
<script language=&quot;JavaScript&quot;>
function addRow() {
var oRow;
var oCell1;
var oCell2;
var newnumber;

newnumber = dynatable.rows.length;
oRow = dynatable.insertRow();
oCell1 = oRow.insertCell();
oCell1.innerHTML = &quot;<input type='text' name='item&quot; + newnumber + &quot;'>&quot;;
oCell2 = oRow.insertCell();
oCell2.innerHTML = &quot;<input name='notes&quot; + newnumber + &quot;' type='text' size='75'>&quot;;
}
</script>
This inserts a new row, 2 cells in the row, and textboxes with unique numbers in each cell. I imagine when I'm done, submitting the form will trigger a function to look for the number of rows in the table, then run the SQL to insert that many records into my database. When I get that far, I'll post that code, too. Hope this helps! :)

--Ryan
 
Upvote 0 Downvote
Okay, finished, and it works wonderfully! Here's what I ended up having in my page body:
Code: 
  <form name=&quot;form1&quot; method=&quot;POST&quot; action=&quot;<%=MM_editAction%>&quot;>
	<input type=&quot;button&quot; name=&quot;Button&quot; value=&quot;Add Row&quot; onClick=&quot;addRow()&quot;>
	<table border=&quot;1&quot; id=&quot;dynatable&quot;>
	  <thead>
		<tr> 
		  <td><strong>ID Number</strong></td>
		  <td><strong>Notes</strong></td>
		</tr>
	  </thead>
	  <tbody id=&quot;TheBody&quot;>
		<tr> 
		  <td><input type=&quot;text&quot; name=&quot;item1&quot;></td>
		  <td><input name=&quot;notes1&quot; type=&quot;text&quot; size=&quot;75&quot;></td>
		</tr>
	  </tbody>
	</table>
	<input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Add Item(s)&quot;>
	<input type=&quot;hidden&quot; name=&quot;MM_insert&quot; value=&quot;form1&quot;>
	<input name=&quot;EquipmentID&quot; type=&quot;hidden&quot; id=&quot;EquipmentID&quot; value=&quot;<%=(rsEquipment.Fields.Item(&quot;EquipmentID&quot;).Value)%>&quot;>
	<input name=&quot;numberRows&quot; type=&quot;hidden&quot; id=&quot;numberRows&quot; value=&quot;1&quot;>
  </form>
And here's my final addRow function:
Code: 
<script language=&quot;JavaScript&quot;>
function addRow() {
var oRow;
var oCell1;
var oCell2;
var newnumber;

newnumber = dynatable.rows.length;
oRow = dynatable.insertRow();
oCell1 = oRow.insertCell();
oCell1.innerHTML = &quot;<input type='text' name='item&quot; + newnumber + &quot;'>&quot;;
oCell2 = oRow.insertCell();
oCell2.innerHTML = &quot;<input name='notes&quot; + newnumber + &quot;' type='text' size='75'>&quot;;
form1.numberRows.value++;
}
</script>
Notice how I increment the hidden field numberRows each time I add a row. That becomes important in the next step. Dreamweaver was nice enough to generate most of this code for me, but I've modified it a bit, adding a For loop to run the INSERT command as many times as there are rows.
Code: 
<%
' *** Edit Operations: declare variables

Dim MM_editAction
Dim MM_abortEdit
Dim MM_editQuery
Dim MM_editCmd

Dim MM_editConnection
Dim MM_editTable
Dim MM_editRedirectUrl
Dim MM_editColumn
Dim MM_recordId

Dim MM_fieldsStr
Dim MM_columnsStr
Dim MM_fields
Dim MM_columns
Dim MM_typeArray
Dim MM_formVal
Dim MM_delim
Dim MM_altVal
Dim MM_emptyVal
Dim MM_i
Dim MM_row

Dim MM_tableValues
Dim MM_dbValues

MM_editAction = CStr(Request.ServerVariables(&quot;SCRIPT_NAME&quot;))
If (Request.QueryString <> &quot;&quot;) Then
  MM_editAction = MM_editAction & &quot;?&quot; & Request.QueryString
End If

' boolean to abort record edit
MM_abortEdit = false

' query string to execute
MM_editQuery = &quot;&quot;
%>
<%
' *** Insert Record: set variables

If (CStr(Request(&quot;MM_insert&quot;)) = &quot;form1&quot;) Then
	For MM_Row = 1 To Request.Form(&quot;numberRows&quot;)
	  MM_editConnection = MM_equipment_STRING
	  MM_editTable = &quot;tblItemInfo&quot;
	  MM_editRedirectUrl = &quot;DetailDetail.asp?Account=&quot; & Request.Form(&quot;Account&quot;) & &quot;&Detail_Number=&quot; & Request.Form(&quot;Detail_Number&quot;)
	  MM_fieldsStr  = &quot;item&quot; & MM_Row & &quot;|value|notes&quot; & MM_Row & &quot;|value|EquipmentID|value&quot;
	  MM_columnsStr = &quot;ID_Number|',none,NULL|Notes|',none,NULL|EquipmentID|none,none,NULL&quot;
	
	  ' create the MM_fields and MM_columns arrays
	  MM_fields = Split(MM_fieldsStr, &quot;|&quot;)
	  MM_columns = Split(MM_columnsStr, &quot;|&quot;)
	  
	  ' set the form values
	  For MM_i = LBound(MM_fields) To UBound(MM_fields) Step 2
		MM_fields(MM_i+1) = CStr(Request.Form(MM_fields(MM_i)))
	  Next
	
	  ' append the query string to the redirect URL
	  If (MM_editRedirectUrl <> &quot;&quot; And Request.QueryString <> &quot;&quot;) Then
		If (InStr(1, MM_editRedirectUrl, &quot;?&quot;, vbTextCompare) = 0 And Request.QueryString <> &quot;&quot;) Then
		  MM_editRedirectUrl = MM_editRedirectUrl & &quot;?&quot; & Request.QueryString
		Else
		  MM_editRedirectUrl = MM_editRedirectUrl & &quot;&&quot; & Request.QueryString
		End If
	  End If
	
	' *** Insert Record: construct a sql insert statement and execute it
	
	  ' create the sql insert statement
	  MM_tableValues = &quot;&quot;
	  MM_dbValues = &quot;&quot;
	  For MM_i = LBound(MM_fields) To UBound(MM_fields) Step 2
		MM_formVal = MM_fields(MM_i+1)
		MM_typeArray = Split(MM_columns(MM_i+1),&quot;,&quot;)
		MM_delim = MM_typeArray(0)
		If (MM_delim = &quot;none&quot;) Then MM_delim = &quot;&quot;
		MM_altVal = MM_typeArray(1)
		If (MM_altVal = &quot;none&quot;) Then MM_altVal = &quot;&quot;
		MM_emptyVal = MM_typeArray(2)
		If (MM_emptyVal = &quot;none&quot;) Then MM_emptyVal = &quot;&quot;
		If (MM_formVal = &quot;&quot;) Then
		  MM_formVal = MM_emptyVal
		Else
		  If (MM_altVal <> &quot;&quot;) Then
			MM_formVal = MM_altVal
		  ElseIf (MM_delim = &quot;'&quot;) Then  ' escape quotes
			MM_formVal = &quot;'&quot; & Replace(MM_formVal,&quot;'&quot;,&quot;''&quot;) & &quot;'&quot;
		  Else
			MM_formVal = MM_delim + MM_formVal + MM_delim
		  End If
		End If
		If (MM_i <> LBound(MM_fields)) Then
		  MM_tableValues = MM_tableValues & &quot;,&quot;
		  MM_dbValues = MM_dbValues & &quot;,&quot;
		End If
		MM_tableValues = MM_tableValues & MM_columns(MM_i)
		MM_dbValues = MM_dbValues & MM_formVal
	  Next
	  MM_editQuery = &quot;insert into &quot; & MM_editTable & &quot; (&quot; & MM_tableValues & &quot;) values (&quot; & MM_dbValues & &quot;)&quot;
	
	  If (Not MM_abortEdit) Then
		' execute the insert
		Set MM_editCmd = Server.CreateObject(&quot;ADODB.Command&quot;)
		MM_editCmd.ActiveConnection = MM_editConnection
		MM_editCmd.CommandText = MM_editQuery
		MM_editCmd.Execute
		MM_editCmd.ActiveConnection.Close
	  End If
	Next
	If (MM_editRedirectUrl <> &quot;&quot;) Then
	  Response.Redirect(MM_editRedirectUrl)
	End If
End If
%>
There you have it! :) This was all a big learning experience for me, so if anyone has an improved method, please post it here. Good luck!

--Ryan
 
Upvote 0 Downvote
Thanks for showing me the details! I played with your script a bit and noticed that if you refresh the page then form1.numberRows.value holds the last number of rows even when the table is reset. If you change the last line in your addRow function to:

form1.numberRows.value=newnumber;

then the value of numberRows is accurate when the page is finally submitted. Thanks again!
 
Upvote 0 Downvote
Ah, thanks. I hate it when I miss silly things like that. :)

--Ryan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
982
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
970
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
863
coldbohemia
coldbohemia
lexer
  • Locked
  • Question
Adding datepicker calendar dynamically
Replies
0
Views
378
lexer
lexer
AbidingDude
  • Locked
  • Question
Dynamically Create A Table
Replies
3
Views
420
AbidingDude
AbidingDude

Part and Inventory Search

Sponsor

Back
Top