使用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++;
});