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

Question

我有一个表格，该表格从MYSQL数据库获取其数据。 我试图通过允许用户添加更多信息来使其动态化，但是我在直接在查询的最后一行下添加额外的行时遇到了困难。这是我到目前为止的代码，也是我尝试添加一个代码的尝试使用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>

这是支持添加和删除按钮的Jquery：

    $(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--;
}
       });
     });

该代码在最后一行的下面添加了一行，但由于某种原因，它们在第二行的上面添加了第二行。 我遇到的另一个问题是复制字形的能力，以便删除和编辑每一行。 我真的希望为每行和要添加的新行添加这些内容。

任何帮助将非常感激！ :)

Answer 1

您提供的html中没有“ #tab_logic”。 您还将在<tbody>和<thead>选项之外创建行。 您也没有在jQuery函数中为字形创建html。

编辑 ：对不起，有一个tab_logic。 但是，您需要确保包含用于glypicon的html。 更好的方法可能是克隆一个现有元素并将其插入。

正如您所描述的，我没有看到要插入的其他行：

http://jsfiddle.net/pekv2tx0/

另外：修复您的HTML，这就是引起问题的原因，请注意ap标签内没有主体的封闭锚标签，并且您有一个空行，因此它不会插入多余的内容，它已经在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

在click函数中，尝试将整个行附加到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++;
});