Java脚本追加

Question

我在下面编写了一些代码来附加表单输入，包括隐藏的和可见的。但是，当我点击我的添加图标，什么都不会发生。下面是我写的代码。带有id="add“的附加按钮不起作用。有人能帮我做正确的事吗。

​

<script type="text/javascript">
$(document).ready(function() => {
    var num = 1; 
        $("#add").click(function() => {
            var c = "<tr id=\"row" + num + "\"> <td><select class=\"form-control form-select select2\" data-bs-placeholder=\"Select\" name=\"model[]\" required=\"\" id=\"model\"><?php $readALL1 = "SELECT * FROM productmodels WHERE deleted = 0"; $displayAll1 = mysqli_query($conn,$readALL1); while($rowFetchAll1 = mysqli_fetch_array($displayAll1)){ $modelName = $rowFetchAll1['modelName']; $modelid = $rowFetchAll1['modelID']; ?> <option value="<?=$modelid?>"><?=$modelName?></option><?php } ?></select></td> <td> <input type=\"text\" name=\"serialN0[]\" class=\"form-control\" placeholder=\"Serial No...\"> <input type=\"text\" name=\"addedBy[]\" class=\"form-control\" id=\"addedBy\" value="<?=$_SESSION['user_uniq_id']?>" hidden=""> <input type=\"text\" name=\"deviceID[]\" class=\"form-control\" value="<?=time()?>" id=\"deviceID\" hidden=""></td><td><a href=\"javascript:;\" type=\"button\" id=\"add\" class=\"text-danger\" onclick=\"DeleteRow(" + num + ");\"><i class=\"fe fe-minus-circle\" style=\"font-size:1.6em;\"></i></a></td>  </tr>";
            $("tbody").append(c);
            num++;
        });
    });

    function DeleteRow(id) {
        $('#row' + id).remove();
    }

</script>

<div class="card-body">
   <form id="" method="POST" autocomplete="off" novalidate="novalidate">
      <table class="table border text-nowrap text-md-nowrap table-striped mb-0">
         <thead>
            <tr>
               <th>Device Model</th>
               <th>Serial No</th>
               <th>Action</th>
            </tr>
         </thead>
         <tbody class="field_wrapper">
            <tr id="row0">
               <td>
                  <select class="form-control form-select select2" data-bs-placeholder="Select" name="model[]" required="" id="model">
                     <?php 
                        $readALL1 = "SELECT * FROM productmodels WHERE deleted = 0";
                        $displayAll1 = mysqli_query($conn,$readALL1);
                        while($rowFetchAll1 = mysqli_fetch_array($displayAll1)){
                            $modelName = $rowFetchAll1['modelName'];
                            $modelid = $rowFetchAll1['modelID'];
                        ?>
                     <option value="<?=$modelid?>"><?=$modelName?></option>
                     <?php } ?>
                  </select>
               </td>
               <td>
                  <input type="" name="" class="form-control" placeholder="Serial No...">
                  <input type="text" name="addedBy[]" class="form-control" id="addedBy" value="<?=$_SESSION['user_uniq_id']?>" hidden="">
                  <input type="text" name="client[]" class="form-control" value="<?=$clientID?>" id="client" hidden="">
                  <input type="text" name="deviceID[]" class="form-control" value="<?=time()?>" id="deviceID" hidden="">
               </td>
               <td><button type="button" id="add" class=" btn text-success"><i class="fe fe-plus-circle" id="add" style="font-size:1.6em;"></i></button></td>
            </tr>
         </tbody>
      </table>
   </form>
</div>

​

Answer 1

html字符串中有不正确的PHP脚本、和JavaScript箭头函数表达式。结果，您试图添加的html导致了一个错误。

正确的示例如下所示：

$("#add").click(() => {
    var c = "<tr>...<?php ?>...</tr>";
});

我建议您尝试将服务器数据呈现为存储在JavaScript变量中，然后只需要开始处理JavaScript脚本中的数据。

<script type="text/javascript">
    /* first encode your PHP data as JSON and echo (render) it in your JavaScript */
    /* for example, this line after processed by server: */
    var dataFromPHP = <?php echo json_encode(array(
        array('id' => 1, 'name' => 'Brandon'),
        array('id' => 2, 'name' => 'May'),
    )); ?>
    /* will become like this: */
    /* var dataFromPHP = [{"id":1,"name":"Brandon"},{"id":2,"name":"May"}] */

    /* check the log to see how the result looks like */
    console.log(dataFromPHP);

    /* then only you continue process these data */
</script>