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

Question

我的桌子在这里（不是满的，因为他占用了大约 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>

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

<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 代码（首先）。我对其进行了测试，但我有几个标签，其中几个没有被检测到，因为它们在新行上。请问如何改正？

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>