1. 程式人生 > >電力項目十七--數據字典首頁JS添加和刪除表格

電力項目十七--數據字典首頁JS添加和刪除表格

all 行號 .html ava rem context wrap string類型 emp

知識點:jQuery是一個JavaScript函數庫。

JS代碼:

function insertRows(){ 
    //獲取表格對象
    var tb1 = $("#dictTbl");
    var tempRow = $("#dictTbl tr").size();//獲取表格的行數
    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+"\")‘><img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>
"); // 創建tr,將3個td放置到tr中 var $tr = $("<tr></tr>"); $tr.append($tdNum); $tr.append($tdName); $tr.append($tdDel); //在表格的最後追加新增的tr tb1.append($tr); }

刪除改變行號:

function delTableRow(rowNum){ 
   //改變行號和刪除的行號
   var tb1 = $("#dictTbl");
   var tempRow = $("#dictTbl tr
").size();//獲取表格的行數 if (tempRow >rowNum){ //獲取刪除行的id指定的對象,例如:<input name=\"itemname\" type=\"text\" id=\""+tempRow+"\" size=\"45\" maxlength=25> $("#"+rowNum).parent().parent().remove(); //加1表示尋找下一個id,目的是將後面tr的格式向上移動 for (i=(parseInt(rowNum)+1);i<tempRow;i++){ //將i-1的值賦值給編號 $("#"+i).parent().prev().html(i-1); //將i-1的值賦值給超鏈接的刪除 $("#"+i).parent().next().html("<a href=‘javascript:delTableRow(\""+(i-1)+"\")‘><img src=${pageContext.request.contextPath }/images/delete.gif width=15 height=14 border=0 style=CURSOR:hand></a>");// //將i-1的值賦值給文本框的id,用於刪除 $("#"+i).attr("id",(i-1));//將id設置成i-1 } } }

JSP代碼:

 <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">
                    <td class="ta_01" align="center"  width="20%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">編號</td>
                    <td class="ta_01" align="center"  width="60%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">名稱</td>
                    <td class="ta_01" align="center"  width="20%" height=22 background="${pageContext.request.contextPath }/images/tablehead.jpg">刪除</td>                    
                </tr>
                
               
                 <tr>
                   <td class="ta_01" align="center"  width="20%">1</td>
                   <td class="ta_01" align="center"  width="60%">
                   <input name="itemname" type="text"  size="45" maxlength="25"></td>
                   <td class="ta_01" align="center"  width="20%"></td>
                </tr>
              
                
            
         </table>

在使用<table>標簽實現表格添加行和刪除行的時候,後臺獲取頁面填寫的值,此時是一個String類型的數組對象,可以采用遍歷數組的方式,保存數據。

電力項目十七--數據字典首頁JS添加和刪除表格