Power Project 17--Data dictionary home JS add and delete tables

Knowledge Point:jquery is a library of JavaScript functions.

JS Code:

function InsertRows () {//Get Table Object    varTB1 = $ ("#dictTbl"); varTemprow = $ ("#dictTbl TR"). Size ();//get the number of rows in a table    var$tdNum = $ ("<td align= ' center ' ></td>");        $tdNum. HTML (temprow); var$tdName = $ ("<td align= ' center ' ></td>"); $tdName. HTML ("<input name=\ "itemname\" type=\ "text\" id=\ ""+temprow+"\ "size=\" 45\ "maxlength=25>"); var$tdDel = $ ("<td align= ' center ' ></td>"); $tdDel. HTML ("<a href= ' Javascript:deltablerow (\ ""+temprow+"\ ") ' ></a>"); //Create a TR and place 3 TD into TR    var$TR = $ ("<tr></tr>");    $tr. Append ($tdNum);    $tr. Append ($tdName);    $tr. Append ($tdDel); //Add the new TR at the end of the tabletb1.append ($TR);} 

Delete Change line number:

function Deltablerow (rowNum) {//Change line numbers and deleted line numbers   varTB1 = $ ("#dictTbl"); varTemprow = $ ("#dictTbl TR"). Size ();//get the number of rows in a table   if(Temprow >rowNum) {           //gets the object specified by the ID of the deleted row, for example: <input name=\ "itemname\" type=\ "text\" id=\ "+temprow+" \ "size=\" 45\ "maxlength=25>$("#"+rowNum). Parent (), parent (). remove (); //add 1 to look for the next ID to move the format of the following TR up       for(I= (parseint (rowNum) +1); i<temprow;i++){          //assigns the value of the i-1 to the number$("#"+i). Parent (). Prev (). HTML (i-1); //assign a value of i-1 to the deletion of a hyperlink$("#"+i). Parent (). Next (). HTML ("<a href= ' Javascript:deltablerow (\ ""+ (I-1)+"\ ") ' ></a>");//          //assigns the value of I-1 to the ID of the text box, which is used to delete$("#"+i). attr ("ID", (I-1));//set the ID to i-1      }   }} 

JSP Code:

<table cellspacing="0"cellpadding="1"rules=" All"Bordercolor="Gray"Border="1"Id="Dicttbl"style="Border-right:gray 1px solid; Border-top:gray 1px solid; Border-left:gray 1px solid; width:100%; Word-break:break-all; Border-bottom:gray 1px solid; Border-collapse:collapse; Background-color: #f5fafe; Word-wrap:break-word"> <tr style="Font-weight:bold; font-size:12pt; height:25px; Background-color: #afd1f3"> &LT;TDclass="ta_01"align="Center"Width="20%"height= ABackground="${pagecontext.request.contextpath}/images/tablehead.jpg"> Number </td> &LT;TDclass="ta_01"align="Center"Width="60%"height= ABackground="${pagecontext.request.contextpath}/images/tablehead.jpg"> Name </td> <tdclass="ta_01"align="Center"Width="20%"height= ABackground="${pagecontext.request.contextpath}/images/tablehead.jpg"> Delete </td> </tr> <tr> <tdclass="ta_01"align="Center"Width="20%">1</td> &LT;TDclass="ta_01"align="Center"Width="60%"> <input name="ItemName"Type="text"Size=" $"Maxlength=" -"></td> &LT;TDclass="ta_01"align="Center"Width="20%"></td> </tr> </table>

When using the <table> tag implementation table to add rows and delete rows, the background gets the value of the page fill, this is a string type of array object, you can use the way to iterate over the array, save the data.

Power Project 17--Data dictionary home JS add and delete tables