title: Simplify jquery function for automatic button
body: <p>I've done something that seems to be very long for something maybe simple... So do you have a simplier way to do this ?</p>
  
  <p>I got this page :</p>
  
  <pre><code>&lt;div&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td colspan="4"&gt;&lt;h2&gt;Titre 1&lt;/h2&gt;&lt;/td&gt;
              &lt;/tr&gt;   
              &lt;tr&gt;
                  &lt;td&gt;Choix&lt;/td&gt;
                  &lt;td&gt;&lt;form:checkbox path="cas5"/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Libell&amp;eacute;&lt;/td&gt;
                  &lt;td colspan="3"&gt;&lt;form:input path="libelleCas5" class="libelle" size="100" maxlength="100" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Statut&lt;/td&gt; 
                  &lt;td&gt;&lt;form:input path="statutCas5" class="statut" size="10" maxlength="2" /&gt;&lt;/td&gt;
                  &lt;td align="right"&gt;Dossier&lt;/td&gt;  
                  &lt;td&gt;&lt;form:input path="numDossierCas5" size="10" maxlength="2" /&gt;&lt;/td&gt;
              &lt;/tr&gt;   
              &lt;tr&gt;
                  &lt;td align="left"&gt;D&amp;eacute;tail&lt;/td&gt; 
                  &lt;td colspan="3"&gt;&lt;form:input path="detailSuiviCas5" class="detail" size="100" maxlength="500" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td align="left"&gt;Contact&lt;/td&gt;   
                  &lt;td colspan="3"&gt;&lt;form:input path="contactCas5" class="contact" size="50" maxlength="50" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
           &lt;/table&gt;   
       &lt;/div&gt;
       &lt;div&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td colspan="4"&gt;&lt;h2&gt;Titre 2&lt;/h2&gt;&lt;/td&gt;
              &lt;/tr&gt;   
              &lt;tr&gt;
                  &lt;td&gt;Choix&lt;/td&gt;
                  &lt;td&gt;&lt;form:checkbox path="cas6"/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Libell&amp;eacute;&lt;/td&gt;
                  &lt;td colspan="3"&gt;&lt;form:input path="libelleCas6" class="libelle" size="100" maxlength="100" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Statut&lt;/td&gt; 
                  &lt;td&gt;&lt;form:input path="statutCas6" class="statut" size="10" maxlength="2" /&gt;&lt;/td&gt;
                  &lt;td align="right"&gt;Dossier&lt;/td&gt;  
                  &lt;td&gt;&lt;form:input path="numDossierCas6" size="10" maxlength="2" /&gt;&lt;/td&gt;
              &lt;/tr&gt;   
              &lt;tr&gt;
                  &lt;td align="left"&gt;D&amp;eacute;tail&lt;/td&gt; 
                  &lt;td colspan="3"&gt;&lt;form:input path="detailSuiviCas6" class="detail" size="100" maxlength="500" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td align="left"&gt;Contact&lt;/td&gt;   
                  &lt;td colspan="3" &gt;&lt;form:input path="contactCas6" class="contact" size="50" maxlength="50" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
           &lt;/table&gt;   
       &lt;/div&gt;
  </code></pre>
  
  <p>I want to add a button with a "mailto" link after each contact zone (each input with class=contact).</p>
  
  <p>I did that with jQuery like this :</p>
  
  <pre><code>$(".contact").each(function () {
      var libelleTmp = $(this).parents('table').find('.libelle').val().replace(/'/g, " ").replace(/"/g, " ");
      var detailTmp = $(this).parents('table').find('.detail').val().replace(/'/g, " ").replace(/"/g, " ");
      var onclickvalue = "mailto:" + $(this).val() + "?subject=" + libelleTmp + "&amp;body=" + detailTmp + "\';";
      console.log($(this).val() + libelleTmp);
      var bouton = '&lt;tr class="boutonMail"&gt;&lt;td colspan=4&gt;&lt;input type="button" onclick="window.location=\'' + onclickvalue + '" value="Envoyer email" /&gt;&lt;/tr&gt;&lt;/td&gt;';
      console.log(bouton);
      $(this).parents('table').append(bouton);
      if ($(this).parents('table').find('.statut').val() == 'BL' &amp;&amp; !$(this).val()) {
          $(this).parents('table').find('.boutonMail').hide();
      }
  }).change(function () {
      var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
      var emailaddressVal = $(this).val();
      if (emailaddressVal == '') {} else if (!emailReg.test(emailaddressVal)) {
          $(this).parents('table').find('.boutonMail').hide();
      } else {
          var libelleTmp = $(this).parents('table').find('.libelle').val().replace(/'/g, " ").replace(/"/g, " ");
          var detailTmp = $(this).parents('table').find('.detail').val().replace(/'/g, " ").replace(/"/g, " ");
          var onclickvalue = "mailto:" + $(this).val() + "?subject=" + libelleTmp + "&amp;body=" + detailTmp + "\';";
          console.log($(this).val() + libelleTmp);
          var bouton = '&lt;tr class="boutonMail"&gt;&lt;td colspan=4&gt;&lt;input type="button" onclick="window.location=\'' + onclickvalue + '" value="Envoyer email" /&gt;&lt;/tr&gt;&lt;/td&gt;';
          console.log(bouton);
          $(this).parents('table').find('.boutonMail').replaceWith(bouton);
  
          $(this).parents('table').find('.boutonMail').show();
      }
  });
  </code></pre>
  
  <p>It's a little bit long... Do you have a simpler way to do this ?</p>
  
  <p>Many thanks</p>