首頁新增刪除表格怎麼實現？-js教程-PHP中文網

頁面效果：

JS程式碼：

　　1.新增表格

function insertRows(){ //获取表格对象var tb1 = $("#dictTbl");
var tempRow = $("#dictTbl tr").size();//获取表格的行数
var $tdNum = $("<td align=&#39;center&#39;></td>");
    $tdNum.html(tempRow);
        var $tdName = $("<td align=&#39;center&#39;></td>");
    $tdName.html("<input name=\"itemname\" type=\"text\" id=\""+tempRow+"\" size=\"45\" maxlength=25>");
        var $tdDel = $("<td align=&#39;center&#39;></td>");
    $tdDel.html("<a href=&#39;javascript:delTableRow(\""+tempRow+"\")&#39;><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);
}

登入後複製

　　# 2.刪除表格

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=&#39;javascript:delTableRow(\""+(i-1)+"\")&#39;><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>

登入後複製

在使用

標籤實作表格新增行和刪除行的時候，後台取得頁面填寫的值，此時是String類型的陣列物件itemname，可以採用遍歷數組的方式，保存數據，後續字典資料保存的實作再展開。

以上是首頁新增刪除表格怎麼實現？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：

javascript 首頁

來源：php.cn

上一篇：js取得經緯度自動填入文字方塊的方法介紹下一篇：ajax系列之XHR對象的理解

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章