新しい行と列を追加できるように、テーブルにボタンを追加する方法は？

<head>

新しい行と列を追加できるように、テーブルにボタンを追加する方法は？

<!-- Here is my code --> 
<h1>this form is to reserve halls</h1> 
<form class="form-horizontal"> 
     <table class="form-group table table-bordered table-hover"> 
       <caption>Reservation times</caption> 
       <thead> 
        <tr> 
         <th></th> 
         <th>From time</th> 
         <th>To time</th> 
         <th>Date</th> 
         <th>Hall</th> 

        </tr> 
       </thead> 
       <tbody> 
        <tr *ngFor="let date of dates; let i=index"> 
         <td>{{date.number}} </td> 
         <td> 
      <select class="form-control" [(ngModel)]="date.startTime1" name="etime-{{i}}" > 
       <option>08</option> 
       <option>09</option> 
       <option>10</option> 
       <option>11</option> 
       <option>12</option> 
       <option>01</option> 
       <option>02</option> 
       <option>03</option> 
       <option>04</option> 

      </select>: 
       <select class="form-control" [(ngModel)]="date.startTime2" name="etime2-{{i}}"> 
       <option>00</option> 
       <option>15</option> 
       <option>30</option> 
       <option>45</option> 

      </select> 
       <select class="form-control" [(ngModel)]="date.startTime3" name="etime3-{{i}}"> 
       <option>Am</option> 
       <option>Pm</option> 

     </select></td> 
         <td> 
          <select class="form-control" [(ngModel)]="date.endTime1" name="endtime-{{i}}"> 
           <option>08</option> 
           <option>09</option> 
           <option>10</option> 
           <option>11</option> 
           <option>12</option> 
           <option>01</option> 
           <option>02</option> 
           <option>03</option> 
           <option>04</option> 

          </select>: 
          <select class="form-control" [(ngModel)]="date.endTime2" name="endtime2-{{i}}"> 
           <option>00</option> 
           <option>15</option> 
           <option>30</option> 
           <option>45</option> 

          </select> 
          <select class="form-control" [(ngModel)]="date.endTime3" name="endtime3-{{i}}"> 
           <option>Am</option> 
           <option>Pm</option> 

          </select></td> 
         <td><input type="text" name="ndate-{{i}}" [(ngModel)]="date.datee" class="form-control" placeholder="DD\MM\YYYY" /> </td> 
         <td> 
       <select class="form-control " [(ngModel)]="date.hall" name="hall-{{i}}"> 
        <option>Dignity hall</option> 
        <option>Sarah hall</option> 
        <option>The son of adult hall</option> 

       </select> </td> </tr> 

      </table> 

    <table class="form-group table table-bordered table-hover"> 
      <caption>Guests</caption> 
      <thead> 
       <tr> 
        <th></th> 
        <th>Guest</th> 
        <th>Organization</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr *ngFor="let guest of guestes; let i=index"> 
        <th>{{guest.number}}</th> 
        <th><input type="text" [(ngModel)]="guest.name" name="txtn-{{i}}" class="form-control" placeholder="Omar Aljarrah" /> </th> 
        <th><input type="text" [(ngModel)]="guest.organization" name="txth-{{i}}" class="form-control" placeholder="Jordan university of science and technology" /></th> 
        </tr> 
      </tbody> 
     </table> 
</form> 
</body>

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head> 
 
    <body> 
 
    
 
     <!-- Here is my code --> 
 
    <h1>this form is to reserve halls</h1> 
 
    <form class="form-horizontal"> 
 
      <table class="form-group table table-bordered table-hover"> 
 
        <caption>Reservation times</caption> 
 
        <thead> 
 
         <tr> 
 
          <th></th> 
 
          <th>From time</th> 
 
          <th>To time</th> 
 
          <th>Date</th> 
 
          <th>Hall</th> 
 
      
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr *ngFor="let date of dates; let i=index"> 
 
          <td>{{date.number}} </td> 
 
          <td> 
 
       <select class="form-control" [(ngModel)]="date.startTime1" name="etime-{{i}}" > 
 
        <option>08</option> 
 
        <option>09</option> 
 
        <option>10</option> 
 
        <option>11</option> 
 
        <option>12</option> 
 
        <option>01</option> 
 
        <option>02</option> 
 
        <option>03</option> 
 
        <option>04</option> 
 
      
 
       </select>: 
 
        <select class="form-control" [(ngModel)]="date.startTime2" name="etime2-{{i}}"> 
 
        <option>00</option> 
 
        <option>15</option> 
 
        <option>30</option> 
 
        <option>45</option> 
 
      
 
       </select> 
 
        <select class="form-control" [(ngModel)]="date.startTime3" name="etime3-{{i}}"> 
 
        <option>Am</option> 
 
        <option>Pm</option> 
 
      
 
      </select></td> 
 
          <td> 
 
           <select class="form-control" [(ngModel)]="date.endTime1" name="endtime-{{i}}"> 
 
            <option>08</option> 
 
            <option>09</option> 
 
            <option>10</option> 
 
            <option>11</option> 
 
            <option>12</option> 
 
            <option>01</option> 
 
            <option>02</option> 
 
            <option>03</option> 
 
            <option>04</option> 
 
      
 
           </select>: 
 
           <select class="form-control" [(ngModel)]="date.endTime2" name="endtime2-{{i}}"> 
 
            <option>00</option> 
 
            <option>15</option> 
 
            <option>30</option> 
 
            <option>45</option> 
 
      
 
           </select> 
 
           <select class="form-control" [(ngModel)]="date.endTime3" name="endtime3-{{i}}"> 
 
            <option>Am</option> 
 
            <option>Pm</option> 
 
      
 
           </select></td> 
 
          <td><input type="text" name="ndate-{{i}}" [(ngModel)]="date.datee" class="form-control" placeholder="DD\MM\YYYY" /> </td> 
 
          <td> 
 
        <select class="form-control " [(ngModel)]="date.hall" name="hall-{{i}}"> 
 
         <option>Dignity hall</option> 
 
         <option>Sarah hall</option> 
 
         <option>The son of adult hall</option> 
 
      
 
        </select> </td> </tr> 
 
      
 
       </table> 
 
     
 
     <table class="form-group table table-bordered table-hover"> 
 
       <caption>Guests</caption> 
 
       <thead> 
 
        <tr> 
 
         <th></th> 
 
         <th>Guest</th> 
 
         <th>Organization</th> 
 
        </tr> 
 
       </thead> 
 
       <tbody> 
 
        <tr *ngFor="let guest of guestes; let i=index"> 
 
         <th>{{guest.number}}</th> 
 
         <th><input type="text" [(ngModel)]="guest.name" name="txtn-{{i}}" class="form-control" placeholder="Omar Aljarrah" /> </th> 
 
         <th><input type="text" [(ngModel)]="guest.organization" name="txth-{{i}}" class="form-control" placeholder="Jordan university of science and technology" /></th> 
 
         </tr> 
 
       </tbody> 
 
      </table> 
 
    </form> 
 
    </body> 
 
    </html>

出典

2017-11-08 Joud Alkhuza' e

、あなたのタイトルを簡素化を検討記事で説明を追加し、より多くのコンテキストを提供します。 – herve

私は質問を簡略化しました –

これを試してみてください。これがあなたを助けることを願っています。

$("#add_new").click(function() { 
 
    $("#maintable").each(function() {  
 
     var tds = '<tr>'; 
 
     jQuery.each($('tr:last td', this), function() { 
 
      tds += '<td>' + $(this).html() + '</td>'; 
 
     }); 
 
     tds += '</tr>'; 
 
     if ($('tbody', this).length > 0) { 
 
      $('tbody', this).append(tds); 
 
     } else { 
 
      $(this).append(tds); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid"> 
 
    <tr> 
 
    <th align="center">Roll No</th> 
 
    <th align="center">First Name</th> 
 
    <th align="center">Last Name</th> 
 
    </tr> 
 
    <tr id="rows"> 
 
    <div style="padding-left: 5px"> 
 
     <td style="padding:5px;"> 
 
     <input type="text" name="rollno<? $i ?>" /> 
 
     </td> 
 
     <td style="padding:5px;"> 
 
     <input type="text" name="firstname<? $i ?>" /> 
 
     </td> 
 
     <td style="padding:5px;"> 
 
     <input type="text" name="lastname<? $i ?>" /> 
 
     </td> 
 
    </div> 
 
    </tr> 
 
</table> 
 
<br /> 
 
<div id="add_new">ADD NEW</div>

出典

2017-11-09 06:57:11

回答を投稿するのは避けてください。ソリューションコードを回答自体に追加してください。 [How To To Answer]（https://stackoverflow.com/help/how-to-answer）を参照してください。 – Alex

このリンクは質問に答えるかもしれませんが、ここでは答えの重要な部分を含めて参照用のリンクを提供することをお勧めします。リンクされたページが変更された場合、リンクのみの回答は無効になります。 - [レビューから]（/レビュー/低品質の投稿/ 17887418） – Elemental

新しい行と列を追加できるように、テーブルにボタンを追加する方法は？

答えて

関連する問題