


Javascript dynamically adds table data rows (ASP background database saving example)_javascript skills
In many web applications, we will encounter many places where multiple rows of records need to be dynamically inserted. For example, on the talent website, when we fill in our resume, we need to fill in our project experience. We can dynamically add the number of items according to our actual situation. This is not added in the form of a separate page. This dynamic addition is in Add them dynamically to the same page, and finally submit them to the server and save them in the database.
In this article, I will use a similar example to dynamically add data items using Javascript in the frontend and save them to the database in the background.
Browser: IE.6.0
Backend: ASP (VBScript)
Frontend: HTML JavaScript
HTML code:
JS code:
/**//*This function is use to add one row dynamicly
* tabObj : Target table
* colNum: The number of columns that of a row in table
* sorPos: The source of the new row.
* targPos: The position where the new row will be added.
*
*/
function addRow(tabObj,colNum,sorPos,targPos)...{
var nTR = tabObj.insertRow(tabObj.rows.length-targPos); // Insert a new row into appointed table on the
//appointed position.
var TRs = tabObj.getElementsByTagName('TR'); // Get TRs collection from the appointed table
var sorTR = TRs [sorPos]; // Positioned the sorTR
var TDs = sorTR.getElementsByTagName('TD'); // Get TDs collection from the appointed row
if(colNum==0 || colNum==undefined || colNum==isNaN)...{
colNum=tabObj.rows[0].cells.length;
}
var ntd = new Array(); // Create a new TDs array
for(var i=0; i< colNum; i )...{ // Traverl the TDs in row
ntd[i] = nTR.insertCell(); // Create new cell
ntd [i].id = TDs[0].id; // copy the TD's id to new cell. | Attention! The TDs's
//suffix must be appointed
ntd[i].innerHTML = TDs[i ].innerHTML; // copy the value in ntd[i]'s innerHTML from corresponding TDs
}
}
/**//* This function is use to remove appointed row in appointed table
* tabObj: the appointed table
* targPos: target row position
* btnObj: currently clicked delete image button
*
*/
function deleteRow(tabObj, targPos,btnObj)...{ //Remove table row
for(var i =0; i
tabObj.deleteRow(i targPos);
}
}
}
Front-end code summary:
One thing to note about the above code is that the original line , we set the style to Display:none , this is because the newTD.innerHTML = sourceTD.innerHTML method is used to add rows in the following js, that is, the content of the existing column is directly copied to the innerHTML attribute of the newly added column, so the "data source" is hidden. "The column is prevented from being deleted by the user with an "Object excepted" error.
VBScript code:
<%
'###### Begin Transcation #####
conn.beginTrans ' Start a transaction
sql = "insert into UserInfo(username,sex) values("
sql=sql& "'"& request("Name") &"',"
sql=sql&"'"& request("Sex") &"')"
Response.Write sql&"
"
conn.execute(sql)
if request("ProjectName").count>0 then
dim maxid
maxid = 1
sql = "select max(id) as maxid from UserInfo"
set rs = conn.execute(sql)
maxid = rs("maxid")
rs.close
set rs = nothing
for i =1 to request("ProjectName").count
sql = "insert into ProjectInfo(uid,pname,pdesc,bdate,fdate) values("
sql=sql&""& maxid &","
sql=sql&"'"& request("ProjectName")(i) &"',"
sql=sql&"'"& request("Desc")(i) &"',"
sql =sql&"'"& request("BDate")(i) &"',"
sql=sql&"'"& request("FDate")(i) &"')"
Response.Write " "&sql&"
"
conn.execute(sql)
next
end if
if conn.Errors.count > 0 then ' If occus any error in the transaction , roll back transcation
conn.RollBackTrans
else ' If not error, commit the transcation
conn.commitTrans
end if
conn.close
set conn = nothing
%>
Backend code summary:
The method to obtain multiple data is to call request("").count, and use the number of count to determine the number of children to be inserted into the main table. The table records the number of times. Since the number of data operations is uncertain, in order to prevent exceptions from occurring when performing database operations, resulting in data inconsistency. We use transaction management. Transaction management has the characteristics of atomicity, consistency, etc. Data security can be guaranteed. We call conn.beginTrans to open a transaction at the beginning of the database operation. At the end of the data operation, we use conn.Errors.count to determine whether an error occurred during the transaction. If an error or exception occurs, conn.RollBackTrans rolls back. Otherwise, commit the transaction and complete the database operation.
Preview:
Figure 1: Enter the data filling page, click the Add button, add a row to Figure 2

Picture 2: Add another row and fill in the data to Figure 3
Figure 3: After adding two rows of data, click the Submit button to submit the data
Figure 4: After submitting the form, the database will execute several SQL statements as printed by the browser, and the data will be successfully added to the database.
Summary:
This article describes how to use Javascript to dynamically add columns for user input data in the frontend, and use ASP technology in the backend to insert the data added in the frontend into the database.
I hope it will be helpful to those who are learning ASP and Javascript.
If you have any questions, you can contact me. If you have any comments on this article, you are warmly welcome to criticize and correct me!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



1. Create a new PPT file and name it [PPT Tips] as an example. 2. Double-click [PPT Tips] to open the PPT file. 3. Insert a table with two rows and two columns as an example. 4. Double-click on the border of the table, and the [Design] option will appear on the upper toolbar. 5. Click the [Shading] option and click [Picture]. 6. Click [Picture] to pop up the fill options dialog box with the picture as the background. 7. Find the tray you want to insert in the directory and click OK to insert the picture. 8. Right-click on the table box to bring up the settings dialog box. 9. Click [Format Cells] and check [Tile images as shading]. 10. Set [Center], [Mirror] and other functions you need, and click OK. Note: The default is for pictures to be filled in the table

Being able to skillfully make forms is not only a necessary skill for accounting, human resources, and finance. For many sales staff, learning to make forms is also very important. Because the data related to sales is very large and complex, and it cannot be simply recorded in a document to explain the problem. In order to enable more sales staff to be proficient in using Excel to make tables, the editor will introduce the table making issues about sales forecasting. Friends in need should not miss it! 1. Open [Sales Forecast and Target Setting], xlsm, to analyze the data stored in each table. 2. Create a new [Blank Worksheet], select [Cell], and enter [Label Information]. [Drag] downward and [Fill] the month. Enter [Other] data and click [

1. Open the worksheet and find the [Start]-[Conditional Formatting] button. 2. Click Column Selection and select the column to which conditional formatting will be added. 3. Click the [Conditional Formatting] button to bring up the option menu. 4. Select [Highlight conditional rules]-[Between]. 5. Fill in the rules: 20, 24, dark green text with dark fill color. 6. After confirmation, the data in the selected column will be colored with corresponding numbers, text, and cell boxes according to the settings. 7. Conditional rules without conflicts can be added repeatedly, but for conflicting rules WPS will replace the previously established conditional rules with the last added rule. 8. Repeatedly add the cell columns after [Between] rules 20-24 and [Less than] 20. 9. If you need to change the rules, you can just clear the rules and then reset the rules.

Sometimes, we often encounter counting problems in Word tables. Generally, when encountering such problems, most students will copy the Word table to Excel for calculation; some students will silently pick up the calculator. Calculate. Is there a quick way to calculate it? Of course there is, in fact the sum can also be calculated in Word. So, do you know how to do it? Today, let’s take a look together! Without further ado, friends in need should quickly collect it! Step details: 1. First, we open the Word software on the computer and open the document that needs to be processed. (As shown in the picture) 2. Next, we position the cursor on the cell where the summed value is located (as shown in the picture); then, we click [Menu Bar

When we make tables, the first thing we think of is to use Excel software to make tables. But did you know that Word software is actually very convenient to make tables. Sometimes when we make tables in Word software, we need to enter serial numbers or numbers. , if you enter them one by one manually, it will be very troublesome. In fact, there is an operation in the word software that can automatically insert numbers or serial numbers. So let’s learn with the editor how to insert automatic numbering or serial numbers into Word tables. . 1. First create a Word document and insert a table. 2. Select the column or cell where you want to insert automatic serial numbers or numbers. 3. Click "Start" - "Number". 4. Select one of the style numbers. 5.

Word software is indispensable to us and needs to be used frequently. I have learned how to edit tables using Word software before. However, if I accidentally edit the table in the horizontal and vertical directions, and I don’t want to waste time re-creating it, is it possible to change the horizontal and vertical directions of the table? Woolen cloth? The answer is of course yes. Next, the editor will introduce to you in detail how to swap tables horizontally and vertically in Word. Let us learn together. First, we need to swap the rows and columns of the Word table below. To do this, we need to first select the table entirely, then right-click and select the copy function. Step 2: After selecting copy, we minimize word, then open an Excel table, right-click, select paste, and paste it into Exc

We often create and edit tables in excel, but as a novice who has just come into contact with the software, how to use excel to create tables is not as easy as it is for us. Below, we will conduct some drills on some steps of table creation that novices, that is, beginners, need to master. We hope it will be helpful to those in need. A sample form for beginners is shown below: Let’s see how to complete it! 1. There are two methods to create a new excel document. You can right-click the mouse on a blank location on the [Desktop] - [New] - [xls] file. You can also [Start]-[All Programs]-[Microsoft Office]-[Microsoft Excel 20**] 2. Double-click our new ex

When we see the table colors in other people's WPS documents, the effects are colorful and beautiful; but we only have monotonous black. If you have to fill the table with colors, I believe many students will do it. However, if you want to set the color of the table in WPS document China, many students will definitely find it confusing! Today, let’s learn how to set the color of the WPS document table. I have put together a document that I hope will be helpful to everyone. The steps are as follows: 1. We need to draw a table in the WPS document and right-click the table where the line color is to be modified. 2. Next, use the mouse to click [right mouse button] on the table; in the pop-up menu, we find [Border and Shading]. 3. At this time, the [Border and Shading] option will be opened.
