如何在使用Jquery输入按键时添加行到表格？ [英] How to add row to table when enter key press using Jquery?

问题描述

我在这里有我的桌子（不够饱满，因为他大概需要200行）。此代码用于创建并填充一行：

 < table> 
< TR> 
< TH> 
< FORM> 
< input name =designationtype =textsize =12/> 
< / FORM> 
< / TH> 
< TH> 
< SELECT size =1id =ERDF> 
 ... 
< / SELECT> 
< / TH> 
< TH> 
< input name =famillealign =justifytype =textsize =12/> 
< / TH> 
< TH> 
< FORM> 
< input name =conditionnementalign =justifytype =textsize =12/> 
< / FORM> 
< / TH> 
< TH> 
 <！ -  Tableau dynamique  - > 
 <！ -  APPELER LE CHAMPtotal - > 
< / TH> 
< TH> 
< div> 
< input name =date_livraisonclass =date_livraisonalign =justifytype =datesize =12/> 
< / div> 
< / TH> 
< TH> 
< TABLE> 
< TH> Nom 
<输入名称=nom_recepalign =justifytype =namesize =12/> 
< / TH> 
< TH>便携式
< input name =port_recepalign =justifytype =textsize =12maxlength =10/> 
< / TH> 
< / TABLE> 
< / TH> 
< TH> 
<！ -  Tableau fixe  - > 
< TABLE> 
< TH> Meil​​leur prix 
< FORM> 
< input name =meilleur_prixalign =justifytype =textsize =12/> 
< / FORM> 
< / TH> 
< TH> Fournisseur 
< FORM> 
< input name =fournisseuralign =justifytype =textsize =12/> 
< / FORM> 
< / TH> 
< / TABLE> 
< / TH> 
< / TR> 
< / table> 
  

然后，我想在用户使用Entry键时添加一行。为此，我使用这个（它是工作）：

 < script> 
 $（document）.ready（function（）{
 $（window）.keydown（function（event）{
 if（event.keyCode == 13）{
 event .preventDefault（）; 
 $（body）。load（C：\wamp\www\plat_web\\\
ew_line.php）
} 
 // return false ; 
}）; 
}）; 
< / script> 
  

所以，我想在用户使用Entry键时添加HTML代码（第一个）。我测试了它，但我有几个标签，其中有几个没有被检测到，因为它们在一条新线上。如何改正这个问题？ /rel =nofollow> .append（） 将新行插入到表中。

<$ 。p $ p> $（ TBODY）附加（ < TR> ...< / TR> 中）;


但是如果行的html很长并且您想从文档中复制它，则可以使用 .clone（） 复制行的html并使用 .appendTo（） 将复制的HTML附加到表。

  $（tbody> tr：first ）.clone（）appendTo（ 表）; 
  

  $（window）.keydown（function（）{if（event.keyCode == 13）{$（tbody> tr：first）。clone（）。appendTo（table）; event。您可以使用下面的代码来编写代码：     = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js >< /脚本><表> < TR> < TD> Col1中< / TD> < TD>&Col2中LT; / TD> < TD> COL3< / TD> < TD> COL4< / TD> < TD> COL5< / TD> < / table>  

I have my table here (not full because he take around 200 lines). This code is use for create and fill one row :

<table>
  <TR>
    <TH>
      <FORM>
        <input name="designation" type="text" size="12" />
      </FORM>
    </TH> 
    <TH>
      <SELECT size="1" id="ERDF" >
        ...
      </SELECT>
    </TH>
    <TH>                
      <input name="famille" align="justify" type="text" size="12" />
    </TH> 
    <TH>
      <FORM>
        <input name="conditionnement" align="justify" type="text" size="12" />
      </FORM>
    </TH>
    <TH>
      <!-- Tableau dynamique -->
      <!-- APPELER LE CHAMP "total" -->
    </TH>
    <TH>
      <div>
        <input name="date_livraison" class="date_livraison" align="justify" type="date" size="12" />
      </div>
    </TH>
    <TH>
      <TABLE>
        <TH>Nom
          <input name="nom_recep" align="justify" type="name" size="12" />
        </TH>
        <TH>Portable
          <input name="port_recep" align="justify" type="text" size="12" maxlength="10" />
        </TH>
      </TABLE>
    </TH>
    <TH>
      <!-- Tableau fixe -->
      <TABLE>
        <TH>Meilleur prix
          <FORM>
            <input name="meilleur_prix" align="justify" type="text" size="12" />
          </FORM>
        </TH>
        <TH>Fournisseur
          <FORM>
            <input name="fournisseur" align="justify" type="text" size="12" />
          </FORM>
        </TH>
      </TABLE>
    </TH>
  </TR>
</table>

Then, I want add a row when user use the Entry key. For this, I use this (it's work) :

<script>
        $(document).ready(function() {
            $(window).keydown(function(event){
                if(event.keyCode == 13) {
                    event.preventDefault();
                            $("body").load("C:\wamp\www\plat_web\new_line.php")
                }
                    // return false;
            });
        });
    </script>

So, I want add the HTML code (first) when user use Entry key. I tested it but I have several tags and several were not detected because they are on a new line. How to correct this please?

解决方案

You can use .append() to inserting new row to table.

$("tbody").append("<tr>...</tr>");

But if html of row is long and you want to copy it from document, you can use .clone() to copy html of row and use .appendTo() to appending copied html to end of table.

$("tbody > tr:first").clone().appendTo("table"); 

$(window).keydown(function(){
    if (event.keyCode == 13) {
        $("tbody > tr:first").clone().appendTo("table");       
        event.preventDefault();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td>Col5</td>
    </tr>
</table>

这篇关于如何在使用Jquery输入按键时添加行到表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！