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

Question

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?

Your html code is confusing. Show html of row you what to insert. — Mohammad, Sep 12 '16 at 12:45
This is the HTML for one row. I want this row. And this is HTML than I want use for create the row when user use Entry key. — Yvan1263, Sep 12 '16 at 12:47

score 1 · Accepted Answer · answered Sep 12 '16 at 12:55

1

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>

answered Sep 12 '16 at 12:55

Mohammad

21,175
15
55
84

How to specify a HTML file please? – Yvan1263 Sep 12 '16 at 13:43
@McNavy As mentioned in [question](http://stackoverflow.com/questions/6470567/jquery-load-txt-file-and-insert-into-div), you can use [`.load()`](http://api.jquery.com/load/) to get content of file on server. Like `$("tbody").load("/path/myHtml.html")` that get content of html file and insert it in `tbody`. – Mohammad Sep 12 '16 at 13:49
Don't work :(. I don't understand why . I edit my first post for update. – Yvan1263 Sep 12 '16 at 13:53
@McNavy `C:\wamp\www\plat_web\new_line.php` is path for server side language. But for client side you shouldn't use it. You should use for exampe `localhost/plat_web/new_line.php` – Mohammad Sep 12 '16 at 13:59
Don't work too. My file (new_line.php) is again on my wamp server. So, I can use `C:\wamp\www\plat_web\new_line.php`, right? – Yvan1263 Sep 12 '16 at 14:02
@McNavy No, javascript can't access to your dirive. Javascript only has access to files using domain and url. – Mohammad Sep 12 '16 at 14:05
And how to test my javascrcipt? – Yvan1263 Sep 12 '16 at 19:10

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

1 Answers1

Linked