In application development, some input information is dynamic, such as the work experience we want to register an employee, such as the following figure
If it is made into a dead end, you can only fill in three, what if it is four? Or more, isn't it impossible to add it? So this is not good, we can dynamically add table rows, as shown in the figure below, add a row and enter a row of information, which is more flexible
Let's take a look at how to combine JavaScript in asp and asp.net to achieve this effect:
First of all, dynamically adding tables is implemented in the foreground. When the next station is available, it may be possible, but ajax may be used, which is very troublesome, so it is best to use javascript to implement them. The following are two ways to dynamically add table rows:
The first type: source code
Javascript:
<script type="text/javascript"> /**//*This function is used to add one row dynamically * 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 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 used 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.rows.length;i++){ if(tabObj.getElementsByTagName('img')[i]==btnObj){ tabObj.deleteRow(i+targPos); } } } } </script>Html
<table id=tabUserInfo border=1> <tr> <td>Name</td> <td>Gender</td> <td>Age</td> <td>Host</td><td>Delete</td> </tr> <tr style="display:none" id=trUserInfo> <td id=tdUserInfo><input id=username name=username ></td> <td id=tdUserInfo><input id=usersex name=usersex></td> <td id=tdUserInfo><input id=userage name=userage></td> <td id=tdUserInfo><input id=userlove name=userlove></td> <td id=tdUserInfo><img onClick="deleteRow(document.all.tabUserInfo,1,this)"></td> </tr> <tr> <td><input type=button value="Add" onClick="addRow(document.all.tabUserInfo,null,1,1)"></td> </tr> </table>