JQuery implémente tables_jquery directement modifiables

L'exemple de cet article décrit comment implémenter une table directement modifiable avec JQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Fonction :

Créez un tableau où l'utilisateur peut modifier directement le texte de la cellule après avoir cliqué sur une cellule.
En état d'édition, l'utilisateur peut appuyer sur la touche Entrée pour confirmer la modification et appuyer sur la touche ESC pour annuler la modification.

L'effet est le suivant :

Choses :

Lorsque l'utilisateur clique sur une cellule, une zone de texte est immédiatement insérée dans la cellule, et sa largeur et sa hauteur sont définies sur les mêmes valeurs que la cellule. Une fois que l'utilisateur a confirmé la saisie, effacez tout le code HTML de la cellule, puis définissez le contenu sur le texte que l'utilisateur vient de saisir.

Code HTML :

<table align="center"> 
 <tr> 
 <td>学号</td> 
 <td>姓名</td> 
 </tr> 
 <tr> 
 <td>001</td> 
 <td>dog</td> 
 </tr> 
 <tr> 
 <td>002</td> 
 <td>cat</td> 
 </tr> 
 <tr> 
 <td>003</td> 
 <td>pig</td> 
 </tr> 
</table> 

Code JavaScript :

$(function(){ 
 $("td").click(function(event){ 
  //td中已经有了input,则不需要响应点击事件
  if($(this).children("input").length > 0) 
   return false; 
  var tdObj = $(this); 
  var preText = tdObj.html();
  //得到当前文本内容 
  var inputObj = $("<input type='text' />");
  //创建一个文本框元素 
  tdObj.html(""); //清空td中的所有元素 
  inputObj 
   .width(tdObj.width())
   //设置文本框宽度与td相同 
   .height(tdObj.height()) 
   .css({border:"0px",fontSize:"17px",font:"宋体"})
   .val(preText) 
   .appendTo(tdObj)
   //把创建的文本框插入到tdObj子节点的最后
   .trigger("focus")
   //用trigger方法触发事件 
   .trigger("select"); 
  inputObj.keyup(function(event){ 
   if(13 == event.which)
   //用户按下回车 
   { 
    var text = $(this).val(); 
    tdObj.html(text); 
   } 
   else if(27 == event.which)
   //ESC键 
   { 
    tdObj.html(preText); 
   } 
  }); 
  //已进入编辑状态后，不再处理click事件 
  inputObj.click(function(){ 
   return false; 
  }); 
 }); 
}); 

J'espère que cet article sera utile à la programmation jQuery de chacun.