具有HTML，Javascript和PHP的動態表？

Question

基於此項目 ，我想用自己的表修改此js函數。 專注於此代碼

$("#employee_table tr:last").after("<tr id='row"+$rowno+"'><td><input type='text' name='name[]' placeholder='Enter Name'></td><td><input type='text' name='age[]' placeholder='Enter Age'></td><td><input type='text' name='job[]' placeholder='Enter Job'></td><td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");

當我嘗試將代碼修改為此：

 $("#employee_table tr:last").after("<tr id='row"+$rowno+"'>
    <td>input type='text' name='name[]' placeholder='Enter Name'></td>
    <td><input type='text' name='age[]' placeholder='Enter Age'></td>   <td><input type='text' name='job[]' placeholder='Enter Job'></td>
    <td><input type='button' value='DELETE' onclick=delete_row('row"+$rowno+"')></td></tr>");

不行 如果可以修改和工作，則可以嘗試自己的表代碼。

如果可以分開每個，則可以修改表代碼：

<label><h6>HISTORY OF OWNERSHIP</h6></label>
            <table  class="table table-borderer" border="3" id="add_history"  style="width: 100%; border-color: white" >
           <thead class="text-uppercase" style="background-color: #b3b3ff;border-width: 3px;color:black;text-align: center;font-weight: bold;" >
           <tr>
                      <th style="vertical-align: middle;font-size:12px;font-weight: bold">No</th>
                      <th style="vertical-align: middle;font-size:12px;font-weight: bold">Owner</th>
                      <th style="vertical-align: middle;font-size:12px;font-weight: bold">Remarks</th>
                      <th style="vertical-align: middle;font-size:12px;font-weight: bold">Action</th>
            </tr>
               </thead>
               <tbody>
            <?php
            $no = 0;
            $no++;
            ?>          
            <td style="text-align: center"><input style="width: 150px;max-height: 30px;text-align: center"  class="form-control" type="text" name="no_history[]" value = "<?php echo $no ?>" readonly/></td>
            <td style="text-align: center">
            <select type="text" name="owner2[]" class="form-control" style="text-align: center;font-size: 10px;max-height: 35px">
            <option value="-">-</option> 
            <?php
            $sqlowner = "SELECT * FROM owner ORDER BY owner ASC";
            $hasilowner = mysqli_query($connect2,$sqlowner);
            while ($rowowner = mysqli_fetch_array($hasilowner,MYSQLI_ASSOC))
            {
                $owner = $rowowner['owner'];
            ?>
            <option value="<?php echo $owner?>"><?php echo $owner?></option> 
             <?php
                            }
                            ?>                          
                            </select>
            </td>
            <td style="text-align: center"><input style="width: 150px;max-height: 30px;text-align: center"  class="form-control" type="text" name="remarks[]" onkeyup="this.value = this.value.toUpperCase()" style="text-transform:uppercase"/></td>
            <td style="text-align: center">
            <input type="button" onclick="add_row();" value="ADD ROW" class="btn btn-primary">
            </td>
            </tbody>     
            </table>

Answer 1

首先，您嘗試插入的代碼中缺少語法。 其次，當您的弦弦變得更多時，您可以使用反勾號

 var $rowno = 0; function add_row() { $("#add_history tr:last").after(` <tr id='row${$rowno}'> <td><input type='text' name='name[]' placeholder='Enter Name'></td> <td><input type='text' name='age[]' placeholder='Enter Age'></td> <td><input type='text' name='job[]' placeholder='Enter Job'></td> <td><input type='button' value='DELETE' onclick=delete_row('row${$rowno}')></td></tr> `); $rowno++; } 

 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <table class="table table-borderer" border="3" id="add_history" style="width: 100%; border-color: white"> <thead class="text-uppercase" style="background-color: #b3b3ff;border-width: 3px;color:black;text-align: center;font-weight: bold;"> <tr> <th style="vertical-align: middle;font-size:12px;font-weight: bold">No</th> <th style="vertical-align: middle;font-size:12px;font-weight: bold">Owner</th> <th style="vertical-align: middle;font-size:12px;font-weight: bold">Remarks</th> <th style="vertical-align: middle;font-size:12px;font-weight: bold">Action</th> </tr> </thead> <tbody> <td style="text-align: center"><input style="width: 150px;max-height: 30px;text-align: center" class="form-control" type="text" name="no_history[]" value="" readonly/></td> <td style="text-align: center"> </td> <td style="text-align: center"><input style="width: 150px;max-height: 30px;text-align: center" class="form-control" type="text" name="remarks[]" onkeyup="this.value = this.value.toUpperCase()" style="text-transform:uppercase" /></td> <td style="text-align: center"> <input type="button" onclick="add_row();" value="ADD ROW" class="btn btn-primary"> </td> </tbody> </table>