插入后面的动态行

时间:2014-04-02 14:09:26

标签: javascript php html dynamic row

我有一个动态添加行按钮。我可以添加更多ID和更多客户端但是当我点击plus时,它会将它们添加到我的页面顶部而不是我的行之后。我怎么做?这是我的代码:

    <b>Dimanche</b> </br><?php echo $date1 ?>
        </td>
        <!-- numéro de projet du dimanche -->
        <td>
         <span id="numpro" >
            <form method="post" action="" onsubmit="return false;">
                   <input type="text" id="name" name="add_name"onkeypress="return handleEnter(event, this, 'task');"/></br>
      <?php
    if($result!=false && mysqli_num_rows($result)>0)
    {
        while($product = mysqli_fetch_array($result)): ?>
           <p id="oldRow<?=$product['id']?>">
            <input type="text" name="name<?=$product['id']?>" value="<?=$product['name']?>" /></p>
     <?php endwhile; } ?>
        </span> 
         <input onclick="addRow(this.form);" type="button" value="+" /> 
        </td>
        </form>


        <html>
          <div >
            <form method="post"  >
          <div id="itemRows">

     <?php
    if($result!=false && mysqli_num_rows($result)>0)
    {
        while($product = mysqli_fetch_array($result)): ?>

            <p id="oldRow<?=$product['id']?>">
            <input type="text" name="name<?=$product['id']?>" value="<?=$product['name']?>" /></p>
 <?php endwhile;   }  ?>
     </div>
        <p><input type="submit" name="ok" value="Ajouter à la B.D"></p>
        </form>
    </div>

    <script type="text/javascript">
    var rowNum = 0;
    function addRow(frm) {
        rowNum ++;

        var row = '<p id="rowNum'+rowNum+'">  <input type="text" name="name[]" value="'+frm.add_name.value+'">    <input type="text" name="client1[]" size="12"  class = "client1"  id ="client1" disabled  value="'+frm.client1.value+'"><input type="button" value="-" onclick="removeRow('+rowNum+');"></p>';
        jQuery('#itemRows').append(row);
        frm.add_client1.value = '';
        frm.add_name.value = '';
    }

    function removeRow(rnum) {
        jQuery('#rowNum'+rnum).remove();
    }
    </script>



                    </span> 

                </td>
                </td>
                <!-- client du dimanche -->
                <td>
                    <span id="proclient">

                <input type="text" name="client1" size="12" class = "client1"  id ="client1" disabled />
                    </span>
                </td>
                <!-- description du projet de dimanche -->
                <td>
                    <span id="prodesc">
                        <input type="text" name="desc1" size="30" id ="desc1" class "desc" disabled />
                    </span>
                </td>
                <!-- ddescription de la tache du dimanche -->
                <td>
                    <span id="protache">
                        <textarea rows="1" cols="20" name="taskDesc1" id ="task1" class "task"> </textarea>
                    </span>
                </td>
                <!-- lieu pour dimanche -->
                <td>
                    <span id="prolieu">
                        <input type="text" name="prolieu1" size="10" id ="lieu1" class "lieu">
                    </span> 
                </td>   


                <!-- tache  -->     
                <td>
                    <span id="tache">
                    <!--    <input type="text"  name="tache" size="30" id="tache"class= "tache"  />  -->    

    <!-- début section cobobox tache avec tool tip -->                  
                        <label title="Select your state"> <select title="Select your state" id="state" name="state">
                        <?php

                            $stmt->execute();
                            while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                                echo ' <option title="';
                                echo $row['tacName'];
                                echo '">';
                                echo $row['tacId'];
                                echo '</option>'."\n";
                             $task = array();

                                //echo '<option value="'.$row['tacName'].'">'.$row['tacId'].'</option>'."\n";
                            }
                        ?>
    </select>
    </label>
    <!-- Fin section cobobox tache avec tool tip -->        


                    </span>
                </td>


                <!-- calculter le temps pour le diamnche -->        
                <td>
                    <span id="calculTemps">
                        <input type="number"  name="tempsd" size="30" id="temps1"class= "temps"   min= "0" max="24" value="0"  />   

                    </span>
                </td>

编辑这是我的问题的演示

enter image description here

编辑这是我想要的目标的演示 enter image description here

1 个答案:

答案 0 :(得分:0)

尝试将JQuery函数insertAfterappendTo与选择器:last :first 一起使用。
常见例子:
jQuery('<p>').html('Some content').insertAfter('#id_here:last');
jQuery('<p>').html('Some content').appendTo('#itemRows');