繁体   English   中英

使用Jquery输入按键时如何在表中添加行?

[英]How to add row to table when enter key press using Jquery?

我的桌子在这里(因为他坐了200行左右,所以桌子不满)。 此代码用于创建并填充一行:

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

然后,我想在用户使用Enter键时添加一行。 为此,我使用它(有效):

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

因此,我想在用户使用Entry键时添加HTML代码(第一个)。 我对其进行了测试,但是我有几个标签,但由于位于新行中,因此未检测到几个标签。 请问如何纠正?

您可以使用.append()将新行插入表中。

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

但是,如果row的html很长,并且您想从文档中复制它,则可以使用.clone()复制row的html并使用.appendTo()将复制的html追加到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> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM