使用PDO和bootstrap将新行添加到现有html表中

Question

I have a table in my form which gets its data from a MYSQL database. I am trying to make it dynamic by allow the user to add more information, however I'm having difficulties in adding an extra row directly under the last row of the query.This is the code i have so far and my attempt at adding a new row using JQuery:

    <h4>Manage Courses</h4>

<div class="container">
    <div class = "container-fluid">
        <div id = "table_container" style="margin-top:50px;" class="mainbox col-md-6">
            <div class="row clearfix">
                <div class="col-md-12">
                    <table class="table table-bordered table-hover" id="tab_logic">
                        <thead>
                            <tr >
                                <!-- <th class="text-center">
                                    #
                                </th> -->
                                <th class="text-center">
                                    Course Code
                                </th>
                                <th class="text-center">
                                    Course Title
                                </th>
                                <!-- <th class="text-center">
                                    Edit
                                </th>
                                <th class="text-center">
                                    Delete
                                </th> -->
                            </tr>
                        </thead>
                        <?php foreach ($courses as $row) {
                            echo "<tr><td>";
                            echo $row['course_code'];
                            echo "</td><td>";
                            echo $row['course_title'];
                            echo "</td>";
                            echo "</tr>"; }
                        ?>
                        <tbody>
                            <tr id='addr0'>
                                <td>
                                    1
                                </td>
                                <td>
                                    <input type="text" name='code'  placeholder='Code' class="form-control"/>
                                </td>
                                <td>
                                    <input type="text" name='title' placeholder='Title' class="form-control"/>
                                </td>
                                <td>
                                    <p 
                                    data-placement="top" 
                                    title="Edit"></a>
                                    <button class="btn btn-primary btn-xs" 
                                    data-title="Edit" 
                                    data-toggle="modal" 
                                    data-target="#edit" >
                                    <span class="glyphicon glyphicon-pencil"></span></button></p>
                                </td>
                                <td>
                                    <p 
                                    data-placement="top" 
                                    data-toggle="tooltip" 
                                    style="margin-left:5px" 
                                    itle="Delete">
                                    <button class="btn btn-danger btn-xs" 
                                    data-title="Delete" 
                                    data-toggle="modal" 
                                    data-target="#delete" >
                                    <span class="glyphicon glyphicon-trash"></span></button></p>
                                </td>
                            </tr>
                            <tr id='addr1'></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <a id="add_row" class="btn btn-default pull-left">Add Row
                <span class="glyphicon glyphicon-plus"></span>
            </a>
            <a id='delete_row' class="pull-left btn btn-default">Delete Row
                <span class="glyphicon glyphicon-trash"></span>
            </a>
        </div>
    </div>
</div>

and this is the Jquery to support the add and delete buttons:

    $(document).ready(function(){
var i=1;
    $("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='code"+i+"' type='text' placeholder='Code' class='form-control input-md'  /> </td><td><input  name='title"+i+"' type='text' placeholder='Title'  class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
  i++;
       });

    $("#delete_row").click(function(){
if(i>1){
  $("#addr"+(i-1)).html('');
  i--;
}
       });
     });

The code adds one row underneath the last row but them adds the second row above it for some reason. Another issue i am encountering is the ability to replicate the glyphicons for the delete and edit for each row. I would really like these to be added for each row and for the new rows being added.

Any help would be much appreciated! :)

Answer 1

In the html you provided there is no "#tab_logic". You are also creating rows outside of the <tbody> and <thead> options. You also are not creating html for the glyphicons in your jQuery function.

Edit : sorry there is a tab_logic. But, you need to make sure you include the html for the glypicon. A better way to do this might be to clone an existing element and insert it.

I'm not seeing the additional row being inserted as you describe:

http://jsfiddle.net/pekv2tx0/

Also: fix your HTML, this is what is causing the problems, note the closing anchor tag with no body, inside of ap tag, and you have an empty row, so it's not inserting an extra, it's already in the html:

<p data-placement="top" title="Edit"></a> <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" > <span class="glyphicon glyphicon-pencil"></span></button></p> </td> <tr id='addr1'></tr>

Answer 2

inside your click function, try appending an entire row to the tbody:

$("#add_row").click(function(){

    $('#tab_logic tbody').append("<tr><td>"+ (i+1) +"</td><td><input name='code"+i+"' type='text' placeholder='Code' class='form-control input-md'  /> </td><td><input  name='title"+i+"' type='text' placeholder='Title'  class='form-control input-md'></td></tr>");
    i++;
});