javascript - 如何使用 Jquery 在按下输入键时向表中添加行？

Question

我的 table 在这里(没有满，因为他需要大约 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>

所以，我想在用户使用 Enter 键时添加 HTML 代码(首先)。我测试了它，但我有几个标签，并且有几个标签未被检测到，因为它们位于新行上。请问如何纠正这个问题？

Answer 1

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

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

但是如果行的html很长并且您想从文档中复制它，您可以使用.clone()复制行的 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>