Comment ajouter et supprimer des tableaux sur la page d'accueil ?-js tutoriel-php.cn

Effet de page :

Code JS :

　　1. Ajouter un tableau

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);
}

Copier après la connexion

2. Supprimer le tableau

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      
      }
   }
}

Copier après la connexion

Code 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>

Copier après la connexion

Lorsque vous utilisez la balise

La page d'arrière-plan est obtenue. La valeur renseignée est maintenant un nom d'élément d'objet de tableau de type String. Les données peuvent être enregistrées en parcourant le tableau, et l'implémentation ultérieure de la sauvegarde des données du dictionnaire sera étendue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：

javascript 首页

source：php.cn

Article précédent：Introduction à la méthode de remplissage automatique de la longitude et de la latitude dans la zone de texte à l'aide de js Article suivant：Compréhension des objets XHR dans la série ajax

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur