Informations sur les formulaires en HTML

En Javascript, chaque paire de balises

sur la page est analysée en un objet, l'objet formulaire.

Vous pouvez utiliser document.forms pour obtenir une collection de tous les objets de formulaire dans le document dans l'ordre des sources.

如果一个表单对象定义如下：

获得该表单对象的方法：

  i>  document.forms["frm1"];   // 根据name属性值

 ii>  document.forms[0];        // 根据索引号

iii>  document.frm1;            // 直接根据name值获得对象

Attributs du formulaire à noter :

éléments : Obtenez le Source suivante Une collection de tous les contrôles sous une forme donnée, classés par source. Mais l'objet ne fait pas partie de cette collection.

var txtName = myform.elements[0];         //获得表单的第一个元素

var txtName = myform.elements["txtName"]; //获得name属性值为"txtName"的元素

var txtName = myform.elements.txtName;    //获得name属性值为"txtName"的元素

enctype : définir ou obtenir le multiple du formulaire Utilise le codage MIME (Internet Mail Extensions).

Si vous souhaitez télécharger un fichier, il doit être défini sur : multipart/form-data

Le

La description textuelle de chaque élément du formulaire doit utiliser la marque

Cette balise est utilisée pour lier le texte à l'élément de formulaire correspondant. Son attribut for spécifie la valeur id de l'élément de formulaire auquel il est lié. Après la liaison, cliquez sur le texte et la souris se concentrera sur la zone de texte correspondante ou sélectionnera l'option correspondante.

Si certains thèmes de bureau sont installés, certains éléments du formulaire changeront également de couleur pour vous y inviter, ce qui améliore grandement l'expérience utilisateur.

Exemple de code :

Remarque :

i > Chaque élément du formulaire doit essayer d'utiliser la balise pour améliorer l'expérience utilisateur ; Chaque élément de formulaire doit se voir attribuer un attribut name et un attribut id.

attribut name : utilisé pour soumettre des données au serveur ;

attribut id : utilisé pour effectuer les opérations correspondantes sur le client telles que : etc.

                                  (L'attribut name et l'attribut id doivent utiliser des valeurs identiques ou associées dans la mesure du possible.), préférez utiliser son attribut name.

Car, pour certains éléments spécifiques du formulaire (comme les boutons radio, etc.), il est plus facile d'obtenir la valeur de l'élément à l'aide de son attribut name, et il est également plus pratique de transmettre des données au serveur !

Javascript exploite des éléments de formulaire, des attributs moins couramment utilisés :

defaultChecked définit ou obtient l'état d'une case à cocher ou d'un bouton radio.

defaultValue définit ou obtient le contenu initial de l'objet.

désactivé définit ou obtient l'état du contrôle.

Formulaire de soumission

Exemple de formulaire de soumission :

onclick="document.forms['frm'].submit();">

  onclick="this.disabled=true; this.form.submit();">

Remarque :

i > Si vous utilisez la méthode submit() pour soumettre le formulaire, la soumission du formulaire

l'élément ne sera pas déclenché,

      onclick="document.forms['frm'].submit();">

      onclick="this.disabled=true; this.form.submit();">

Ceci est différent de la soumission d'éléments avec ;

ii > ou cliquez sur l'événement du bouton Pour désactiver le comportement de l'utilisateur consistant à cliquer à plusieurs reprises sur le bouton de soumission,

pour réduire la charge de réponse sur le serveur ; 🎜>i > Contrôler le nombre de caractères dans la zone de texte

Remarque : La longueur maximale dans la zone de texte multiligne est un attribut personnalisé ; si des caractères sont saisis dans <textarea>, les sauts de ligne sont également comptés pour un caractère. ; </p> <p> </p> <p><br></p> <p>ii > Lorsque la souris passe dessus, la zone de texte est automatiquement sélectionnée </p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td><script language="javascript"></td></tr> <tr><td>window.onload = function(){</td></tr> <tr><td>    var txtName = document.getElementsByName("myName")[0];</td></tr> <tr><td>    txtName.onmouseover = function(){</td></tr> <tr><td>       this.focus();</td></tr> <tr><td>    };</td></tr> <tr><td>    txtName.onfocus = function(){</td></tr> <tr><td>       this.select();</td></tr> <tr><td>    };</td></tr> <tr><td>}</td></tr> <tr><td></script></td></tr> <tr><td><INPUT TYPE="text" NAME="myName" value="默认值被选中" /></td></tr> </tbody></table> <p><br> </p> <p>Réalise la séparation du comportement et de la structure. </p> <p> </p> <p><br></p> <p>Définir le bouton radio</p> <p>Obtenir le bouton radio sélectionné et définir le bouton radio sélectionné</p> <p> <br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"> <td><script language="javascript"> ;</td> </tr> <tr><td>//Obtenir l'élément sélectionné</td></tr> <tr><td>fonction getChoice(){</td></tr> <tr> <td> var oForm = document.forms["myForm1"];</td> </tr> <tr><td> //radioName est la valeur de l'attribut de nom du bouton radio</td></tr> <tr><td> var aChoices = oForm.radioName;</td></tr> <tr><td> //Parcourir toute la liste à choix unique</td></tr> <tr><td> for(i= 0 ;i<aChoices.length;i ) </td></tr> <tr><td> if(aChoices[i].checked) </td></tr> <tr><td> break; Quittez si l'élément sélectionné est trouvé</td></tr> <tr><td> alert("Ce que vous avez sélectionné est : " aChoices[i].value);</td></tr> <tr>></tr> <tr><td>//Définir l'élément sélectionné</td></tr> <tr> <td>fonction setChoice(_num){</td> tr ></tr> <tr><td> var oForm = document.forms["myForm1"];</td></tr> <tr><td> //radioName est la valeur de l'attribut de nom du bouton radio</td></tr> <tr><td> oForm.radioName[_num].checked = true; //La valeur cochée des autres options sera automatiquement définie sur false</td></tr> <tr><td>}</td></tr> <tr><td></script><table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td><script language="javascript"></td></tr> <tr><td>//获取选中项</td></tr> <tr><td>function getChoice(){</td></tr> <tr><td>    var oForm = document.forms["myForm1"];</td></tr> <tr><td>    //radioName是单选按钮的name属性值</td></tr> <tr><td>    var aChoices = oForm.radioName;</td></tr> <tr><td>    //遍历整个单选项表</td></tr> <tr><td>    for(i=0;i<aChoices.length;i )   </td></tr> <tr><td>        if(aChoices[i].checked)   </td></tr> <tr><td>            break; //如果发现了被选中项则退出</td></tr> <tr><td>    alert("您选中的是：" aChoices[i].value);</td></tr> <tr><td>}</td></tr> <tr><td>//设置选中项</td></tr> <tr><td>function setChoice(_num){</td></tr> <tr><td>    var oForm = document.forms["myForm1"];</td></tr> <tr><td>    //radioName是单选按钮的name属性值</td></tr> <tr><td>    oForm.radioName[_num].checked = true; //其它选项的checked值会自动设置为false</td></tr> <tr><td>}</td></tr> <tr><td></script><br>             //调用代码<br>             <input type="button" value="获取选中项" onclick="getChoice();" /><br><input type="button" value="设置第1项被选中" onclick="setChoice(0);" /></td></tr> </tbody></table> ​ ​ ​ ​ //Code d'appel <input type="button" value="Obtenir l'élément sélectionné" onclick="getChoice();" /><input type="button" value="Définir le premier élément à sélectionner" onclick =" setChoice(0);" /></td></tr> </tbody></table> <p><br></p> <p>Vous devez vous assurer que la valeur de l'attribut de nom du même groupe de boutons radio est la même. </p> <p> </p> <p><br></p> <p>Définir les cases à cocher</p> <p>Définir les cases à cocher pour "tout sélectionner", "tout désélectionner" et "inverser la sélection" Fonction</p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td><script language="javascript"></td></tr> <tr><td>function changeBoxes(_action){</td></tr> <tr><td>    var myForm = document.forms["myForm1"];</td></tr> <tr><td>    //myCheckbox 为所有复选框的name属性值</td></tr> <tr><td>    var oCheckBox = myForm.myCheckbox;</td></tr> <tr><td> </td></tr> <tr><td>    for(var i=0;i<oCheckBox.length;i )    //遍历每一个选项</td></tr> <tr><td>        if(_action < 0)//反选</td></tr> <tr><td>            oCheckBox[i].checked = !oCheckBox[i].checked;</td></tr> <tr><td>        else </td></tr> <tr><td>            //_action为1是则全选,为0时则全不选</td></tr> <tr><td>            oCheckBox[i].checked = _action;</td></tr> <tr><td>}</td></tr> <tr><td></script></td></tr> <tr><td><form name="myForm1"></td></tr> <tr><td><input type="checkbox" name="myCheckbox">aa</td></tr> <tr><td><input type="checkbox" name="myCheckbox">bb</td></tr> <tr><td><input type="button" value="全选" onclick="changeBoxes(1);" /></td></tr> <tr><td><input type="button" value="全不选" onclick="changeBoxes(0);" /></td></tr> <tr><td><input type="button" value="反选" onclick="changeBoxes(-1);" /></td></tr> <tr><td></form></td></tr> </tbody></table> <p><br></p> <p> </p> <p><br></p> <p>Définir la zone de liste déroulante </p> <p>L'attribut multiple de la zone de liste déroulante est utilisé pour définir ou obtenir la liste déroulante Si la boîte peut sélectionner plusieurs options. </p> <p>La zone de liste déroulante ne peut sélectionner qu'un seul élément par défaut. Si vous souhaitez la configurer pour sélectionner plusieurs éléments, alors <select multiple = "multiple">. </p> <p>attribut type : le langage JavaScript obtient le type du contrôle de sélection de la zone de liste déroulante en fonction de la valeur de l'attribut type. </p> <p>La valeur de l'attribut type est : select-multiple ou select-one (Remarque : le type de la zone de liste déroulante est contrôlé par l'attribut multiple) </p> <p>i > les options de la liste déroulante (option unique & options multiples) </p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td><script language="javascript"></td></tr> <tr><td>function getSelectValue(_myselect){</td></tr> <tr><td>    var oForm = document.forms["myForm1"];</td></tr> <tr><td>    //根据参数(下拉列表框的name属性值)获得下拉菜单项</td></tr> <tr><td>    var oSelectBox = oForm.elements[_myselect];</td></tr> <tr><td>    //判断是单选还是多选</td></tr> <tr><td>    if(oSelectBox.type == "select-one"){</td></tr> <tr><td>        var iChoice = oSelectBox.selectedIndex;    //获取选中项</td></tr> <tr><td>        alert("单选，您选中了"   oSelectBox.options[iChoice].text);</td></tr> <tr><td>    }</td></tr> <tr><td>    else{</td></tr> <tr><td>        var aChoices = new Array();</td></tr> <tr><td>        //遍历整个下拉菜单</td></tr> <tr><td>        for(var i=0;i<oSelectBox.options.length;i )</td></tr> <tr><td>            if(oSelectBox.options[i].selected)//如果被选中</td></tr> <tr><td>              //压入到数组中</td></tr> <tr><td>              aChoices.push(oSelectBox.options[i].text);</td></tr> <tr><td>        //输出结果</td></tr> <tr><td>        alert("多选，您选了："   aChoices.join());</td></tr> <tr><td>    }</td></tr> <tr><td>}</td></tr> <tr><td></script></td></tr> <tr><td><form method="post" name="myForm1"></td></tr> <tr><td><select id="mysel" name="mysel" multiple="multiple" style="height:60px;"></td></tr> <tr><td>    <option value="a">AA</option></td></tr> <tr><td>    <option value="b">BB</option></td></tr> <tr><td>    <option value="c">CC</option></td></tr> <tr><td></select></td></tr> <tr><td><input type="button" onclick="getSelectValue('mysel')" value="查看选项" /></td></tr> </tbody></table> <p><br></p> <p> </p> <p>ii > Ajouter des options de liste déroulante</p> <p>Ajouter de nouvelles options à la fin</p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td><script language="javascript"></td></tr> <tr><td>function AddOption(Box){ //追加选项到末尾</td></tr> <tr><td>    var oForm = document.forms["myForm1"];</td></tr> <tr><td>    var oBox = oForm.elements[Box];</td></tr> <tr><td>    var oOption = new Option("乒乓球","Pingpang");</td></tr> <tr><td>    oBox.options[oBox.options.length] = oOption;</td></tr> <tr><td>}</td></tr> <tr><td></script></td></tr> </tbody></table> <p><br></p> <p>Insérer une nouvelle option dans la position spécifiée</p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td><script language="javascript"></td></tr> <tr><td>function AddOption(_select,_num){</td></tr> <tr><td>    var oForm = document.forms["myForm1"];</td></tr> <tr><td>    var oBox = oForm.elements[_select];</td></tr> <tr><td>    var oOption = new Option("text值","value值");</td></tr> <tr><td>    //兼容IE7，先添加选项到最后，再移动</td></tr> <tr><td>    oBox.options[oBox.options.length] = oOption;</td></tr> <tr><td>    oBox.insertBefore(oOption,oBox.options[_num]);</td></tr> <tr><td>}</td></tr> <tr><td></script></td></tr> <tr><td><input type="button" value="添加乒乓球" onclick="AddOption('myselect',1);" /></td></tr> </tbody></table> <p><br></p> <p>Remarque : si utilisé directement Lorsque la méthode insertBefore() insère des options, un bug d'option vide apparaîtra dans IE. Afin de résoudre ce bug d'IE, vous pouvez uniquement ajouter la nouvelle option à la fin, puis utiliser la méthode insertBefore() pour la déplacer vers la position correspondante. </p> <p> </p> <p><br></p> <p>Similaire à ceci : Afin de contourner certains bugs ou limitations du navigateur et d'atteindre l'objectif prévu, les petites astuces sont généralement appelées hacks. </p> <p> </p> <p>iii > Remplacer une option </p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td><script language="javascript"></td></tr> <tr><td>//替换选项</td></tr> <tr><td>function ReplaceOption(_select,_num){</td></tr> <tr><td>    var oForm = document.forms["myForm1"];</td></tr> <tr><td>    var oBox = oForm.elements[_select];</td></tr> <tr><td>    var oOption = new Option("text值","value值");</td></tr> <tr><td>    oBox.options[_num] = oOption; //替换第_num 个选项</td></tr> <tr><td>}</td></tr> <tr><td></script></td></tr> <tr><td><input type="button" value="替换选项" onclick="ReplaceOption('selName',1);" /></td></tr> </tbody></table> <p><br></p> <p> via oBox.options [ _num] = oOption remplace directement l'option à la position spécifiée par la nouvelle option créée. </p> <p> </p> <p>iv > Supprimer une option </p> <p><br></p> <table style="border: 0px none; padding: 0px; width: 100%;"><tbody> <tr class="firstRow"><td><script language="javascript"></td></tr> <tr><td>function RemoveOption(_select,_num){</td></tr> <tr><td>    var oForm = document.forms["myForm1"];</td></tr> <tr><td>    var oBox = oForm.elements[_select];</td></tr> <tr><td>    oBox.options[_num] = null;    //删除选项</td></tr> <tr><td>}</td></tr> <tr><td></script></td></tr> <tr><td></head></td></tr> <tr><td><body></td></tr> <tr><td><select id="mysel" name="mysel" multiple="multiple"></td></tr> <tr><td>......</td></tr> <tr><td><input type="button" value="删除选项" onclick="RemoveOption('mysel',1);" /></td></tr> </tbody></table> <p><br></p> <p> directement via les options d'oBox. [_num] = options de suppression nulles. </p> <p> </p><p>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!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>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</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Explication du principe d'analyse HTML" href="http://m.php.cn/fr/faq/355555.html">Explication du principe d'analyse HTML</a></span><span>Article suivant：<a class="dBlack" title="Explication du principe d'analyse HTML" href="http://m.php.cn/fr/faq/355560.html">Explication du principe d'analyse HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/fr/faq/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et href</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><p>Maison</p></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><p>Cours</p></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><p>Questions et réponses</p></a></li><li><a href="http://m.php.cn/fr/login"><b class="icon5"></b><p>Mon</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><span>Maison</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><span>Cours</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><span>Questions et réponses</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/dic.html"><b class="icon6"></b><span>Dictionnaire</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course/type/99.html"><b class="icon7"></b><span>Manuel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/xiazai/"><b class="icon8"></b><span>Télécharger</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/faq/zt" title="Sujet"><b class="icon12"></b><span>Sujet</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/dic.html" >Dictionnaire</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>