如何在 table 中添加一个按钮，以便它可以让我添加新的行和列？

Question

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

Answer 1

试试这个。希望这会帮助你。

$("#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>

如何在 table 中添加一个按钮，以便它可以让我添加新的行和列？

how to add a button in a table so that it will let me add new row and columns?

html

asp.net-web-api

angular-ui-bootstrap

angular2-forms

bootstrap-4